@webority/mobile-ui 0.113.0 → 0.115.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 +4418 -4417
- package/dist/canvas-kit/manifest.json +1 -1
- package/dist/canvas-kit/release.json +5 -5
- package/lib/commonjs/components/Card/Card.js +1 -1
- package/lib/commonjs/components/EmptyState/EmptyState.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/module/components/Card/Card.js +1 -1
- package/lib/module/components/EmptyState/EmptyState.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/typescript/commonjs/theme/types.d.ts +20 -1
- package/lib/typescript/module/theme/types.d.ts +20 -1
- package/package.json +11 -11
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "webority-phone",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.115.0",
|
|
4
4
|
"platform": "Phone",
|
|
5
5
|
"kitModuleVersion": 2,
|
|
6
6
|
"rendererProtocolVersion": 13,
|
|
7
7
|
"library": {
|
|
8
8
|
"name": "@webority/mobile-ui",
|
|
9
|
-
"version": "0.
|
|
9
|
+
"version": "0.115.0"
|
|
10
10
|
},
|
|
11
11
|
"files": {
|
|
12
12
|
"manifest.json": {
|
|
13
|
-
"sha256": "
|
|
13
|
+
"sha256": "3976146b55a56bae3a6847e6b9de7c1ff8a2521eb713d11934b44bd89294dc94",
|
|
14
14
|
"bytes": 636991
|
|
15
15
|
},
|
|
16
16
|
"kit.js": {
|
|
17
|
-
"sha256": "
|
|
18
|
-
"bytes":
|
|
17
|
+
"sha256": "d5146e7c0539c4723e2642acf06b4b0391260f6adb88ac2ae4d5a1e30fb20b54",
|
|
18
|
+
"bytes": 5959831
|
|
19
19
|
},
|
|
20
20
|
"kit.css": {
|
|
21
21
|
"sha256": "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.DEFAULT_CARD_LABELS=exports.Card=void 0;var cache,_react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_useControllableState=require("../../hooks/useControllableState.js"),_usePressAnimation=require("../../hooks/usePressAnimation.js"),_index=require("../../theme/index.js"),_corners=require("../../utils/corners.js"),_hapticUtils=require("../../utils/hapticUtils.js"),_mergeRefs=require("../../utils/mergeRefs.js"),_shadows=require("../../utils/shadows.js"),_squircle=require("../../utils/squircle.js"),_themeStyles=require("../../utils/themeStyles.js"),_warnInvalidValue=require("../../utils/warnInvalidValue.js"),_AppIcon=require("../AppIcon/AppIcon.js"),_useContextMenu=require("../Menu/useContextMenu.js"),_index2=require("../Skeleton/index.js"),_SquircleFill=require("../SquircleFill/SquircleFill.js"),_index3=require("../Text/index.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if(!t&&e&&e.__esModule)return e;var i,s,a=Object.defineProperty,r={__proto__:null,default:e};if(Object(e)!==e)return r;if(cache||"function"!=typeof WeakMap||(cache=new WeakMap),cache){if(cache.has(e))return cache.get(e);cache.set(e,r)}for(s in e)"default"!==s&&{}.hasOwnProperty.call(e,s)&&((i=a&&Object.getOwnPropertyDescriptor(e,s))&&(i.get||i.set)?a(r,s,i):r[s]=e[s]);return r}const BACKGROUND_TOKENS=["bg","bg-subtle","bg-muted","surface","scrim","surface-inverse"],DEFAULT_CARD_LABELS=exports.DEFAULT_CARD_LABELS=Object.freeze({remove:"Remove",show:"Show",hide:"Hide",loading:"Loading"}),paddingMap={none:"none",sm:"sm",md:"lg",lg:"xl",xl:"2xl"},Card=exports.Card=_react.default.memo((0,_react.forwardRef)((e,t)=>{const{children:i,variant:s="elevated",elevation:a="card",radius:r="lg",padding:n="md",interactive:o=!1,pressAnimation:l="scale",bg:d,header:c,title:u,titleFont:h="sans",lead:m,action:_,headerActions:x,collapsible:p=!1,collapsed:b,defaultCollapsed:g=!1,onCollapsedChange:j,collapsedSummary:y,onRemove:v,separatorHeight:R=_reactNative.StyleSheet.hairlineWidth,footer:f,imageSource:S,imageHeight:w=160,imageAspectRatio:C,imageOverlay:A,loading:q=!1,gradient:I,onPress:N,haptic:F,contextMenu:L,accessibilityLabel:V,accessibilityHint:k,accessibilityRole:T,style:B,containerStyle:P,headerStyle:D,bodyStyle:M,footerStyle:z,borderRadius:H,testID:E,labels:O,onLayout:W,...U}=e;(0,_warnInvalidValue.warnInvalidValue)("Card","variant",e.variant,["elevated","outline","filled","flat"]),(0,_warnInvalidValue.warnInvalidValue)("Card","radius",e.radius,["sm","md","lg","xl"]),(0,_warnInvalidValue.warnInvalidValue)("Card","padding",e.padding,["none","sm","md","lg","xl"]),(0,_warnInvalidValue.warnInvalidValue)("Card","titleFont",e.titleFont,["sans","serif"]),(0,_warnInvalidValue.warnInvalidValue)("Card","pressAnimation",e.pressAnimation,["scale","bounce","fade","sink","pulse","dim","false"]);const G=(0,_index.useTheme)(),K=(0,_react.useMemo)(()=>({...DEFAULT_CARD_LABELS,...O}),[O]),$=o||"function"==typeof N,J=(0,_useContextMenu.useContextMenu)(L,{haptic:F||!1,testID:E,accessibilityActions:U.accessibilityActions,onAccessibilityAction:U.onAccessibilityAction}),Q=(0,_react.useMemo)(()=>(0,_mergeRefs.mergeRefs)(t,J.hostRef),[t,J.hostRef]),X=$||J.enabled,{style:Y,pressIn:Z,pressOut:ee}=(0,_usePressAnimation.usePressAnimation)({preset:l||"scale",enabled:X&&!1!==l}),te=stylesFor(G),ie=Boolean(S),se=G.space[paddingMap[n]],ae=(0,_react.useMemo)(()=>I?"string"==typeof I?G.settings.gradients[I]??null:I:null,[I,G.settings.gradients]),re="flat"===s,ne=re?G.radius.none:H??G.radius[r],oe=resolveBackground(G,d),[le,de]=(0,_useControllableState.useControllableState)({value:b,defaultValue:g,onChange:j}),ce=p&&le,ue=hasBuiltInHeaderContent(e),he=Boolean(c)||ue,me=(0,_SquircleFill.useSquircle)(!ie&&!ae&&!re,ne,W),xe=_reactNative.StyleSheet.flatten([B,P])??{},pe=xe.backgroundColor,be=xe.borderColor,ge=pe??oe??("filled"===s?G.colors["bg-subtle"]:G.colors.surface),je="outline"===s?G.size.border:0,ye=be??G.colors.border,ve="none"===a?void 0:G.shadow[a],Re="elevated"===s&&(0,_shadows.supportsBoxShadow)()&&ve?(0,_shadows.toBoxShadow)(ve):void 0,fe=me.active&&"elevated"===s&&!Re,Se=me.active&&!fe?{backgroundColor:"transparent",borderColor:"transparent"}:null,we=(0,_react.useMemo)(()=>{const e={borderRadius:fe&&me.size?(0,_squircle.squircleHostRadius)(me.size.width,me.size.height,ne):ne,..._corners.smoothCorners,padding:ie||me.active?G.space.none:se,overflow:me.active?"visible":"hidden"};switch(s){case"flat":return{...e,backgroundColor:oe??G.colors.surface,borderBottomWidth:R,borderBottomColor:G.colors.border};case"outline":return{...e,backgroundColor:me.active?"transparent":oe??G.colors.surface,borderWidth:G.size.border,borderColor:me.active?"transparent":G.colors.border};case"filled":return{...e,backgroundColor:me.active?"transparent":oe??G.colors["bg-subtle"]};default:return{...e,backgroundColor:oe??G.colors.surface,...Re?{boxShadow:Re}:ve}}},[G,s,ve,ne,ie,se,me.active,me.size,Re,fe,oe,R]),Ce=(0,_react.useMemo)(()=>({..."number"==typeof C?{width:"100%",aspectRatio:C}:{width:"100%",height:w},borderTopLeftRadius:ne,borderTopRightRadius:ne,borderBottomLeftRadius:G.radius.none,borderBottomRightRadius:G.radius.none,..._corners.smoothCorners}),[G,ne,C,w]),Ae=u??"",qe=(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:te.titleColumn,children:[u?(0,_jsxRuntime.jsx)(_index3.Text,{variant:"title",accessibilityRole:"header",style:titleFaceFor(G,h),children:u}):null,m?(0,_jsxRuntime.jsx)(_index3.Text,{variant:"bodySmall",style:te.lead,children:m}):null,ce&&y?(0,_jsxRuntime.jsx)(_index3.Text,{variant:"caption",style:te.lead,children:y}):null]}),isCardTextAction(_)?(0,_jsxRuntime.jsx)(CardTextActionButton,{action:_,haptic:F}):_?(0,_jsxRuntime.jsx)(_reactNative.View,{style:te.actionNode,children:_}):null,x,p?(0,_jsxRuntime.jsx)(CardIconAction,{icon:ce?"chevron-down":"chevron-up",label:`${ce?K.show:K.hide} ${Ae}`.trim(),expanded:!ce,onPress:()=>de(!ce),haptic:F}):null,v?(0,_jsxRuntime.jsx)(CardIconAction,{icon:"trash",label:K.remove,onPress:v,color:G.colors["danger-text"],haptic:F}):null]}),Ie=(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[he?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[te.header,!c&&te.headerRow,ce&&te.headerFolded,D],children:c??qe}):null,ce?null:(0,_jsxRuntime.jsx)(_reactNative.View,{style:[he||f?te.body:null,M],children:i}),f&&!ce?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[te.footer,z],children:f}):null]}),Ne=ie?(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:te.imageWrapper,children:[(0,_jsxRuntime.jsx)(_reactNative.Image,{source:S,resizeMode:"cover",style:Ce,accessibilityLabel:"",accessible:!1}),A?(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"box-none",style:te.imageOverlay,children:A}):null]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:{padding:se},children:Ie})]}):Ie,Fe=ae?(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_index.Gradient,{gradient:ae,style:_reactNative.StyleSheet.absoluteFill}),Ne]}):me.active&&me.size?(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_SquircleFill.SquircleFill,{width:me.size.width,height:me.size.height,radius:ne,fill:ge,stroke:je?ye:void 0,strokeWidth:je}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[te.squircleClip,{padding:se,borderRadius:me.size?(0,_squircle.squircleHostRadius)(me.size.width,me.size.height,ne):ne}],children:Ne})]}):Ne;let Le;if(X){const handlePress=e=>{$&&(F&&(0,_hapticUtils.triggerHaptic)(F),N?.(e))};Le=(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:Y,children:(0,_jsxRuntime.jsx)(_reactNative.Pressable,{ref:Q,onPress:handlePress,onPressIn:Z,onPressOut:ee,accessibilityRole:T??($?"button":void 0),accessibilityLabel:V,accessibilityHint:k,testID:E,onLayout:me.onLayout,style:[we,B,P,Se],...U,...J.hostProps,children:Fe})})}else Le=(0,_jsxRuntime.jsx)(_reactNative.View,{ref:t,accessibilityLabel:V,accessibilityHint:k,accessibilityRole:T,testID:E,onLayout:me.onLayout,style:[we,B,P,Se],...U,children:Fe});return q?(0,_jsxRuntime.jsx)(CardSkeleton,{...e}):J.enabled?(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[Le,J.renderSurface((0,_jsxRuntime.jsx)(_reactNative.View,{style:[we,B,P,Se,te.preview],children:Fe}))]}):Le}));Card.displayName="Card";const CardSkeleton=({variant:e="elevated",elevation:t,radius:i="lg",padding:s="md",bg:a,header:r,footer:n,imageSource:o,imageHeight:l=160,imageAspectRatio:d,borderRadius:c,containerStyle:u,headerStyle:h,bodyStyle:m,footerStyle:_,style:x,labels:p,...b})=>{const g=(0,_index.useTheme)(),j={...DEFAULT_CARD_LABELS,...p},y=paddingMap[s],v=g.space[y],R="flat"===e?g.radius.none:c??g.radius[i],f=void 0!==r||hasBuiltInHeaderContent(b),S=resolveBackground(g,a)??g.colors.surface,w="outline"===e?1:0,C="outline"===e?g.colors.border:void 0;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[{backgroundColor:S,borderRadius:R,..._corners.smoothCorners,borderWidth:w,borderColor:C,overflow:"hidden"},u,x],accessibilityRole:"progressbar",accessibilityLabel:j.loading,accessibilityState:{busy:!0},"aria-busy":!0,children:[void 0!==o?(0,_jsxRuntime.jsx)(_index2.Skeleton,{width:"100%",height:d?void 0:l,style:d?{aspectRatio:d,width:"100%"}:void 0}):null,f?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[{padding:v,paddingBottom:g.space.sm},h],children:(0,_jsxRuntime.jsx)(_index2.Skeleton,{shape:"text",width:"60%",height:18})}):null,(0,_jsxRuntime.jsx)(_reactNative.View,{style:[{padding:v},m],children:(0,_jsxRuntime.jsx)(_index2.SkeletonText,{lines:3,fontSize:g.text.base.size,lastLineWidth:"55%"})}),void 0!==n?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[{padding:v,paddingTop:g.space.sm,flexDirection:"row"},_],children:(0,_jsxRuntime.jsx)(_index2.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.default.isValidElement(e)&&"label"in e&&"onPress"in e,HIT_TARGET=44,CardIconAction=({icon:e,label:t,onPress:i,expanded:s,color:a,haptic:r})=>{const n=(0,_index.useTheme)();return(0,_jsxRuntime.jsx)(_reactNative.Pressable,{accessibilityRole:"button",accessibilityLabel:t,accessibilityState:void 0===s?void 0:{expanded:s},"aria-expanded":s,onPress:()=>{r&&(0,_hapticUtils.triggerHaptic)(r),i()},style:iconActionStyle,children:(0,_jsxRuntime.jsx)(_AppIcon.AppIcon,{name:e,size:20,color:a??n.colors["text-body"]})})},CardTextActionButton=({action:e,haptic:t})=>(0,_jsxRuntime.jsx)(_reactNative.Pressable,{accessibilityRole:"button",accessibilityLabel:e.accessibilityLabel??e.label,onPress:()=>{t&&(0,_hapticUtils.triggerHaptic)(t),e.onPress()},style:textActionStyle,children:(0,_jsxRuntime.jsx)(_index3.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?(0,_index.fontFor)(e,"semibold","display"):{fontFamily:void 0,...(0,_index.fontFor)(e,"semibold")},resolveBackground=(e,t)=>{if(null!=t)return BACKGROUND_TOKENS.includes(t)?e.colors[t]:t},buildStyles=e=>_reactNative.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:{..._reactNative.StyleSheet.absoluteFill},squircleClip:{flexGrow:1,overflow:"hidden",..._corners.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=(0,_themeStyles.themeStyles)(buildStyles);var _default=exports.default=Card;
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.DEFAULT_CARD_LABELS=exports.Card=void 0;var cache,_react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_useControllableState=require("../../hooks/useControllableState.js"),_usePressAnimation=require("../../hooks/usePressAnimation.js"),_index=require("../../theme/index.js"),_corners=require("../../utils/corners.js"),_hapticUtils=require("../../utils/hapticUtils.js"),_mergeRefs=require("../../utils/mergeRefs.js"),_shadows=require("../../utils/shadows.js"),_squircle=require("../../utils/squircle.js"),_themeStyles=require("../../utils/themeStyles.js"),_warnInvalidValue=require("../../utils/warnInvalidValue.js"),_AppIcon=require("../AppIcon/AppIcon.js"),_useContextMenu=require("../Menu/useContextMenu.js"),_index2=require("../Skeleton/index.js"),_SquircleFill=require("../SquircleFill/SquircleFill.js"),_index3=require("../Text/index.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if(!t&&e&&e.__esModule)return e;var i,s,a=Object.defineProperty,r={__proto__:null,default:e};if(Object(e)!==e)return r;if(cache||"function"!=typeof WeakMap||(cache=new WeakMap),cache){if(cache.has(e))return cache.get(e);cache.set(e,r)}for(s in e)"default"!==s&&{}.hasOwnProperty.call(e,s)&&((i=a&&Object.getOwnPropertyDescriptor(e,s))&&(i.get||i.set)?a(r,s,i):r[s]=e[s]);return r}const BACKGROUND_TOKENS=["bg","bg-subtle","bg-muted","surface","scrim","surface-inverse"],DEFAULT_CARD_LABELS=exports.DEFAULT_CARD_LABELS=Object.freeze({remove:"Remove",show:"Show",hide:"Hide",loading:"Loading"}),paddingMap={none:"none",sm:"sm",md:"lg",lg:"xl",xl:"2xl"},Card=exports.Card=_react.default.memo((0,_react.forwardRef)((e,t)=>{const{children:i,variant:s,elevation:a="card",radius:r,padding:n,interactive:o=!1,pressAnimation:l="scale",bg:d,header:c,title:u,titleFont:h,lead:m,action:_,headerActions:x,collapsible:p=!1,collapsed:b,defaultCollapsed:g=!1,onCollapsedChange:j,collapsedSummary:y,onRemove:v,separatorHeight:R=_reactNative.StyleSheet.hairlineWidth,footer:f,imageSource:S,imageHeight:w=160,imageAspectRatio:C,imageOverlay:A,loading:q=!1,gradient:F,onPress:I,haptic:N,contextMenu:L,accessibilityLabel:V,accessibilityHint:k,accessibilityRole:T,style:B,containerStyle:P,headerStyle:D,bodyStyle:M,footerStyle:z,borderRadius:H,testID:E,labels:O,onLayout:W,...U}=e;(0,_warnInvalidValue.warnInvalidValue)("Card","variant",e.variant,["elevated","outline","filled","flat"]),(0,_warnInvalidValue.warnInvalidValue)("Card","radius",e.radius,["sm","md","lg","xl"]),(0,_warnInvalidValue.warnInvalidValue)("Card","padding",e.padding,["none","sm","md","lg","xl"]),(0,_warnInvalidValue.warnInvalidValue)("Card","titleFont",e.titleFont,["sans","serif"]),(0,_warnInvalidValue.warnInvalidValue)("Card","pressAnimation",e.pressAnimation,["scale","bounce","fade","sink","pulse","dim","false"]);const G=(0,_index.useTheme)(),K=G.settings.components.card,$=s??K?.defaultVariant??"elevated",J=r??K?.defaultRadius??"lg",Q=n??K?.defaultPadding??"md",X=h??K?.defaultTitleFont??"sans",Y=(0,_react.useMemo)(()=>({...DEFAULT_CARD_LABELS,...O}),[O]),Z=o||"function"==typeof I,ee=(0,_useContextMenu.useContextMenu)(L,{haptic:N||!1,testID:E,accessibilityActions:U.accessibilityActions,onAccessibilityAction:U.onAccessibilityAction}),te=(0,_react.useMemo)(()=>(0,_mergeRefs.mergeRefs)(t,ee.hostRef),[t,ee.hostRef]),ie=Z||ee.enabled,{style:se,pressIn:ae,pressOut:re}=(0,_usePressAnimation.usePressAnimation)({preset:l||"scale",enabled:ie&&!1!==l}),ne=stylesFor(G),oe=Boolean(S),le=G.space[paddingMap[Q]],de=(0,_react.useMemo)(()=>F?"string"==typeof F?G.settings.gradients[F]??null:F:null,[F,G.settings.gradients]),ce="flat"===$,ue=ce?G.radius.none:H??G.radius[J],he=resolveBackground(G,d),[me,xe]=(0,_useControllableState.useControllableState)({value:b,defaultValue:g,onChange:j}),pe=p&&me,be=hasBuiltInHeaderContent(e),ge=Boolean(c)||be,je=(0,_SquircleFill.useSquircle)(!oe&&!de&&!ce,ue,W),ye=_reactNative.StyleSheet.flatten([B,P])??{},ve=ye.backgroundColor,Re=ye.borderColor,fe=ve??he??("filled"===$?G.colors["bg-subtle"]:G.colors.surface),Se="outline"===$?G.size.border:0,we=Re??G.colors.border,Ce="none"===a?void 0:G.shadow[a],Ae="elevated"===$&&(0,_shadows.supportsBoxShadow)()&&Ce?(0,_shadows.toBoxShadow)(Ce):void 0,qe=je.active&&"elevated"===$&&!Ae,Fe=je.active&&!qe?{backgroundColor:"transparent",borderColor:"transparent"}:null,Ie=(0,_react.useMemo)(()=>{const e={borderRadius:qe&&je.size?(0,_squircle.squircleHostRadius)(je.size.width,je.size.height,ue):ue,..._corners.smoothCorners,padding:oe||je.active?G.space.none:le,overflow:je.active?"visible":"hidden"};switch($){case"flat":return{...e,backgroundColor:he??G.colors.surface,borderBottomWidth:R,borderBottomColor:G.colors.border};case"outline":return{...e,backgroundColor:je.active?"transparent":he??G.colors.surface,borderWidth:G.size.border,borderColor:je.active?"transparent":G.colors.border};case"filled":return{...e,backgroundColor:je.active?"transparent":he??G.colors["bg-subtle"]};default:return{...e,backgroundColor:he??G.colors.surface,...Ae?{boxShadow:Ae}:Ce}}},[G,$,Ce,ue,oe,le,je.active,je.size,Ae,qe,he,R]),Ne=(0,_react.useMemo)(()=>({..."number"==typeof C?{width:"100%",aspectRatio:C}:{width:"100%",height:w},borderTopLeftRadius:ue,borderTopRightRadius:ue,borderBottomLeftRadius:G.radius.none,borderBottomRightRadius:G.radius.none,..._corners.smoothCorners}),[G,ue,C,w]),Le=u??"",Ve=(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:ne.titleColumn,children:[u?(0,_jsxRuntime.jsx)(_index3.Text,{variant:"title",accessibilityRole:"header",style:titleFaceFor(G,X),children:u}):null,m?(0,_jsxRuntime.jsx)(_index3.Text,{variant:"bodySmall",style:ne.lead,children:m}):null,pe&&y?(0,_jsxRuntime.jsx)(_index3.Text,{variant:"caption",style:ne.lead,children:y}):null]}),isCardTextAction(_)?(0,_jsxRuntime.jsx)(CardTextActionButton,{action:_,haptic:N}):_?(0,_jsxRuntime.jsx)(_reactNative.View,{style:ne.actionNode,children:_}):null,x,p?(0,_jsxRuntime.jsx)(CardIconAction,{icon:pe?"chevron-down":"chevron-up",label:`${pe?Y.show:Y.hide} ${Le}`.trim(),expanded:!pe,onPress:()=>xe(!pe),haptic:N}):null,v?(0,_jsxRuntime.jsx)(CardIconAction,{icon:"trash",label:Y.remove,onPress:v,color:G.colors["danger-text"],haptic:N}):null]}),ke=(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[ge?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[ne.header,!c&&ne.headerRow,pe&&ne.headerFolded,D],children:c??Ve}):null,pe?null:(0,_jsxRuntime.jsx)(_reactNative.View,{style:[ge||f?ne.body:null,M],children:i}),f&&!pe?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[ne.footer,z],children:f}):null]}),Te=oe?(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:ne.imageWrapper,children:[(0,_jsxRuntime.jsx)(_reactNative.Image,{source:S,resizeMode:"cover",style:Ne,accessibilityLabel:"",accessible:!1}),A?(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"box-none",style:ne.imageOverlay,children:A}):null]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:{padding:le},children:ke})]}):ke,Be=de?(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_index.Gradient,{gradient:de,style:_reactNative.StyleSheet.absoluteFill}),Te]}):je.active&&je.size?(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_SquircleFill.SquircleFill,{width:je.size.width,height:je.size.height,radius:ue,fill:fe,stroke:Se?we:void 0,strokeWidth:Se}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[ne.squircleClip,{padding:le,borderRadius:je.size?(0,_squircle.squircleHostRadius)(je.size.width,je.size.height,ue):ue}],children:Te})]}):Te;let Pe;if(ie){const handlePress=e=>{Z&&(N&&(0,_hapticUtils.triggerHaptic)(N),I?.(e))};Pe=(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:se,children:(0,_jsxRuntime.jsx)(_reactNative.Pressable,{ref:te,onPress:handlePress,onPressIn:ae,onPressOut:re,accessibilityRole:T??(Z?"button":void 0),accessibilityLabel:V,accessibilityHint:k,testID:E,onLayout:je.onLayout,style:[Ie,B,P,Fe],...U,...ee.hostProps,children:Be})})}else Pe=(0,_jsxRuntime.jsx)(_reactNative.View,{ref:t,accessibilityLabel:V,accessibilityHint:k,accessibilityRole:T,testID:E,onLayout:je.onLayout,style:[Ie,B,P,Fe],...U,children:Be});return q?(0,_jsxRuntime.jsx)(CardSkeleton,{...e}):ee.enabled?(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[Pe,ee.renderSurface((0,_jsxRuntime.jsx)(_reactNative.View,{style:[Ie,B,P,Fe,ne.preview],children:Be}))]}):Pe}));Card.displayName="Card";const CardSkeleton=({variant:e,elevation:t,radius:i,padding:s,bg:a,header:r,footer:n,imageSource:o,imageHeight:l=160,imageAspectRatio:d,borderRadius:c,containerStyle:u,headerStyle:h,bodyStyle:m,footerStyle:_,style:x,labels:p,...b})=>{const g=(0,_index.useTheme)(),j=g.settings.components.card,y=e??j?.defaultVariant??"elevated",v=i??j?.defaultRadius??"lg",R=s??j?.defaultPadding??"md",f={...DEFAULT_CARD_LABELS,...p},S=paddingMap[R],w=g.space[S],C="flat"===y?g.radius.none:c??g.radius[v],A=void 0!==r||hasBuiltInHeaderContent(b),q=resolveBackground(g,a)??g.colors.surface,F="outline"===y?1:0,I="outline"===y?g.colors.border:void 0;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[{backgroundColor:q,borderRadius:C,..._corners.smoothCorners,borderWidth:F,borderColor:I,overflow:"hidden"},u,x],accessibilityRole:"progressbar",accessibilityLabel:f.loading,accessibilityState:{busy:!0},"aria-busy":!0,children:[void 0!==o?(0,_jsxRuntime.jsx)(_index2.Skeleton,{width:"100%",height:d?void 0:l,style:d?{aspectRatio:d,width:"100%"}:void 0}):null,A?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[{padding:w,paddingBottom:g.space.sm},h],children:(0,_jsxRuntime.jsx)(_index2.Skeleton,{shape:"text",width:"60%",height:18})}):null,(0,_jsxRuntime.jsx)(_reactNative.View,{style:[{padding:w},m],children:(0,_jsxRuntime.jsx)(_index2.SkeletonText,{lines:3,fontSize:g.text.base.size,lastLineWidth:"55%"})}),void 0!==n?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[{padding:w,paddingTop:g.space.sm,flexDirection:"row"},_],children:(0,_jsxRuntime.jsx)(_index2.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.default.isValidElement(e)&&"label"in e&&"onPress"in e,HIT_TARGET=44,CardIconAction=({icon:e,label:t,onPress:i,expanded:s,color:a,haptic:r})=>{const n=(0,_index.useTheme)();return(0,_jsxRuntime.jsx)(_reactNative.Pressable,{accessibilityRole:"button",accessibilityLabel:t,accessibilityState:void 0===s?void 0:{expanded:s},"aria-expanded":s,onPress:()=>{r&&(0,_hapticUtils.triggerHaptic)(r),i()},style:iconActionStyle,children:(0,_jsxRuntime.jsx)(_AppIcon.AppIcon,{name:e,size:20,color:a??n.colors["text-body"]})})},CardTextActionButton=({action:e,haptic:t})=>(0,_jsxRuntime.jsx)(_reactNative.Pressable,{accessibilityRole:"button",accessibilityLabel:e.accessibilityLabel??e.label,onPress:()=>{t&&(0,_hapticUtils.triggerHaptic)(t),e.onPress()},style:textActionStyle,children:(0,_jsxRuntime.jsx)(_index3.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?(0,_index.fontFor)(e,"semibold","display"):{fontFamily:void 0,...(0,_index.fontFor)(e,"semibold")},resolveBackground=(e,t)=>{if(null!=t)return BACKGROUND_TOKENS.includes(t)?e.colors[t]:t},buildStyles=e=>_reactNative.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:{..._reactNative.StyleSheet.absoluteFill},squircleClip:{flexGrow:1,overflow:"hidden",..._corners.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=(0,_themeStyles.themeStyles)(buildStyles);var _default=exports.default=Card;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.EmptyState=void 0;var _react=require("react"),_reactNative=require("react-native"),_usePressAnimation=require("../../hooks/usePressAnimation.js"),_index=require("../../theme/index.js"),_corners=require("../../utils/corners.js"),_hapticUtils=require("../../utils/hapticUtils.js"),_warnInvalidValue=require("../../utils/warnInvalidValue.js"),_SquircleFill=require("../SquircleFill/SquircleFill.js"),_index2=require("../Text/index.js"),_jsxRuntime=require("react/jsx-runtime");const ActionButton=({action:e,variant:t})=>{const i=(0,_index.useTheme)(),{style:r,pressIn:s,pressOut:n}=(0,_usePressAnimation.usePressAnimation)({enabled:!0}),o=(0,_react.useMemo)(()=>buildActionStyles(i),[i]),a="primary"===t,l=(0,_SquircleFill.useSquircle)(!0,i.radius.md),fillFor=e=>a?e?i.colors["primary-hover"]:i.colors.primary:e?i.colors["surface-pressed"]:"transparent";return(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:r,children:(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:()=>{(0,_hapticUtils.triggerHaptic)("selection"),e.onPress()},onPressIn:s,onPressOut:n,accessibilityRole:"button",accessibilityLabel:e.accessibilityLabel??e.label,accessibilityHint:e.accessibilityHint,testID:e.testID,onLayout:l.onLayout,style:({pressed:e})=>[o.button,a?o.buttonPrimary:o.buttonSecondary,e&&!l.active?a?o.buttonPrimaryPressed:o.buttonSecondaryPressed:null,l.active?o.buttonSquircleHost:null],children:({pressed:t})=>(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[l.active&&l.size?(0,_jsxRuntime.jsx)(_SquircleFill.SquircleFill,{width:l.size.width,height:l.size.height,radius:i.radius.md,fill:fillFor(t),stroke:a?void 0:i.colors.border,strokeWidth:a?0:1}):null,(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[o.buttonText,a?o.buttonTextPrimary:o.buttonTextSecondary],numberOfLines:1,children:e.label})]})})})},EmptyState=exports.EmptyState=(0,_react.forwardRef)((e,t)=>{const i=(0,_index.useTheme)(),r=Object.keys(i.components["empty-state"]);(0,_warnInvalidValue.warnInvalidValue)("EmptyState","size",e.size,r),(0,_warnInvalidValue.warnInvalidValue)("EmptyState","variant",e.variant,["block","inline"]);const{icon:s,illustration:n,title:o,description:a,action:l,secondaryAction:c,size:u
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.EmptyState=void 0;var _react=require("react"),_reactNative=require("react-native"),_usePressAnimation=require("../../hooks/usePressAnimation.js"),_index=require("../../theme/index.js"),_corners=require("../../utils/corners.js"),_hapticUtils=require("../../utils/hapticUtils.js"),_warnInvalidValue=require("../../utils/warnInvalidValue.js"),_SquircleFill=require("../SquircleFill/SquircleFill.js"),_index2=require("../Text/index.js"),_jsxRuntime=require("react/jsx-runtime");const ActionButton=({action:e,variant:t})=>{const i=(0,_index.useTheme)(),{style:r,pressIn:s,pressOut:n}=(0,_usePressAnimation.usePressAnimation)({enabled:!0}),o=(0,_react.useMemo)(()=>buildActionStyles(i),[i]),a="primary"===t,l=(0,_SquircleFill.useSquircle)(!0,i.radius.md),fillFor=e=>a?e?i.colors["primary-hover"]:i.colors.primary:e?i.colors["surface-pressed"]:"transparent";return(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:r,children:(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:()=>{(0,_hapticUtils.triggerHaptic)("selection"),e.onPress()},onPressIn:s,onPressOut:n,accessibilityRole:"button",accessibilityLabel:e.accessibilityLabel??e.label,accessibilityHint:e.accessibilityHint,testID:e.testID,onLayout:l.onLayout,style:({pressed:e})=>[o.button,a?o.buttonPrimary:o.buttonSecondary,e&&!l.active?a?o.buttonPrimaryPressed:o.buttonSecondaryPressed:null,l.active?o.buttonSquircleHost:null],children:({pressed:t})=>(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[l.active&&l.size?(0,_jsxRuntime.jsx)(_SquircleFill.SquircleFill,{width:l.size.width,height:l.size.height,radius:i.radius.md,fill:fillFor(t),stroke:a?void 0:i.colors.border,strokeWidth:a?0:1}):null,(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[o.buttonText,a?o.buttonTextPrimary:o.buttonTextSecondary],numberOfLines:1,children:e.label})]})})})},EmptyState=exports.EmptyState=(0,_react.forwardRef)((e,t)=>{const i=(0,_index.useTheme)(),r=Object.keys(i.components["empty-state"]);(0,_warnInvalidValue.warnInvalidValue)("EmptyState","size",e.size,r),(0,_warnInvalidValue.warnInvalidValue)("EmptyState","variant",e.variant,["block","inline"]);const{icon:s,illustration:n,title:o,description:a,action:l,secondaryAction:c,size:u,variant:d,fill:m=!1,style:y,testID:x}=e,b=i.settings.components["empty-state"],p=u??b?.defaultSize??"md",_=d??b?.defaultVariant??"block",j=r.includes(p)?p:"md",g=(0,_react.useMemo)(()=>(0,_index.resolveEmptyStateSize)(i,j),[i,j]),h=(0,_react.useMemo)(()=>buildStyles(i),[i]);return"inline"===_?(0,_jsxRuntime.jsx)(_reactNative.View,{ref:t,accessibilityRole:"summary",testID:x,style:[h.inline,m?h.fill:null,y],children:(0,_jsxRuntime.jsx)(_index2.Text,{variant:"caption",weight:"medium",color:"secondary",align:"center",children:o})}):(0,_jsxRuntime.jsxs)(_reactNative.View,{ref:t,accessibilityRole:"summary",testID:x,style:[h.root,{paddingVertical:g["padding-y"]},m?h.fill:null,y],children:[null!=n?(0,_jsxRuntime.jsx)(_reactNative.View,{style:{marginBottom:g["title-gap"]},children:(0,_react.isValidElement)(n)?n:(0,_jsxRuntime.jsx)(_reactNative.Image,{source:n,style:{width:g["illustration-size"],height:g["illustration-size"]},resizeMode:"contain",accessibilityIgnoresInvertColors:!0})}):s?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[h.iconCircle,{width:g.icon,height:g.icon,marginBottom:g["title-gap"],borderRadius:i.radius.pill,..._corners.smoothCorners}],children:s}):null,(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[h.title,{fontSize:g["title-text"],...(0,_index.fontFor)(i,"semibold")}],children:o}),a?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[h.description,{fontSize:g["description-text"],marginTop:g["description-gap"]}],children:a}):null,l||c?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:h.actions,children:[l?(0,_jsxRuntime.jsx)(ActionButton,{action:l,variant:"primary"}):null,c?(0,_jsxRuntime.jsx)(ActionButton,{action:c,variant:"secondary"}):null]}):null]})});EmptyState.displayName="EmptyState";const buildStyles=e=>_reactNative.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=>_reactNative.StyleSheet.create({button:{paddingHorizontal:e.space.lg,paddingVertical:e.space.sm,minHeight:42,borderRadius:e.radius.md,..._corners.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,...(0,_index.fontFor)(e,"semibold")},buttonTextPrimary:{color:e.colors["on-primary"]},buttonTextSecondary:{color:e.colors["text-body"]}});var _default=exports.default=EmptyState;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Screen=Screen;var _react=require("react"),_reactNative=require("react-native"),_reactNativeKeyboardController=require("react-native-keyboard-controller"),_reactNativeReanimated=require("react-native-reanimated"),_reactNativeSafeAreaContext=require("react-native-safe-area-context"),_useRefreshControl=require("../../hooks/useRefreshControl.js"),_index=require("../../theme/index.js"),_index2=require("../AppBar/index.js"),_index3=require("../AsyncBlock/index.js"),_index4=require("../EmptyState/index.js"),_index5=require("../KeyboardAwareScrollView/index.js"),_index6=require("../KeyboardToolbar/index.js"),_index7=require("../PagedListFooter/index.js"),_ScrollHost=require("./ScrollHost.js"),_jsxRuntime=require("react/jsx-runtime");const DEFAULT_EDGES=["top","bottom"],SCROLL_EVENT_THROTTLE=16,noop=()=>{};function renderFooter(e){return(0,_react.isValidElement)(e)?e:e?(0,_react.createElement)(e):null}const buildStyles=e=>_reactNative.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:_reactNative.StyleSheet.hairlineWidth,borderTopColor:e.colors.border}});function Screen(e){const{title:t,subtitle:r,largeTitle:o=!0,onBack:n,rightActions:a,leading:i,children:l,onRefresh:s,refreshing:c=!1,footer:d,scroll:u=!0,list:_,edges:f=DEFAULT_EDGES,keyboardToolbar:x=!0,bottomInset:m=0,gutter:v,floatingAction:h,scrollRef:g,onScroll:p,contentContainerStyle:y,testID:R}=e,S=(0,_index.useTheme)(),b=v??void 0===_,j=S.space[S.components.screen.gutter],C=b?j:0,E=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)(),T=(0,_react.useMemo)(()=>buildStyles(S),[S]),[L]=(0,_react.useState)(()=>new _reactNative.Animated.Value(0)),[N,k]=(0,_react.useState)(0),[A,V]=(0,_react.useState)(0),q=void 0!==n,O=(0,_react.useRef)(n);O.current=n;const w=Boolean(t||r||n||i||a?.length),B=o&&void 0!==t,F=B&&(void 0!==_||u),H=F?N:0,M=void 0!==d,{refreshControl:D}=(0,_useRefreshControl.useRefreshControl)({onRefresh:s??noop,refreshing:c}),K=s?(0,_react.cloneElement)(D,{progressViewOffset:H}):void 0,P=(0,_reactNativeReanimated.useSharedValue)(0),z=(0,_reactNativeReanimated.useSharedValue)(0),I=(0,_reactNativeReanimated.useSharedValue)(0),W=(0,_reactNativeReanimated.useSharedValue)(0),G=(0,_react.useRef)(null),U=(0,_react.useRef)(0),Y=(0,_react.useRef)(0),J=(0,_react.useMemo)(()=>({top:P,bottom:z,offset:I,maxOffset:W,scrollTo:e=>{const t=G.current;t instanceof _reactNative.FlatList?t.scrollToOffset({offset:e,animated:!1}):t?.scrollTo({y:e,animated:!1})}}),[P,z,I,W]),Q=(0,_react.useCallback)(e=>{G.current=e,"function"==typeof g?g(e):g&&(g.current=e)},[g]),X=(0,_react.useCallback)(()=>{W.value=Math.max(0,U.current-Y.current)},[W]),Z=(0,_react.useRef)(p);Z.current=p;const $=(0,_react.useMemo)(()=>_reactNative.Animated.event([{nativeEvent:{contentOffset:{y:L}}}],{useNativeDriver:!1,listener:e=>{I.value=e.nativeEvent.contentOffset.y,Z.current?.(e)}}),[L,I]),ee=(0,_react.useCallback)(e=>{const{height:t}=e.nativeEvent.layout;k(e=>Math.max(e,t))},[]),te=(0,_react.useCallback)(e=>{V(e.nativeEvent.layout.height)},[]);(0,_react.useEffect)(()=>{if(!q)return;const e=_reactNative.BackHandler.addEventListener("hardwareBackPress",()=>(O.current?.(),!0));return()=>e.remove()},[q]);const re=f.includes("left")?E.left:0,oe=f.includes("right")?E.right:0,ne=f.includes("bottom")?E.bottom:0,ae=f.includes("top")&&!w?E.top:0,ie=S.space[S.components["floating-action-button"]["bottom-offset"]],le=h?(0,_index.resolveFloatingActionButtonSize)(S,h.props.size??"md").diameter+ie+S.space.lg:0,se=M?Math.max(0,A-E.bottom):m,ce=h?(0,_react.cloneElement)(h,{bottomOffset:(h.props.bottomOffset??ie)+se}):null,de=f.filter(e=>"top"!==e&&!("bottom"===e&&M)),ue=w?(0,_jsxRuntime.jsx)(_reactNative.View,{style:F?T.overlay:void 0,onLayout:F?ee:void 0,children:(0,_jsxRuntime.jsx)(_index2.AppBar,{title:t,subtitle:r,variant:B?"large":"default",scrollY:F?L:void 0,onBack:n,rightActions:a,leading:i})}):null,fe=(0,_react.useCallback)(()=>{const e=G.current?.getNativeScrollRef();e&&e.measureInWindow((e,t,r,o)=>{Y.current=o,P.value=t+H,z.value=t+o,X()})},[H,P,z,X]);(0,_react.useEffect)(()=>{fe()},[fe]);const xe=(0,_react.useCallback)((e,t)=>{U.current=t,X()},[X]);let me;if(void 0!==_){const{state:e,paging:t,...r}=_,handleEndReached=e=>{t?.hasMore&&!t.loadingMore&&null==t.errorMore&&t.loadMore(),r.onEndReached?.(e)},o=(0,_jsxRuntime.jsx)(_reactNative.FlatList,{keyboardShouldPersistTaps:"handled",onEndReachedThreshold:t?.5:void 0,...r,ref:Q,refreshControl:K,onScroll:$,onLayout:e=>{fe(),r.onLayout?.(e)},onContentSizeChange:(e,t)=>{xe(e,t),r.onContentSizeChange?.(e,t)},onEndReached:t?handleEndReached:r.onEndReached,ListEmptyComponent:e?.empty?(0,_jsxRuntime.jsx)(_index4.EmptyState,{...e.empty}):void 0,ListFooterComponent:t||r.ListFooterComponent?(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[renderFooter(r.ListFooterComponent),t?(0,_jsxRuntime.jsx)(_index7.PagedListFooter,{paging:t}):null]}):void 0,scrollEventThrottle:SCROLL_EVENT_THROTTLE,style:T.flex,contentContainerStyle:[{paddingTop:H,paddingLeft:re+C,paddingRight:oe+C},{paddingBottom:(M?0:ne)+m+le},r.contentContainerStyle,y]});me=(0,_jsxRuntime.jsx)(_ScrollHost.ScrollHostContext.Provider,{value:J,children:e?(0,_jsxRuntime.jsx)(_index3.AsyncBlock,{loading:e.loading,error:e.error,errorTitle:e.errorTitle,onRetry:e.onRetry,skeleton:e.skeleton,style:[T.flex,{paddingTop:H}],children:o}):o})}else me=u?(0,_jsxRuntime.jsx)(_ScrollHost.ScrollHostContext.Provider,{value:J,children:(0,_jsxRuntime.jsxs)(_index5.KeyboardAwareScrollView,{ref:Q,refreshControl:K,onScroll:$,scrollEventThrottle:SCROLL_EVENT_THROTTLE,onLayout:fe,onContentSizeChange:xe,safeAreaEdges:de,style:T.flex,contentContainerStyle:[{paddingTop:H,paddingHorizontal:C},y],children:[l,m+le>0?(0,_jsxRuntime.jsx)(_reactNative.View,{style:{height:m+le}}):null]})}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:[T.flex,{paddingLeft:re+C,paddingRight:oe+C,paddingBottom:(M?0:ne)+m+le},y],children:l});const ve=M?(0,_jsxRuntime.jsx)(_reactNativeKeyboardController.KeyboardStickyView,{onLayout:te,style:[T.footer,{paddingLeft:re+j,paddingRight:oe+j,paddingBottom:ne+m}],children:d}):null;return(0,_jsxRuntime.jsxs)(_reactNative.View,{testID:R,style:[T.root,{paddingTop:ae}],children:[F?null:ue,me,ve,ce,void 0!==_?l:null,F?ue:null,x?(0,_jsxRuntime.jsx)(_index6.KeyboardToolbar,{}):null]})}
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Screen=Screen;var _react=require("react"),_reactNative=require("react-native"),_reactNativeKeyboardController=require("react-native-keyboard-controller"),_reactNativeReanimated=require("react-native-reanimated"),_reactNativeSafeAreaContext=require("react-native-safe-area-context"),_useRefreshControl=require("../../hooks/useRefreshControl.js"),_index=require("../../theme/index.js"),_index2=require("../AppBar/index.js"),_index3=require("../AsyncBlock/index.js"),_index4=require("../EmptyState/index.js"),_index5=require("../KeyboardAwareScrollView/index.js"),_index6=require("../KeyboardToolbar/index.js"),_index7=require("../PagedListFooter/index.js"),_ScrollHost=require("./ScrollHost.js"),_jsxRuntime=require("react/jsx-runtime");const DEFAULT_EDGES=["top","bottom"],SCROLL_EVENT_THROTTLE=16,noop=()=>{};function renderFooter(e){return(0,_react.isValidElement)(e)?e:e?(0,_react.createElement)(e):null}const buildStyles=e=>_reactNative.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:_reactNative.StyleSheet.hairlineWidth,borderTopColor:e.colors.border}});function Screen(e){const{title:t,subtitle:r,largeTitle:o=!0,onBack:n,rightActions:a,leading:i,children:l,onRefresh:s,refreshing:c=!1,footer:d,scroll:u=!0,list:_,edges:f=DEFAULT_EDGES,keyboardToolbar:x=!0,bottomInset:m=0,gutter:v,floatingAction:h,scrollRef:g,onScroll:p,contentContainerStyle:y,testID:R}=e,S=(0,_index.useTheme)(),b=v??void 0===_,j=S.space[S.components.screen.gutter],C=b?j:0,E=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)(),T=(0,_react.useMemo)(()=>buildStyles(S),[S]),[L]=(0,_react.useState)(()=>new _reactNative.Animated.Value(0)),[N,k]=(0,_react.useState)(0),[A,V]=(0,_react.useState)(0),q=void 0!==n,O=(0,_react.useRef)(n);O.current=n;const w=Boolean(t||r||n||i||a?.length),B=o&&void 0!==t,F=B&&(void 0!==_||u),H=F?N:0,M=void 0!==d,{refreshControl:D}=(0,_useRefreshControl.useRefreshControl)({onRefresh:s??noop,refreshing:c}),K=s?(0,_react.cloneElement)(D,{progressViewOffset:H}):void 0,P=(0,_reactNativeReanimated.useSharedValue)(0),z=(0,_reactNativeReanimated.useSharedValue)(0),I=(0,_reactNativeReanimated.useSharedValue)(0),W=(0,_reactNativeReanimated.useSharedValue)(0),G=(0,_react.useRef)(null),U=(0,_react.useRef)(0),Y=(0,_react.useRef)(0),J=(0,_react.useMemo)(()=>({top:P,bottom:z,offset:I,maxOffset:W,scrollTo:e=>{const t=G.current;t instanceof _reactNative.FlatList?t.scrollToOffset({offset:e,animated:!1}):t?.scrollTo({y:e,animated:!1})}}),[P,z,I,W]),Q=(0,_react.useCallback)(e=>{G.current=e,"function"==typeof g?g(e):g&&(g.current=e)},[g]),X=(0,_react.useCallback)(()=>{W.value=Math.max(0,U.current-Y.current)},[W]),Z=(0,_react.useRef)(p);Z.current=p;const $=(0,_react.useMemo)(()=>_reactNative.Animated.event([{nativeEvent:{contentOffset:{y:L}}}],{useNativeDriver:!1,listener:e=>{I.value=e.nativeEvent.contentOffset.y,Z.current?.(e)}}),[L,I]),ee=(0,_react.useCallback)(e=>{const{height:t}=e.nativeEvent.layout;k(e=>Math.max(e,t))},[]),te=(0,_react.useCallback)(e=>{V(e.nativeEvent.layout.height)},[]);(0,_react.useEffect)(()=>{if(!q)return;const e=_reactNative.BackHandler.addEventListener("hardwareBackPress",()=>(O.current?.(),!0));return()=>e.remove()},[q]);const re=f.includes("left")?E.left:0,oe=f.includes("right")?E.right:0,ne=f.includes("bottom")?E.bottom:0,ae=f.includes("top")&&!w?E.top:0,ie=S.space[S.components["floating-action-button"]["bottom-offset"]],le=h?(0,_index.resolveFloatingActionButtonSize)(S,h.props.size??"md").diameter+ie+S.space.lg:0,se=M?Math.max(0,A-E.bottom):m,ce=h?(0,_react.cloneElement)(h,{bottomOffset:(h.props.bottomOffset??ie)+se}):null,de=f.filter(e=>"top"!==e&&!("bottom"===e&&M)),ue=w?(0,_jsxRuntime.jsx)(_reactNative.View,{style:F?T.overlay:void 0,onLayout:F?ee:void 0,children:(0,_jsxRuntime.jsx)(_index2.AppBar,{title:t,subtitle:r,variant:B?"large":"default",scrollY:F?L:void 0,onBack:n,rightActions:a,leading:i,gutter:j})}):null,fe=(0,_react.useCallback)(()=>{const e=G.current?.getNativeScrollRef();e&&e.measureInWindow((e,t,r,o)=>{Y.current=o,P.value=t+H,z.value=t+o,X()})},[H,P,z,X]);(0,_react.useEffect)(()=>{fe()},[fe]);const xe=(0,_react.useCallback)((e,t)=>{U.current=t,X()},[X]);let me;if(void 0!==_){const{state:e,paging:t,...r}=_,handleEndReached=e=>{t?.hasMore&&!t.loadingMore&&null==t.errorMore&&t.loadMore(),r.onEndReached?.(e)},o=(0,_jsxRuntime.jsx)(_reactNative.FlatList,{keyboardShouldPersistTaps:"handled",onEndReachedThreshold:t?.5:void 0,...r,ref:Q,refreshControl:K,onScroll:$,onLayout:e=>{fe(),r.onLayout?.(e)},onContentSizeChange:(e,t)=>{xe(e,t),r.onContentSizeChange?.(e,t)},onEndReached:t?handleEndReached:r.onEndReached,ListEmptyComponent:e?.empty?(0,_jsxRuntime.jsx)(_index4.EmptyState,{...e.empty}):void 0,ListFooterComponent:t||r.ListFooterComponent?(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[renderFooter(r.ListFooterComponent),t?(0,_jsxRuntime.jsx)(_index7.PagedListFooter,{paging:t}):null]}):void 0,scrollEventThrottle:SCROLL_EVENT_THROTTLE,style:T.flex,contentContainerStyle:[{paddingTop:H,paddingLeft:re+C,paddingRight:oe+C},{paddingBottom:(M?0:ne)+m+le},r.contentContainerStyle,y]});me=(0,_jsxRuntime.jsx)(_ScrollHost.ScrollHostContext.Provider,{value:J,children:e?(0,_jsxRuntime.jsx)(_index3.AsyncBlock,{loading:e.loading,error:e.error,errorTitle:e.errorTitle,onRetry:e.onRetry,skeleton:e.skeleton,style:[T.flex,{paddingTop:H}],children:o}):o})}else me=u?(0,_jsxRuntime.jsx)(_ScrollHost.ScrollHostContext.Provider,{value:J,children:(0,_jsxRuntime.jsxs)(_index5.KeyboardAwareScrollView,{ref:Q,refreshControl:K,onScroll:$,scrollEventThrottle:SCROLL_EVENT_THROTTLE,onLayout:fe,onContentSizeChange:xe,safeAreaEdges:de,style:T.flex,contentContainerStyle:[{paddingTop:H,paddingHorizontal:C},y],children:[l,m+le>0?(0,_jsxRuntime.jsx)(_reactNative.View,{style:{height:m+le}}):null]})}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:[T.flex,{paddingLeft:re+C,paddingRight:oe+C,paddingBottom:(M?0:ne)+m+le},y],children:l});const ve=M?(0,_jsxRuntime.jsx)(_reactNativeKeyboardController.KeyboardStickyView,{onLayout:te,style:[T.footer,{paddingLeft:re+j,paddingRight:oe+j,paddingBottom:ne+m}],children:d}):null;return(0,_jsxRuntime.jsxs)(_reactNative.View,{testID:R,style:[T.root,{paddingTop:ae}],children:[F?null:ue,me,ve,ce,void 0!==_?l:null,F?ue:null,x?(0,_jsxRuntime.jsx)(_index6.KeyboardToolbar,{}):null]})}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.SectionHeader=exports.DEFAULT_SECTION_HEADER_LABELS=void 0;var _react=require("react"),_reactNative=require("react-native"),_index=require("../../theme/index.js"),_warnInvalidValue=require("../../utils/warnInvalidValue.js"),_index2=require("../Button/index.js"),_index3=require("../FieldBase/index.js"),_Text=require("../Text/Text.js"),_jsxRuntime=require("react/jsx-runtime");const DEFAULT_SECTION_HEADER_LABELS=exports.DEFAULT_SECTION_HEADER_LABELS=Object.freeze({required:e=>`${e}, required`}),SectionHeader=e=>{const{children:t,variant:r
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.SectionHeader=exports.DEFAULT_SECTION_HEADER_LABELS=void 0;var _react=require("react"),_reactNative=require("react-native"),_index=require("../../theme/index.js"),_warnInvalidValue=require("../../utils/warnInvalidValue.js"),_index2=require("../Button/index.js"),_index3=require("../FieldBase/index.js"),_Text=require("../Text/Text.js"),_jsxRuntime=require("react/jsx-runtime");const DEFAULT_SECTION_HEADER_LABELS=exports.DEFAULT_SECTION_HEADER_LABELS=Object.freeze({required:e=>`${e}, required`}),SectionHeader=e=>{const{children:t,variant:r,flush:i,required:a=!1,action:s,labels:n,style:o,testID:l}=e;(0,_warnInvalidValue.warnInvalidValue)("SectionHeader","variant",e.variant,["title","caps","sub"]);const u=(0,_index.useTheme)(),c=u.settings.components["section-header"],d=r??c?.defaultVariant??"title",_=i??c?.defaultFlush??!1,x=(0,_react.useMemo)(()=>({...DEFAULT_SECTION_HEADER_LABELS,...n}),[n]),v=(0,_react.useMemo)(()=>({marginTop:_?0:u.space.lg,marginBottom:u.space.sm}),[u,_]),m=(0,_react.useMemo)(()=>({flexDirection:"row",alignItems:"center",justifyContent:"space-between",gap:u.space.sm}),[u]),E=(0,_react.useMemo)(()=>({flex:1}),[]),p="caps"===d?{variant:"overline",color:"tertiary",weight:void 0}:"sub"===d?{variant:"label",color:"primary",weight:"semibold"}:{variant:"title",color:void 0,weight:void 0},j=(0,_jsxRuntime.jsxs)(_Text.Text,{variant:p.variant,color:p.color,weight:p.weight,accessibilityRole:"header",accessibilityLabel:a&&"string"==typeof t?x.required(t):void 0,style:s?E:[v,o],testID:l,children:[t,a?(0,_jsxRuntime.jsx)(_index3.RequiredMark,{}):null]});return s?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[m,v,o],children:[j,(0,_jsxRuntime.jsx)(_index2.Button,{variant:"link",size:"sm",label:s.label,onPress:s.onPress,testID:s.testID})]}):j};exports.SectionHeader=SectionHeader;var _default=exports.default=SectionHeader;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.resolveColor=exports.default=exports.Text=void 0;var _react=require("react"),_reactNative=require("react-native"),_index=require("../../theme/index.js"),_tokensGenerated=require("../../theme/tokens.generated.js"),_warnInvalidValue=require("../../utils/warnInvalidValue.js"),_Notation=require("../Notation/Notation.js"),_jsxRuntime=require("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"],resolveColor=(e,
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.resolveColor=exports.default=exports.Text=void 0;var _react=require("react"),_reactNative=require("react-native"),_index=require("../../theme/index.js"),_tokensGenerated=require("../../theme/tokens.generated.js"),_warnInvalidValue=require("../../utils/warnInvalidValue.js"),_Notation=require("../Notation/Notation.js"),_jsxRuntime=require("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"],resolveColor=(e,t)=>Object.hasOwn(TEXT_ROLE_COLOR,t)?e.colors[TEXT_ROLE_COLOR[t]]:Object.hasOwn(SEMANTIC,t)?e.colors[`${t}-text`]:t;exports.resolveColor=resolveColor;const resolveVariantColor=(e,t)=>Object.hasOwn(TEXT_ROLE_COLOR,t)||Object.hasOwn(SEMANTIC,t)?resolveColor(e,t):e.colors[t],Text=exports.Text=(0,_react.forwardRef)((e,t)=>{const{variant:i="body",color:r,weight:o,size:n,align:a,italic:l,underline:s,style:d,children:c,...x}=e,y=(0,_index.useTheme)(),u=Object.hasOwn(VARIANTS,i),g=y.settings.textVariants,p=!u&&g&&Object.hasOwn(g,i)?g[i]:void 0;u||p||(0,_warnInvalidValue.warnInvalidValue)("Text","variant",e.variant,[...Object.keys(VARIANTS),...Object.keys(g??{})]),(0,_warnInvalidValue.warnInvalidValue)("Text","color",r,COLOR_NAMES),(0,_warnInvalidValue.warnInvalidValue)("Text","size",n,_tokensGenerated.TEXT_NAMES);const v=void 0!==r&&COLOR_NAMES.includes(r)?r:void 0,h=(0,_react.useMemo)(()=>{if(p){const e=n??p.size,t=y.text[e].size;return{fontSize:t,lineHeight:p.lineHeight??Math.round(t*y.leading[p.heading?"heading":"body"]),color:void 0!==v?resolveColor(y,v):p.color?resolveVariantColor(y,p.color):resolveColor(y,"primary"),textAlign:a,textTransform:p.uppercase?"uppercase":void 0,letterSpacing:p.letterSpacing?y["letter-spacing"][p.letterSpacing]:void 0,fontStyle:l||p.italic?"italic":void 0,fontVariant:p.fontVariant,textDecorationLine:s?"underline":void 0,...(0,_index.fontFor)(y,o??p.weight??"normal",p.fontFamily)}}const e=VARIANTS[u?i:"body"],t=y.text[n??e.size].size;return{fontSize:t,lineHeight:Math.round(t*y.leading[e.line]),color:resolveColor(y,v??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,...(0,_index.fontFor)(y,o??e.weight,e.fontFamily)}},[y,p,u,i,v,o,n,a,l,s]),m=(0,_Notation.useNotationInk)([h,d],y.text.base.size,y.colors["text-body"]),b=u?VARIANTS[i].heading:p?.heading,_="string"==typeof c||"number"==typeof c;return(0,_jsxRuntime.jsx)(_reactNative.Text,{ref:t,style:[h,d],maxFontSizeMultiplier:y.settings.maxFontSizeMultiplier,accessibilityRole:b?"header":x.accessibilityRole,...x,children:_?c:(0,_jsxRuntime.jsx)(_Notation.NotationInkContext.Provider,{value:m,children:c})})});Text.displayName="Text";var _default=exports.default=Text;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.mergeBrand=void 0;var _componentSizes=require("./componentSizes.js"),_tokensGenerated=require("./tokens.generated.js"),_toneInk=require("./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=e=>"object"==typeof e&&null!==e&&!Array.isArray(e),validateBrand=e=>{if(void 0===e)return;if(!isPlainObject(e))throw new Error(`A brand is an object of colors, radius and font; got ${typeof e}. ${HINT}`);for(const t of Object.keys(e))if(!BRAND_KEYS.includes(t))throw new Error(`A brand sets colors, radius and font only; ${t} is not allowed (allowed: colors, radius, font). ${HINT}`);const t=e.colors;if(void 0!==t&&!isPlainObject(t))throw new Error(`A brand's colors is an object of light and dark; got ${typeof t}. ${HINT}`);for(const e of Object.keys(t??{})){if(!COLOR_MODES.includes(e))throw new Error(`A brand sets colours under light and dark only; ${e} is not allowed (allowed: light, dark). ${HINT}`);const o=t[e];for(const e of Object.keys(o)){if(!_tokensGenerated.COLOR_NAMES.includes(e))throw new Error(`unknown colour ${e}; allowed: ${_tokensGenerated.COLOR_NAMES.join(", ")}. ${HINT}`);if(void 0!==o[e]&&"string"!=typeof o[e])throw new Error(`colour ${e} must be a string; got ${typeof o[e]}.`)}}const o=e.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 e of Object.keys(o??{})){const t=o[e];if(!_tokensGenerated.RADIUS_NAMES.includes(e))throw new Error(`unknown radius ${e}; allowed: ${RADIUS_ALLOWED}. ${HINT}`);if(FIXED_RADII.includes(e))throw new Error(`radius ${e} is fixed by the library; allowed: ${RADIUS_ALLOWED}.`);if("number"!=typeof t||!Number.isFinite(t))throw new Error(`radius ${e} must be a number; got ${typeof t}.`)}const n=e.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 e of Object.keys(n??{})){if(!_tokensGenerated.FONT_NAMES.includes(e))throw new Error(`unknown font ${e}; allowed: ${_tokensGenerated.FONT_NAMES.join(", ")}. ${HINT}`);const t=n[e];if(!isPlainObject(t))throw new Error(`font ${e} must be an object of weights; got ${typeof t}. ${HINT}`);for(const o of Object.keys(t)){if(!_tokensGenerated.WEIGHT_NAMES.includes(o))throw new Error(`unknown font weight ${o} in font ${e}; allowed: ${_tokensGenerated.WEIGHT_NAMES.join(", ")}. ${HINT}`);const n=t[o];if("string"!=typeof n||0===n.length)throw new Error(`font ${e} weight ${o} must be a non-empty string.`)}}},validateSettings=e=>{if(void 0===e)return;if(!isPlainObject(e))throw new Error(`Theme settings is an object; got ${typeof e}. ${HINT}`);for(const t of Object.keys(e))if(!SETTINGS_KEYS.includes(t))throw new Error(`Theme settings take ${SETTINGS_KEYS.join(", ")} only; ${t} is not allowed. ${HINT}`);const t=e.components;if(void 0===t)return;if(!isPlainObject(t))throw new Error(`Theme settings components is an object of component names; got ${typeof t}. ${HINT}`);const o=COMPONENT_SETTING_KEYS;for(const e of Object.keys(t)){if(!Object.keys(o).includes(e))throw new Error(`unknown component ${e} in theme settings; allowed: ${Object.keys(COMPONENT_SETTING_KEYS).join(", ")}. ${HINT}`);const n=t[e];if(void 0===n)continue;if(!isPlainObject(n))throw new Error(`theme settings for ${e} is an object; got ${typeof n}. ${HINT}`);const r=o[e];for(const t of Object.keys(n))if(!(t in r))throw new Error(`unknown setting ${t} for ${e}; allowed: ${Object.keys(r).join(", ")}. ${HINT}`)}},TONES=["primary","success","warning","danger","info"],mergeBrand=(e,t,o)=>{validateBrand(t),validateSettings(o);const n=Object.fromEntries(Object.entries(t?.colors?.[e.mode]??{}).filter(([,e])=>void 0!==e)),r={...e.colors,...n},s={...e.radius,...t?.radius},i={...e.font};for(const o of Object.keys(t?.font??{}))i[o]={...e.font[o],...t?.font?.[o]};const a=[r.bg,r["bg-subtle"],r["bg-muted"]],
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.mergeBrand=void 0;var _componentSizes=require("./componentSizes.js"),_tokensGenerated=require("./tokens.generated.js"),_toneInk=require("./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=e=>"object"==typeof e&&null!==e&&!Array.isArray(e),validateBrand=e=>{if(void 0===e)return;if(!isPlainObject(e))throw new Error(`A brand is an object of colors, radius and font; got ${typeof e}. ${HINT}`);for(const t of Object.keys(e))if(!BRAND_KEYS.includes(t))throw new Error(`A brand sets colors, radius and font only; ${t} is not allowed (allowed: colors, radius, font). ${HINT}`);const t=e.colors;if(void 0!==t&&!isPlainObject(t))throw new Error(`A brand's colors is an object of light and dark; got ${typeof t}. ${HINT}`);for(const e of Object.keys(t??{})){if(!COLOR_MODES.includes(e))throw new Error(`A brand sets colours under light and dark only; ${e} is not allowed (allowed: light, dark). ${HINT}`);const o=t[e];for(const e of Object.keys(o)){if(!_tokensGenerated.COLOR_NAMES.includes(e))throw new Error(`unknown colour ${e}; allowed: ${_tokensGenerated.COLOR_NAMES.join(", ")}. ${HINT}`);if(void 0!==o[e]&&"string"!=typeof o[e])throw new Error(`colour ${e} must be a string; got ${typeof o[e]}.`)}}const o=e.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 e of Object.keys(o??{})){const t=o[e];if(!_tokensGenerated.RADIUS_NAMES.includes(e))throw new Error(`unknown radius ${e}; allowed: ${RADIUS_ALLOWED}. ${HINT}`);if(FIXED_RADII.includes(e))throw new Error(`radius ${e} is fixed by the library; allowed: ${RADIUS_ALLOWED}.`);if("number"!=typeof t||!Number.isFinite(t))throw new Error(`radius ${e} must be a number; got ${typeof t}.`)}const n=e.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 e of Object.keys(n??{})){if(!_tokensGenerated.FONT_NAMES.includes(e))throw new Error(`unknown font ${e}; allowed: ${_tokensGenerated.FONT_NAMES.join(", ")}. ${HINT}`);const t=n[e];if(!isPlainObject(t))throw new Error(`font ${e} must be an object of weights; got ${typeof t}. ${HINT}`);for(const o of Object.keys(t)){if(!_tokensGenerated.WEIGHT_NAMES.includes(o))throw new Error(`unknown font weight ${o} in font ${e}; allowed: ${_tokensGenerated.WEIGHT_NAMES.join(", ")}. ${HINT}`);const n=t[o];if("string"!=typeof n||0===n.length)throw new Error(`font ${e} weight ${o} must be a non-empty string.`)}}},validateSettings=e=>{if(void 0===e)return;if(!isPlainObject(e))throw new Error(`Theme settings is an object; got ${typeof e}. ${HINT}`);for(const t of Object.keys(e))if(!SETTINGS_KEYS.includes(t))throw new Error(`Theme settings take ${SETTINGS_KEYS.join(", ")} only; ${t} is not allowed. ${HINT}`);const t=e.components;if(void 0===t)return;if(!isPlainObject(t))throw new Error(`Theme settings components is an object of component names; got ${typeof t}. ${HINT}`);const o=COMPONENT_SETTING_KEYS;for(const e of Object.keys(t)){if(!Object.keys(o).includes(e))throw new Error(`unknown component ${e} in theme settings; allowed: ${Object.keys(COMPONENT_SETTING_KEYS).join(", ")}. ${HINT}`);const n=t[e];if(void 0===n)continue;if(!isPlainObject(n))throw new Error(`theme settings for ${e} is an object; got ${typeof n}. ${HINT}`);const r=o[e];for(const t of Object.keys(n))if(!(t in r))throw new Error(`unknown setting ${t} for ${e}; allowed: ${Object.keys(r).join(", ")}. ${HINT}`)}},TONES=["primary","success","warning","danger","info"],mergeBrand=(e,t,o)=>{validateBrand(t),validateSettings(o);const n=Object.fromEntries(Object.entries(t?.colors?.[e.mode]??{}).filter(([,e])=>void 0!==e)),r={...e.colors,...n},s={...e.radius,...t?.radius},i={...e.font};for(const o of Object.keys(t?.font??{}))i[o]={...e.font[o],...t?.font?.[o]};const a=[r.bg,r["bg-subtle"],r["bg-muted"]],d={};for(const t of TONES){const o="string"==typeof n[t];let s=r[t];if(o||"string"==typeof n[`on-${t}`]){const e=(0,_toneInk.deriveSolidFill)(s,r[`on-${t}`]);e!==s&&(d[t]=e,s=e)}if(o&&"string"!=typeof n[`${t}-text`]&&(d[`${t}-text`]=(0,_toneInk.deriveToneInk)(s,a,e.mode)),"primary"===t&&(o||void 0!==d.primary)){const t=(0,_toneInk.deriveStateFills)(s,r["on-primary"],{fill:e.colors.primary,hover:e.colors["primary-hover"],pressed:e.colors["primary-pressed"]});"string"!=typeof n["primary-hover"]&&(d["primary-hover"]=t.hover),"string"!=typeof n["primary-pressed"]&&(d["primary-pressed"]=t.pressed)}}const l={},f=new Set([...Object.keys(e.settings.components),...Object.keys(o?.components??{})]);for(const t of f)l[t]={...e.settings.components[t],...o?.components?.[t]};const c=o?.maxFontSizeMultiplier??e.settings.maxFontSizeMultiplier,u={icons:{...e.settings.icons,...o?.icons},gradients:{...e.settings.gradients,...o?.gradients},textVariants:{...e.settings.textVariants,...o?.textVariants},components:l,...void 0===c?{}:{maxFontSizeMultiplier:c}},p={...e,colors:{...r,...d},radius:s,font:i,settings:u};return(0,_componentSizes.validateComponentTokens)(p),p};exports.mergeBrand=mergeBrand;
|
|
@@ -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{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})}):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
|
+
"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,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;
|
|
@@ -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.js";
|
|
4
|
+
import type { CardPadding, CardRadius, CardTitleFont, CardVariant } from "../components/Card/Card.js";
|
|
5
|
+
import type { EmptyStateSize, EmptyStateVariant } from "../components/EmptyState/EmptyState.js";
|
|
6
|
+
import type { SectionHeaderVariant } from "../components/SectionHeader/SectionHeader.js";
|
|
7
|
+
import type { TextColor } from "../components/Text/Text.js";
|
|
4
8
|
import type { PressAnimationPreset } from "../hooks/usePressAnimation.js";
|
|
5
9
|
import type { FieldVariant } from "../types/vocabulary.js";
|
|
6
10
|
import type { ColorName, FontFaces, FontName, LetterSpacingName, RadiusName, TextName, TokenSet, WeightName } from "./tokens.generated.js";
|
|
@@ -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;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webority/mobile-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.115.0",
|
|
4
4
|
"description": "Beautiful, animated, accessible React Native components, theme and form engine for Webority projects.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native",
|
|
@@ -85,7 +85,7 @@
|
|
|
85
85
|
}
|
|
86
86
|
},
|
|
87
87
|
"dependencies": {
|
|
88
|
-
"@webority/markdown-core": "0.
|
|
88
|
+
"@webority/markdown-core": "0.115.0"
|
|
89
89
|
},
|
|
90
90
|
"peerDependencies": {
|
|
91
91
|
"@react-navigation/bottom-tabs": ">=7.0.0",
|
|
@@ -103,8 +103,8 @@
|
|
|
103
103
|
"react-native-safe-area-context": ">=5.4.0",
|
|
104
104
|
"react-native-svg": ">=15.0.0",
|
|
105
105
|
"react-native-worklets": ">=0.10.0",
|
|
106
|
-
"@webority/canvas-kit": "0.
|
|
107
|
-
"@webority/mobile-core": "0.
|
|
106
|
+
"@webority/canvas-kit": "0.115.0",
|
|
107
|
+
"@webority/mobile-core": "0.115.0"
|
|
108
108
|
},
|
|
109
109
|
"peerDependenciesMeta": {
|
|
110
110
|
"@react-navigation/bottom-tabs": {
|
|
@@ -155,10 +155,10 @@
|
|
|
155
155
|
"@types/node": "25.6.0",
|
|
156
156
|
"@types/react": "19.2.18",
|
|
157
157
|
"@types/react-test-renderer": "19.1.0",
|
|
158
|
-
"expo": "57.0.
|
|
159
|
-
"expo-file-system": "57.0.
|
|
160
|
-
"expo-haptics": "57.0.
|
|
161
|
-
"expo-image": "57.0.
|
|
158
|
+
"expo": "57.0.31",
|
|
159
|
+
"expo-file-system": "57.0.7",
|
|
160
|
+
"expo-haptics": "57.0.3",
|
|
161
|
+
"expo-image": "57.0.5",
|
|
162
162
|
"jest": "29.7.0",
|
|
163
163
|
"react": "19.2.8",
|
|
164
164
|
"react-hook-form": "7.89.0",
|
|
@@ -173,10 +173,10 @@
|
|
|
173
173
|
"react-test-renderer": "19.2.8",
|
|
174
174
|
"rimraf": "6.1.3",
|
|
175
175
|
"typescript": "5.9.3",
|
|
176
|
-
"@webority/canvas-kit": "0.
|
|
177
|
-
"@webority/mobile-core": "0.
|
|
176
|
+
"@webority/canvas-kit": "0.115.0",
|
|
177
|
+
"@webority/mobile-core": "0.115.0",
|
|
178
178
|
"@webority/mobile-dev": "0.0.0",
|
|
179
|
-
"@webority/tokens": "0.
|
|
179
|
+
"@webority/tokens": "0.115.0"
|
|
180
180
|
},
|
|
181
181
|
"scripts": {
|
|
182
182
|
"build": "bob build && node ../mobile-dev/scripts/minify-lib.mjs && node -e \"require('node:fs').rmSync('dist/canvas-kit',{recursive:true,force:true})\" && node ../canvas-kit/dist/cli.js build --config canvas-kit.json --out dist/canvas-kit",
|