@webority/mobile-ui 0.120.0 → 0.121.0

package/dist/canvas-kit/kit.js

@@ -15921,7 +15921,7 @@ var Sg = (e) => R.create({
 		}),
 		onPress: u,
 		accessibilityLabel: k.back
-	} : void 0), I = l ? void 0 : s?.[s.length - 1], L = (e) => e === void 0 ? 0 : e.label === void 0 ? 10 : A.space.sm, z = d === void 0 ? null : {
+	} : void 0), I = l ? void 0 : s?.[s.length - 1], L = (e) => e === void 0 ? 0 : e.label === void 0 ? Math.max((44 - (e.glyphSize ?? 24)) / 2, 0) : A.space.sm, z = d === void 0 ? null : {
 		paddingLeft: Math.max(d - L(F), 0),
 		paddingRight: Math.max(d - L(I), 0)
 	}, B = p !== void 0, V = !!F || !!c, U = g ?? !v, ee = R.hairlineWidth, W = m(() => {
@@ -36501,7 +36501,7 @@ var PO = Pt({
 		kind: "WeborityPhone",
 		library: {
 			name: "@webority/mobile-ui",
-			version: "0.120.0"
+			version: "0.121.0"
 		},
 		rendererProtocolVersion: 13,
 		platform: "Phone",
@@ -36967,6 +36967,12 @@ var PO = Pt({
 								required: !1,
 								description: "Draws a small unread dot on the button."
 							},
+							{
+								name: "glyphSize",
+								type: "number",
+								required: !1,
+								description: "The drawn width in points of a glyph larger than the 24 point icon, so the gutter lands on its edge."
+							},
 							{
 								name: "icon",
 								type: "icon",
@@ -37005,6 +37011,12 @@ var PO = Pt({
 								required: !1,
 								description: "Draws a small unread dot on the button."
 							},
+							{
+								name: "glyphSize",
+								type: "number",
+								required: !1,
+								description: "The drawn width in points of a glyph larger than the 24 point icon, so the gutter lands on its edge."
+							},
 							{
 								name: "icon",
 								type: "icon",

package/dist/canvas-kit/manifest.json

@@ -2,7 +2,7 @@
   "kind": "WeborityPhone",
   "library": {
     "name": "@webority/mobile-ui",
-    "version": "0.120.0"
+    "version": "0.121.0"
   },
   "rendererProtocolVersion": 13,
   "platform": "Phone",
@@ -582,6 +582,12 @@
               "required": false,
               "description": "Draws a small unread dot on the button."
             },
+            {
+              "name": "glyphSize",
+              "type": "number",
+              "required": false,
+              "description": "The drawn width in points of a glyph larger than the 24 point icon, so the gutter lands on its edge."
+            },
             {
               "name": "icon",
               "type": "icon",
@@ -620,6 +626,12 @@
               "required": false,
               "description": "Draws a small unread dot on the button."
             },
+            {
+              "name": "glyphSize",
+              "type": "number",
+              "required": false,
+              "description": "The drawn width in points of a glyph larger than the 24 point icon, so the gutter lands on its edge."
+            },
             {
               "name": "icon",
               "type": "icon",

package/dist/canvas-kit/release.json

@@ -1,21 +1,21 @@
 {
   "name": "webority-phone",
-  "version": "0.120.0",
+  "version": "0.121.0",
   "platform": "Phone",
   "kitModuleVersion": 2,
   "rendererProtocolVersion": 13,
   "library": {
     "name": "@webority/mobile-ui",
-    "version": "0.120.0"
+    "version": "0.121.0"
   },
   "files": {
     "manifest.json": {
-      "sha256": "2b4e3898d7e545a8effec341be3513a28c18a11115d532f0e40c8279cd133ec4",
-      "bytes": 636991
+      "sha256": "3cd22c7c5be7f4be794877b692f8cd4eed436aa620f5f6d5618e1ce5d3a8c895",
+      "bytes": 637513
     },
     "kit.js": {
-      "sha256": "9427bc07368cd333aecbcb1eabce42e6056b2ddf765c89eda5f16c34ce48c561",
-      "bytes": 5959880
+      "sha256": "0125bbd3dc7b0edf94bc768d8475da8e66b0fd5d2147a041c737455d5364ffc5",
+      "bytes": 5960353
     },
     "kit.css": {
       "sha256": "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855",

package/lib/commonjs/components/AppBar/AppBar.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.DEFAULT_APP_BAR_LABELS=exports.AppBar=void 0;var _react=require("react"),_reactNative=require("react-native"),_reactNativeSafeAreaContext=require("react-native-safe-area-context"),_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"),_AppIcon=require("../AppIcon/AppIcon.js"),_index2=require("../Menu/index.js"),_Text=require("../Text/Text.js"),_jsxRuntime=require("react/jsx-runtime");const ACTION_BUTTON_SIZE=44,DOT_OFFSET=10,DOT_SIZE=8,BADGE_OFFSET=4,DEFAULT_APP_BAR_LABELS=exports.DEFAULT_APP_BAR_LABELS=Object.freeze({back:"Back"}),variantSize=(e,t)=>{switch(t){case"compact":return{height:44,titleSize:e.text.lg.size,titleWeight:"semibold",alignBottom:!1,subtitleLines:1};case"large":return{height:96,titleSize:e.text["2xl"].size,titleWeight:"bold",alignBottom:!0,subtitleLines:2};default:return{height:56,titleSize:e.text.lg.size,titleWeight:"semibold",alignBottom:!1,subtitleLines:1}}},ActionButton=(0,_react.forwardRef)(({action:e,side:t,badgeStyle:i,haptic:n,flush:a,onPress:r},l)=>{const s=(0,_index.useTheme)(),{style:o,pressIn:c,pressOut:d}=(0,_usePressAnimation.usePressAnimation)({enabled:!0}),u=(0,_react.useMemo)(()=>buildActionStyles(s),[s]),p=e.badge,m=void 0!==p&&0!==p,x=void 0!==e.label;return(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:o,children:(0,_jsxRuntime.jsxs)(_reactNative.Pressable,{ref:l,onPress:t=>{const i=(0,_hapticUtils.resolveHaptic)(n,"selection");i&&(0,_hapticUtils.triggerHaptic)(i),"onPress"in e&&e.onPress(),r?.(t)},onPressIn:c,onPressOut:d,accessibilityRole:"button",accessibilityLabel:e.accessibilityLabel??e.label,testID:e.testID,android_ripple:{color:s.colors["surface-pressed"],borderless:!x},style:({pressed:e})=>[x?u.textButton:u.actionButton,a?null:"left"===t?u.actionLeft:u.actionRight,e&&!x?u.actionPressed:null,e&&x?u.textPressed:null],children:[x?(0,_jsxRuntime.jsx)(_Text.Text,{variant:"body",weight:"semibold",color:"link",numberOfLines:1,children:e.label}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:u.iconWrap,children:e.icon}),m?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[u.badge,i],pointerEvents:"none",children:(0,_jsxRuntime.jsx)(_Text.Text,{variant:"caption",weight:"semibold",numberOfLines:1,style:u.badgeText,children:String(p)})}):null,e.dot?(0,_jsxRuntime.jsx)(_reactNative.View,{testID:e.testID?`${e.testID}-dot`:"appbar-action-dot",style:u.dot,pointerEvents:"none"}):null]})})}),COLLAPSE_RANGE=60,LARGE_TITLE_SCALE_END=.71,AppBar=exports.AppBar=(0,_react.forwardRef)((e,t)=>{const{title:i,subtitle:n,titleAlignment:a="left",leftAction:r,rightActions:l,leading:s,trailing:o,onBack:c,gutter:d,titleVariant:u,titleOffset:p,height:m,divider:x,variant:g="default",transparent:h=!1,scrollY:_,style:b,containerStyle:f,titleStyle:j,subtitleStyle:A,badgeStyle:v,haptic:y,labels:R,testID:S}=e;(0,_warnInvalidValue.warnInvalidValue)("AppBar","variant",e.variant,["default","large","compact"]),(0,_warnInvalidValue.warnInvalidValue)("AppBar","titleAlignment",e.titleAlignment,["left","center"]);const B=(0,_react.useMemo)(()=>({...DEFAULT_APP_BAR_LABELS,...R}),[R]),w=(0,_index.useTheme)(),I=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)(),L=(0,_react.useMemo)(()=>variantSize(w,g),[w,g]),N=(0,_react.useMemo)(()=>buildStyles(w),[w]),T="large"===g&&void 0!==_,C=r??(c?{icon:(0,_jsxRuntime.jsx)(_AppIcon.AppIcon,{name:"arrow-left",size:24,color:w.colors["text-body"]}),onPress:c,accessibilityLabel:B.back}:void 0),P=o?void 0:l?.[l.length-1],opticalInset=e=>void 0===e?0:void 0!==e.label?w.space.sm:Math.max(10,0),V=void 0===d?null:{paddingLeft:Math.max(d-opticalInset(C),0),paddingRight:Math.max(d-opticalInset(P),0)},E=void 0!==p,O=Boolean(C)||Boolean(s),z=x??!h,D=_reactNative.StyleSheet.hairlineWidth,W=(0,_react.useMemo)(()=>{if(!_)return null;const e={inputRange:[0,60],extrapolate:"clamp"};return{titleScale:_.interpolate({...e,outputRange:[1,.71]}),titleTranslateY:_.interpolate({...e,outputRange:[0,-20]}),titleTranslateX:_.interpolate({...e,outputRange:"center"===a?[0,0]:[0,8]}),subtitleOpacity:_.interpolate({inputRange:[0,30],outputRange:[1,0],extrapolate:"clamp"}),barHeight:_.interpolate({...e,outputRange:[96,56]}),borderOpacity:_.interpolate({...e,outputRange:[0,1]})}},[_,a]),q=T&&W?{transform:[{translateX:W.titleTranslateX},{translateY:W.titleTranslateY},{scale:W.titleScale}]}:null,k=i?u?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:q,children:(0,_jsxRuntime.jsx)(_Text.Text,{variant:u,align:"center"===a?"center":"left",accessibilityRole:"header",numberOfLines:1,style:[N.titleVariant,j],children:i})}):(0,_jsxRuntime.jsx)(_reactNative.Animated.Text,{accessibilityRole:"header",style:[N.title,{fontSize:L.titleSize,fontWeight:w.weight[L.titleWeight],textAlign:"center"===a?"center":"left"},q,j],numberOfLines:1,children:i}):null,M=n?(0,_jsxRuntime.jsx)(_reactNative.Animated.Text,{style:[N.subtitle,{textAlign:"center"===a?"center":"left"},T&&W?{opacity:W.subtitleOpacity}:null,A],numberOfLines:L.subtitleLines,children:n}):null,F=(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[N.titleColumn,"center"===a?N.titleColumnCenter:null,L.alignBottom?N.titleColumnBottom:null],children:[k,M]}),H=T?_reactNative.Animated.View:_reactNative.View,U=T&&W?{height:_reactNative.Animated.add(W.barHeight,new _reactNative.Animated.Value(I.top))}:{height:(m??L.height)+I.top};return(0,_jsxRuntime.jsxs)(H,{ref:t,testID:S,style:[N.root,{paddingTop:I.top,backgroundColor:h?"transparent":w.colors.surface},U,!T&&z?{borderBottomWidth:D,borderBottomColor:w.colors.border}:null,b,f],children:[T&&W&&z?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{pointerEvents:"none",style:[N.animatedBorder,{backgroundColor:w.colors.border,opacity:W.borderOpacity}]}):null,(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[N.row,L.alignBottom?N.rowAlignBottom:null,V,{flex:1}],children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[N.sideSlot,E?N.sideSlotCompact:null],children:[C?(0,_jsxRuntime.jsx)(ActionButton,{action:C,side:"left",haptic:y,flush:E}):null,null!=s&&!1!==s?(0,_jsxRuntime.jsx)(_reactNative.View,{style:N.slotNode,children:s}):null]}),(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",style:[N.center,"center"===a?N.centerAligned:N.centerLeft,E?{paddingLeft:O?p:w.space.none,paddingRight:w.space.none}:null],children:F}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[N.sideSlot,N.sideSlotRight,E?N.sideSlotCompact:null],children:[l?.map((e,t)=>(0,_jsxRuntime.jsx)(_react.Fragment,{children:"menu"in e?(0,_jsxRuntime.jsx)(_index2.Menu,{items:e.menu,title:e.menuTitle,haptic:y,trigger:(0,_jsxRuntime.jsx)(ActionButton,{action:e,side:"right",badgeStyle:v,haptic:y,flush:E})}):(0,_jsxRuntime.jsx)(ActionButton,{action:e,side:"right",badgeStyle:v,haptic:y,flush:E})},`appbar-right-${t}`)),null!=o&&!1!==o?(0,_jsxRuntime.jsx)(_reactNative.View,{style:N.slotNode,children:o}):null]})]})]})});AppBar.displayName="AppBar";const buildStyles=e=>_reactNative.StyleSheet.create({root:{width:"100%"},row:{flexDirection:"row",alignItems:"center",paddingHorizontal:e.space.xs},rowAlignBottom:{alignItems:"flex-end",paddingBottom:e.space.sm},sideSlot:{flexDirection:"row",alignItems:"center",minWidth:48},sideSlotRight:{justifyContent:"flex-end"},sideSlotCompact:{minWidth:0},slotNode:{flexDirection:"row",alignItems:"center"},center:{flex:1,minWidth:0,paddingHorizontal:e.space.xs},centerAligned:{alignItems:"center"},centerLeft:{alignItems:"flex-start"},titleColumn:{flexDirection:"column",maxWidth:"100%"},titleColumnCenter:{alignItems:"center"},titleColumnBottom:{justifyContent:"flex-end"},title:{color:e.colors["text-body"]},titleVariant:{includeFontPadding:!1,textAlignVertical:"center"},subtitle:{marginTop:e.space.xxs,color:e.colors["text-subtle"],fontSize:e.text.sm.size,fontWeight:e.weight.normal},animatedBorder:{position:"absolute",left:0,right:0,bottom:0,height:_reactNative.StyleSheet.hairlineWidth}}),buildActionStyles=e=>_reactNative.StyleSheet.create({actionButton:{width:44,height:44,borderRadius:e.radius.pill,..._corners.smoothCorners,alignItems:"center",justifyContent:"center"},actionLeft:{marginRight:e.space.xs},actionRight:{marginLeft:e.space.xs},actionPressed:{backgroundColor:e.colors["surface-pressed"]},textButton:{minWidth:44,minHeight:44,paddingHorizontal:e.space.sm,alignItems:"center",justifyContent:"center"},textPressed:{opacity:.6},dot:{position:"absolute",top:10,right:10,width:8,height:8,borderRadius:e.radius.pill,backgroundColor:e.colors.danger},iconWrap:{alignItems:"center",justifyContent:"center"},badge:{position:"absolute",top:4,right:4,minWidth:16,height:16,paddingHorizontal:e.space.xs,borderRadius:e.radius.pill,..._corners.smoothCorners,backgroundColor:e.colors.danger,alignItems:"center",justifyContent:"center"},badgeText:{color:e.colors["on-danger"],fontSize:e.text.xs.size,fontWeight:e.weight.semibold,lineHeight:13}});var _default=exports.default=AppBar;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.DEFAULT_APP_BAR_LABELS=exports.AppBar=void 0;var _react=require("react"),_reactNative=require("react-native"),_reactNativeSafeAreaContext=require("react-native-safe-area-context"),_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"),_AppIcon=require("../AppIcon/AppIcon.js"),_index2=require("../Menu/index.js"),_Text=require("../Text/Text.js"),_jsxRuntime=require("react/jsx-runtime");const ACTION_BUTTON_SIZE=44,DOT_OFFSET=10,DOT_SIZE=8,BADGE_OFFSET=4,DEFAULT_APP_BAR_LABELS=exports.DEFAULT_APP_BAR_LABELS=Object.freeze({back:"Back"}),variantSize=(e,t)=>{switch(t){case"compact":return{height:44,titleSize:e.text.lg.size,titleWeight:"semibold",alignBottom:!1,subtitleLines:1};case"large":return{height:96,titleSize:e.text["2xl"].size,titleWeight:"bold",alignBottom:!0,subtitleLines:2};default:return{height:56,titleSize:e.text.lg.size,titleWeight:"semibold",alignBottom:!1,subtitleLines:1}}},ActionButton=(0,_react.forwardRef)(({action:e,side:t,badgeStyle:i,haptic:n,flush:a,onPress:r},l)=>{const s=(0,_index.useTheme)(),{style:o,pressIn:c,pressOut:d}=(0,_usePressAnimation.usePressAnimation)({enabled:!0}),u=(0,_react.useMemo)(()=>buildActionStyles(s),[s]),p=e.badge,m=void 0!==p&&0!==p,x=void 0!==e.label;return(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:o,children:(0,_jsxRuntime.jsxs)(_reactNative.Pressable,{ref:l,onPress:t=>{const i=(0,_hapticUtils.resolveHaptic)(n,"selection");i&&(0,_hapticUtils.triggerHaptic)(i),"onPress"in e&&e.onPress(),r?.(t)},onPressIn:c,onPressOut:d,accessibilityRole:"button",accessibilityLabel:e.accessibilityLabel??e.label,testID:e.testID,android_ripple:{color:s.colors["surface-pressed"],borderless:!x},style:({pressed:e})=>[x?u.textButton:u.actionButton,a?null:"left"===t?u.actionLeft:u.actionRight,e&&!x?u.actionPressed:null,e&&x?u.textPressed:null],children:[x?(0,_jsxRuntime.jsx)(_Text.Text,{variant:"body",weight:"semibold",color:"link",numberOfLines:1,children:e.label}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:u.iconWrap,children:e.icon}),m?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[u.badge,i],pointerEvents:"none",children:(0,_jsxRuntime.jsx)(_Text.Text,{variant:"caption",weight:"semibold",numberOfLines:1,style:u.badgeText,children:String(p)})}):null,e.dot?(0,_jsxRuntime.jsx)(_reactNative.View,{testID:e.testID?`${e.testID}-dot`:"appbar-action-dot",style:u.dot,pointerEvents:"none"}):null]})})}),COLLAPSE_RANGE=60,LARGE_TITLE_SCALE_END=.71,AppBar=exports.AppBar=(0,_react.forwardRef)((e,t)=>{const{title:i,subtitle:n,titleAlignment:a="left",leftAction:r,rightActions:l,leading:s,trailing:o,onBack:c,gutter:d,titleVariant:u,titleOffset:p,height:m,divider:x,variant:g="default",transparent:h=!1,scrollY:_,style:b,containerStyle:f,titleStyle:j,subtitleStyle:A,badgeStyle:v,haptic:y,labels:R,testID:S}=e;(0,_warnInvalidValue.warnInvalidValue)("AppBar","variant",e.variant,["default","large","compact"]),(0,_warnInvalidValue.warnInvalidValue)("AppBar","titleAlignment",e.titleAlignment,["left","center"]);const B=(0,_react.useMemo)(()=>({...DEFAULT_APP_BAR_LABELS,...R}),[R]),w=(0,_index.useTheme)(),I=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)(),L=(0,_react.useMemo)(()=>variantSize(w,g),[w,g]),N=(0,_react.useMemo)(()=>buildStyles(w),[w]),T="large"===g&&void 0!==_,C=r??(c?{icon:(0,_jsxRuntime.jsx)(_AppIcon.AppIcon,{name:"arrow-left",size:24,color:w.colors["text-body"]}),onPress:c,accessibilityLabel:B.back}:void 0),P=o?void 0:l?.[l.length-1],opticalInset=e=>void 0===e?0:void 0!==e.label?w.space.sm:Math.max((44-(e.glyphSize??24))/2,0),V=void 0===d?null:{paddingLeft:Math.max(d-opticalInset(C),0),paddingRight:Math.max(d-opticalInset(P),0)},E=void 0!==p,z=Boolean(C)||Boolean(s),O=x??!h,D=_reactNative.StyleSheet.hairlineWidth,W=(0,_react.useMemo)(()=>{if(!_)return null;const e={inputRange:[0,60],extrapolate:"clamp"};return{titleScale:_.interpolate({...e,outputRange:[1,.71]}),titleTranslateY:_.interpolate({...e,outputRange:[0,-20]}),titleTranslateX:_.interpolate({...e,outputRange:"center"===a?[0,0]:[0,8]}),subtitleOpacity:_.interpolate({inputRange:[0,30],outputRange:[1,0],extrapolate:"clamp"}),barHeight:_.interpolate({...e,outputRange:[96,56]}),borderOpacity:_.interpolate({...e,outputRange:[0,1]})}},[_,a]),q=T&&W?{transform:[{translateX:W.titleTranslateX},{translateY:W.titleTranslateY},{scale:W.titleScale}]}:null,k=i?u?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:q,children:(0,_jsxRuntime.jsx)(_Text.Text,{variant:u,align:"center"===a?"center":"left",accessibilityRole:"header",numberOfLines:1,style:[N.titleVariant,j],children:i})}):(0,_jsxRuntime.jsx)(_reactNative.Animated.Text,{accessibilityRole:"header",style:[N.title,{fontSize:L.titleSize,fontWeight:w.weight[L.titleWeight],textAlign:"center"===a?"center":"left"},q,j],numberOfLines:1,children:i}):null,M=n?(0,_jsxRuntime.jsx)(_reactNative.Animated.Text,{style:[N.subtitle,{textAlign:"center"===a?"center":"left"},T&&W?{opacity:W.subtitleOpacity}:null,A],numberOfLines:L.subtitleLines,children:n}):null,F=(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[N.titleColumn,"center"===a?N.titleColumnCenter:null,L.alignBottom?N.titleColumnBottom:null],children:[k,M]}),H=T?_reactNative.Animated.View:_reactNative.View,U=T&&W?{height:_reactNative.Animated.add(W.barHeight,new _reactNative.Animated.Value(I.top))}:{height:(m??L.height)+I.top};return(0,_jsxRuntime.jsxs)(H,{ref:t,testID:S,style:[N.root,{paddingTop:I.top,backgroundColor:h?"transparent":w.colors.surface},U,!T&&O?{borderBottomWidth:D,borderBottomColor:w.colors.border}:null,b,f],children:[T&&W&&O?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{pointerEvents:"none",style:[N.animatedBorder,{backgroundColor:w.colors.border,opacity:W.borderOpacity}]}):null,(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[N.row,L.alignBottom?N.rowAlignBottom:null,V,{flex:1}],children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[N.sideSlot,E?N.sideSlotCompact:null],children:[C?(0,_jsxRuntime.jsx)(ActionButton,{action:C,side:"left",haptic:y,flush:E}):null,null!=s&&!1!==s?(0,_jsxRuntime.jsx)(_reactNative.View,{style:N.slotNode,children:s}):null]}),(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",style:[N.center,"center"===a?N.centerAligned:N.centerLeft,E?{paddingLeft:z?p:w.space.none,paddingRight:w.space.none}:null],children:F}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[N.sideSlot,N.sideSlotRight,E?N.sideSlotCompact:null],children:[l?.map((e,t)=>(0,_jsxRuntime.jsx)(_react.Fragment,{children:"menu"in e?(0,_jsxRuntime.jsx)(_index2.Menu,{items:e.menu,title:e.menuTitle,haptic:y,trigger:(0,_jsxRuntime.jsx)(ActionButton,{action:e,side:"right",badgeStyle:v,haptic:y,flush:E})}):(0,_jsxRuntime.jsx)(ActionButton,{action:e,side:"right",badgeStyle:v,haptic:y,flush:E})},`appbar-right-${t}`)),null!=o&&!1!==o?(0,_jsxRuntime.jsx)(_reactNative.View,{style:N.slotNode,children:o}):null]})]})]})});AppBar.displayName="AppBar";const buildStyles=e=>_reactNative.StyleSheet.create({root:{width:"100%"},row:{flexDirection:"row",alignItems:"center",paddingHorizontal:e.space.xs},rowAlignBottom:{alignItems:"flex-end",paddingBottom:e.space.sm},sideSlot:{flexDirection:"row",alignItems:"center",minWidth:48},sideSlotRight:{justifyContent:"flex-end"},sideSlotCompact:{minWidth:0},slotNode:{flexDirection:"row",alignItems:"center"},center:{flex:1,minWidth:0,paddingHorizontal:e.space.xs},centerAligned:{alignItems:"center"},centerLeft:{alignItems:"flex-start"},titleColumn:{flexDirection:"column",maxWidth:"100%"},titleColumnCenter:{alignItems:"center"},titleColumnBottom:{justifyContent:"flex-end"},title:{color:e.colors["text-body"]},titleVariant:{includeFontPadding:!1,textAlignVertical:"center"},subtitle:{marginTop:e.space.xxs,color:e.colors["text-subtle"],fontSize:e.text.sm.size,fontWeight:e.weight.normal},animatedBorder:{position:"absolute",left:0,right:0,bottom:0,height:_reactNative.StyleSheet.hairlineWidth}}),buildActionStyles=e=>_reactNative.StyleSheet.create({actionButton:{width:44,height:44,borderRadius:e.radius.pill,..._corners.smoothCorners,alignItems:"center",justifyContent:"center"},actionLeft:{marginRight:e.space.xs},actionRight:{marginLeft:e.space.xs},actionPressed:{backgroundColor:e.colors["surface-pressed"]},textButton:{minWidth:44,minHeight:44,paddingHorizontal:e.space.sm,alignItems:"center",justifyContent:"center"},textPressed:{opacity:.6},dot:{position:"absolute",top:10,right:10,width:8,height:8,borderRadius:e.radius.pill,backgroundColor:e.colors.danger},iconWrap:{alignItems:"center",justifyContent:"center"},badge:{position:"absolute",top:4,right:4,minWidth:16,height:16,paddingHorizontal:e.space.xs,borderRadius:e.radius.pill,..._corners.smoothCorners,backgroundColor:e.colors.danger,alignItems:"center",justifyContent:"center"},badgeText:{color:e.colors["on-danger"],fontSize:e.text.xs.size,fontWeight:e.weight.semibold,lineHeight:13}});var _default=exports.default=AppBar;

package/lib/module/components/AppBar/AppBar.js

@@ -1 +1 @@
-"use strict";import{Fragment,forwardRef,useMemo}from"react";import{Animated,Pressable,StyleSheet,View}from"react-native";import{useSafeAreaInsets}from"react-native-safe-area-context";import{usePressAnimation}from"../../hooks/usePressAnimation.js";import{useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{warnInvalidValue}from"../../utils/warnInvalidValue.js";import{AppIcon}from"../AppIcon/AppIcon.js";import{Menu}from"../Menu/index.js";import{Text as ThemedText}from"../Text/Text.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const ACTION_BUTTON_SIZE=44,DOT_OFFSET=10,DOT_SIZE=8,BADGE_OFFSET=4;export const DEFAULT_APP_BAR_LABELS=Object.freeze({back:"Back"});const variantSize=(e,t)=>{switch(t){case"compact":return{height:44,titleSize:e.text.lg.size,titleWeight:"semibold",alignBottom:!1,subtitleLines:1};case"large":return{height:96,titleSize:e.text["2xl"].size,titleWeight:"bold",alignBottom:!0,subtitleLines:2};default:return{height:56,titleSize:e.text.lg.size,titleWeight:"semibold",alignBottom:!1,subtitleLines:1}}},ActionButton=forwardRef(({action:e,side:t,badgeStyle:i,haptic:n,flush:l,onPress:o},s)=>{const r=useTheme(),{style:a,pressIn:c,pressOut:d}=usePressAnimation({enabled:!0}),u=useMemo(()=>buildActionStyles(r),[r]),m=e.badge,p=void 0!==m&&0!==m,g=void 0!==e.label;return _jsx(Animated.View,{style:a,children:_jsxs(Pressable,{ref:s,onPress:t=>{const i=resolveHaptic(n,"selection");i&&triggerHaptic(i),"onPress"in e&&e.onPress(),o?.(t)},onPressIn:c,onPressOut:d,accessibilityRole:"button",accessibilityLabel:e.accessibilityLabel??e.label,testID:e.testID,android_ripple:{color:r.colors["surface-pressed"],borderless:!g},style:({pressed:e})=>[g?u.textButton:u.actionButton,l?null:"left"===t?u.actionLeft:u.actionRight,e&&!g?u.actionPressed:null,e&&g?u.textPressed:null],children:[g?_jsx(ThemedText,{variant:"body",weight:"semibold",color:"link",numberOfLines:1,children:e.label}):_jsx(View,{style:u.iconWrap,children:e.icon}),p?_jsx(View,{style:[u.badge,i],pointerEvents:"none",children:_jsx(ThemedText,{variant:"caption",weight:"semibold",numberOfLines:1,style:u.badgeText,children:String(m)})}):null,e.dot?_jsx(View,{testID:e.testID?`${e.testID}-dot`:"appbar-action-dot",style:u.dot,pointerEvents:"none"}):null]})})}),COLLAPSE_RANGE=60,LARGE_TITLE_SCALE_END=.71,AppBar=forwardRef((e,t)=>{const{title:i,subtitle:n,titleAlignment:l="left",leftAction:o,rightActions:s,leading:r,trailing:a,onBack:c,gutter:d,titleVariant:u,titleOffset:m,height:p,divider:g,variant:h="default",transparent:x=!1,scrollY:f,style:b,containerStyle:y,titleStyle:A,subtitleStyle:S,badgeStyle:j,haptic:_,labels:w,testID:B}=e;warnInvalidValue("AppBar","variant",e.variant,["default","large","compact"]),warnInvalidValue("AppBar","titleAlignment",e.titleAlignment,["left","center"]);const T=useMemo(()=>({...DEFAULT_APP_BAR_LABELS,...w}),[w]),I=useTheme(),v=useSafeAreaInsets(),L=useMemo(()=>variantSize(I,h),[I,h]),C=useMemo(()=>buildStyles(I),[I]),R="large"===h&&void 0!==f,V=o??(c?{icon:_jsx(AppIcon,{name:"arrow-left",size:24,color:I.colors["text-body"]}),onPress:c,accessibilityLabel:T.back}:void 0),P=a?void 0:s?.[s.length-1],opticalInset=e=>void 0===e?0:void 0!==e.label?I.space.sm:Math.max(10,0),z=void 0===d?null:{paddingLeft:Math.max(d-opticalInset(V),0),paddingRight:Math.max(d-opticalInset(P),0)},O=void 0!==m,E=Boolean(V)||Boolean(r),W=g??!x,D=StyleSheet.hairlineWidth,H=useMemo(()=>{if(!f)return null;const e={inputRange:[0,60],extrapolate:"clamp"};return{titleScale:f.interpolate({...e,outputRange:[1,.71]}),titleTranslateY:f.interpolate({...e,outputRange:[0,-20]}),titleTranslateX:f.interpolate({...e,outputRange:"center"===l?[0,0]:[0,8]}),subtitleOpacity:f.interpolate({inputRange:[0,30],outputRange:[1,0],extrapolate:"clamp"}),barHeight:f.interpolate({...e,outputRange:[96,56]}),borderOpacity:f.interpolate({...e,outputRange:[0,1]})}},[f,l]),M=R&&H?{transform:[{translateX:H.titleTranslateX},{translateY:H.titleTranslateY},{scale:H.titleScale}]}:null,k=i?u?_jsx(Animated.View,{style:M,children:_jsx(ThemedText,{variant:u,align:"center"===l?"center":"left",accessibilityRole:"header",numberOfLines:1,style:[C.titleVariant,A],children:i})}):_jsx(Animated.Text,{accessibilityRole:"header",style:[C.title,{fontSize:L.titleSize,fontWeight:I.weight[L.titleWeight],textAlign:"center"===l?"center":"left"},M,A],numberOfLines:1,children:i}):null,F=n?_jsx(Animated.Text,{style:[C.subtitle,{textAlign:"center"===l?"center":"left"},R&&H?{opacity:H.subtitleOpacity}:null,S],numberOfLines:L.subtitleLines,children:n}):null,N=_jsxs(View,{style:[C.titleColumn,"center"===l?C.titleColumnCenter:null,L.alignBottom?C.titleColumnBottom:null],children:[k,F]}),U=R?Animated.View:View,Y=R&&H?{height:Animated.add(H.barHeight,new Animated.Value(v.top))}:{height:(p??L.height)+v.top};return _jsxs(U,{ref:t,testID:B,style:[C.root,{paddingTop:v.top,backgroundColor:x?"transparent":I.colors.surface},Y,!R&&W?{borderBottomWidth:D,borderBottomColor:I.colors.border}:null,b,y],children:[R&&H&&W?_jsx(Animated.View,{pointerEvents:"none",style:[C.animatedBorder,{backgroundColor:I.colors.border,opacity:H.borderOpacity}]}):null,_jsxs(View,{style:[C.row,L.alignBottom?C.rowAlignBottom:null,z,{flex:1}],children:[_jsxs(View,{style:[C.sideSlot,O?C.sideSlotCompact:null],children:[V?_jsx(ActionButton,{action:V,side:"left",haptic:_,flush:O}):null,null!=r&&!1!==r?_jsx(View,{style:C.slotNode,children:r}):null]}),_jsx(View,{pointerEvents:"none",style:[C.center,"center"===l?C.centerAligned:C.centerLeft,O?{paddingLeft:E?m:I.space.none,paddingRight:I.space.none}:null],children:N}),_jsxs(View,{style:[C.sideSlot,C.sideSlotRight,O?C.sideSlotCompact:null],children:[s?.map((e,t)=>_jsx(Fragment,{children:"menu"in e?_jsx(Menu,{items:e.menu,title:e.menuTitle,haptic:_,trigger:_jsx(ActionButton,{action:e,side:"right",badgeStyle:j,haptic:_,flush:O})}):_jsx(ActionButton,{action:e,side:"right",badgeStyle:j,haptic:_,flush:O})},`appbar-right-${t}`)),null!=a&&!1!==a?_jsx(View,{style:C.slotNode,children:a}):null]})]})]})});AppBar.displayName="AppBar";const buildStyles=e=>StyleSheet.create({root:{width:"100%"},row:{flexDirection:"row",alignItems:"center",paddingHorizontal:e.space.xs},rowAlignBottom:{alignItems:"flex-end",paddingBottom:e.space.sm},sideSlot:{flexDirection:"row",alignItems:"center",minWidth:48},sideSlotRight:{justifyContent:"flex-end"},sideSlotCompact:{minWidth:0},slotNode:{flexDirection:"row",alignItems:"center"},center:{flex:1,minWidth:0,paddingHorizontal:e.space.xs},centerAligned:{alignItems:"center"},centerLeft:{alignItems:"flex-start"},titleColumn:{flexDirection:"column",maxWidth:"100%"},titleColumnCenter:{alignItems:"center"},titleColumnBottom:{justifyContent:"flex-end"},title:{color:e.colors["text-body"]},titleVariant:{includeFontPadding:!1,textAlignVertical:"center"},subtitle:{marginTop:e.space.xxs,color:e.colors["text-subtle"],fontSize:e.text.sm.size,fontWeight:e.weight.normal},animatedBorder:{position:"absolute",left:0,right:0,bottom:0,height:StyleSheet.hairlineWidth}}),buildActionStyles=e=>StyleSheet.create({actionButton:{width:44,height:44,borderRadius:e.radius.pill,...smoothCorners,alignItems:"center",justifyContent:"center"},actionLeft:{marginRight:e.space.xs},actionRight:{marginLeft:e.space.xs},actionPressed:{backgroundColor:e.colors["surface-pressed"]},textButton:{minWidth:44,minHeight:44,paddingHorizontal:e.space.sm,alignItems:"center",justifyContent:"center"},textPressed:{opacity:.6},dot:{position:"absolute",top:10,right:10,width:8,height:8,borderRadius:e.radius.pill,backgroundColor:e.colors.danger},iconWrap:{alignItems:"center",justifyContent:"center"},badge:{position:"absolute",top:4,right:4,minWidth:16,height:16,paddingHorizontal:e.space.xs,borderRadius:e.radius.pill,...smoothCorners,backgroundColor:e.colors.danger,alignItems:"center",justifyContent:"center"},badgeText:{color:e.colors["on-danger"],fontSize:e.text.xs.size,fontWeight:e.weight.semibold,lineHeight:13}});export{AppBar};export default AppBar;
+"use strict";import{Fragment,forwardRef,useMemo}from"react";import{Animated,Pressable,StyleSheet,View}from"react-native";import{useSafeAreaInsets}from"react-native-safe-area-context";import{usePressAnimation}from"../../hooks/usePressAnimation.js";import{useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{warnInvalidValue}from"../../utils/warnInvalidValue.js";import{AppIcon}from"../AppIcon/AppIcon.js";import{Menu}from"../Menu/index.js";import{Text as ThemedText}from"../Text/Text.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const ACTION_BUTTON_SIZE=44,DOT_OFFSET=10,DOT_SIZE=8,BADGE_OFFSET=4;export const DEFAULT_APP_BAR_LABELS=Object.freeze({back:"Back"});const variantSize=(e,t)=>{switch(t){case"compact":return{height:44,titleSize:e.text.lg.size,titleWeight:"semibold",alignBottom:!1,subtitleLines:1};case"large":return{height:96,titleSize:e.text["2xl"].size,titleWeight:"bold",alignBottom:!0,subtitleLines:2};default:return{height:56,titleSize:e.text.lg.size,titleWeight:"semibold",alignBottom:!1,subtitleLines:1}}},ActionButton=forwardRef(({action:e,side:t,badgeStyle:i,haptic:n,flush:l,onPress:o},s)=>{const r=useTheme(),{style:a,pressIn:c,pressOut:d}=usePressAnimation({enabled:!0}),u=useMemo(()=>buildActionStyles(r),[r]),m=e.badge,p=void 0!==m&&0!==m,g=void 0!==e.label;return _jsx(Animated.View,{style:a,children:_jsxs(Pressable,{ref:s,onPress:t=>{const i=resolveHaptic(n,"selection");i&&triggerHaptic(i),"onPress"in e&&e.onPress(),o?.(t)},onPressIn:c,onPressOut:d,accessibilityRole:"button",accessibilityLabel:e.accessibilityLabel??e.label,testID:e.testID,android_ripple:{color:r.colors["surface-pressed"],borderless:!g},style:({pressed:e})=>[g?u.textButton:u.actionButton,l?null:"left"===t?u.actionLeft:u.actionRight,e&&!g?u.actionPressed:null,e&&g?u.textPressed:null],children:[g?_jsx(ThemedText,{variant:"body",weight:"semibold",color:"link",numberOfLines:1,children:e.label}):_jsx(View,{style:u.iconWrap,children:e.icon}),p?_jsx(View,{style:[u.badge,i],pointerEvents:"none",children:_jsx(ThemedText,{variant:"caption",weight:"semibold",numberOfLines:1,style:u.badgeText,children:String(m)})}):null,e.dot?_jsx(View,{testID:e.testID?`${e.testID}-dot`:"appbar-action-dot",style:u.dot,pointerEvents:"none"}):null]})})}),COLLAPSE_RANGE=60,LARGE_TITLE_SCALE_END=.71,AppBar=forwardRef((e,t)=>{const{title:i,subtitle:n,titleAlignment:l="left",leftAction:o,rightActions:s,leading:r,trailing:a,onBack:c,gutter:d,titleVariant:u,titleOffset:m,height:p,divider:g,variant:h="default",transparent:x=!1,scrollY:f,style:b,containerStyle:y,titleStyle:A,subtitleStyle:S,badgeStyle:j,haptic:_,labels:w,testID:B}=e;warnInvalidValue("AppBar","variant",e.variant,["default","large","compact"]),warnInvalidValue("AppBar","titleAlignment",e.titleAlignment,["left","center"]);const T=useMemo(()=>({...DEFAULT_APP_BAR_LABELS,...w}),[w]),I=useTheme(),v=useSafeAreaInsets(),L=useMemo(()=>variantSize(I,h),[I,h]),C=useMemo(()=>buildStyles(I),[I]),R="large"===h&&void 0!==f,V=o??(c?{icon:_jsx(AppIcon,{name:"arrow-left",size:24,color:I.colors["text-body"]}),onPress:c,accessibilityLabel:T.back}:void 0),P=a?void 0:s?.[s.length-1],opticalInset=e=>void 0===e?0:void 0!==e.label?I.space.sm:Math.max((44-(e.glyphSize??24))/2,0),z=void 0===d?null:{paddingLeft:Math.max(d-opticalInset(V),0),paddingRight:Math.max(d-opticalInset(P),0)},O=void 0!==m,E=Boolean(V)||Boolean(r),W=g??!x,D=StyleSheet.hairlineWidth,H=useMemo(()=>{if(!f)return null;const e={inputRange:[0,60],extrapolate:"clamp"};return{titleScale:f.interpolate({...e,outputRange:[1,.71]}),titleTranslateY:f.interpolate({...e,outputRange:[0,-20]}),titleTranslateX:f.interpolate({...e,outputRange:"center"===l?[0,0]:[0,8]}),subtitleOpacity:f.interpolate({inputRange:[0,30],outputRange:[1,0],extrapolate:"clamp"}),barHeight:f.interpolate({...e,outputRange:[96,56]}),borderOpacity:f.interpolate({...e,outputRange:[0,1]})}},[f,l]),M=R&&H?{transform:[{translateX:H.titleTranslateX},{translateY:H.titleTranslateY},{scale:H.titleScale}]}:null,k=i?u?_jsx(Animated.View,{style:M,children:_jsx(ThemedText,{variant:u,align:"center"===l?"center":"left",accessibilityRole:"header",numberOfLines:1,style:[C.titleVariant,A],children:i})}):_jsx(Animated.Text,{accessibilityRole:"header",style:[C.title,{fontSize:L.titleSize,fontWeight:I.weight[L.titleWeight],textAlign:"center"===l?"center":"left"},M,A],numberOfLines:1,children:i}):null,F=n?_jsx(Animated.Text,{style:[C.subtitle,{textAlign:"center"===l?"center":"left"},R&&H?{opacity:H.subtitleOpacity}:null,S],numberOfLines:L.subtitleLines,children:n}):null,N=_jsxs(View,{style:[C.titleColumn,"center"===l?C.titleColumnCenter:null,L.alignBottom?C.titleColumnBottom:null],children:[k,F]}),U=R?Animated.View:View,Y=R&&H?{height:Animated.add(H.barHeight,new Animated.Value(v.top))}:{height:(p??L.height)+v.top};return _jsxs(U,{ref:t,testID:B,style:[C.root,{paddingTop:v.top,backgroundColor:x?"transparent":I.colors.surface},Y,!R&&W?{borderBottomWidth:D,borderBottomColor:I.colors.border}:null,b,y],children:[R&&H&&W?_jsx(Animated.View,{pointerEvents:"none",style:[C.animatedBorder,{backgroundColor:I.colors.border,opacity:H.borderOpacity}]}):null,_jsxs(View,{style:[C.row,L.alignBottom?C.rowAlignBottom:null,z,{flex:1}],children:[_jsxs(View,{style:[C.sideSlot,O?C.sideSlotCompact:null],children:[V?_jsx(ActionButton,{action:V,side:"left",haptic:_,flush:O}):null,null!=r&&!1!==r?_jsx(View,{style:C.slotNode,children:r}):null]}),_jsx(View,{pointerEvents:"none",style:[C.center,"center"===l?C.centerAligned:C.centerLeft,O?{paddingLeft:E?m:I.space.none,paddingRight:I.space.none}:null],children:N}),_jsxs(View,{style:[C.sideSlot,C.sideSlotRight,O?C.sideSlotCompact:null],children:[s?.map((e,t)=>_jsx(Fragment,{children:"menu"in e?_jsx(Menu,{items:e.menu,title:e.menuTitle,haptic:_,trigger:_jsx(ActionButton,{action:e,side:"right",badgeStyle:j,haptic:_,flush:O})}):_jsx(ActionButton,{action:e,side:"right",badgeStyle:j,haptic:_,flush:O})},`appbar-right-${t}`)),null!=a&&!1!==a?_jsx(View,{style:C.slotNode,children:a}):null]})]})]})});AppBar.displayName="AppBar";const buildStyles=e=>StyleSheet.create({root:{width:"100%"},row:{flexDirection:"row",alignItems:"center",paddingHorizontal:e.space.xs},rowAlignBottom:{alignItems:"flex-end",paddingBottom:e.space.sm},sideSlot:{flexDirection:"row",alignItems:"center",minWidth:48},sideSlotRight:{justifyContent:"flex-end"},sideSlotCompact:{minWidth:0},slotNode:{flexDirection:"row",alignItems:"center"},center:{flex:1,minWidth:0,paddingHorizontal:e.space.xs},centerAligned:{alignItems:"center"},centerLeft:{alignItems:"flex-start"},titleColumn:{flexDirection:"column",maxWidth:"100%"},titleColumnCenter:{alignItems:"center"},titleColumnBottom:{justifyContent:"flex-end"},title:{color:e.colors["text-body"]},titleVariant:{includeFontPadding:!1,textAlignVertical:"center"},subtitle:{marginTop:e.space.xxs,color:e.colors["text-subtle"],fontSize:e.text.sm.size,fontWeight:e.weight.normal},animatedBorder:{position:"absolute",left:0,right:0,bottom:0,height:StyleSheet.hairlineWidth}}),buildActionStyles=e=>StyleSheet.create({actionButton:{width:44,height:44,borderRadius:e.radius.pill,...smoothCorners,alignItems:"center",justifyContent:"center"},actionLeft:{marginRight:e.space.xs},actionRight:{marginLeft:e.space.xs},actionPressed:{backgroundColor:e.colors["surface-pressed"]},textButton:{minWidth:44,minHeight:44,paddingHorizontal:e.space.sm,alignItems:"center",justifyContent:"center"},textPressed:{opacity:.6},dot:{position:"absolute",top:10,right:10,width:8,height:8,borderRadius:e.radius.pill,backgroundColor:e.colors.danger},iconWrap:{alignItems:"center",justifyContent:"center"},badge:{position:"absolute",top:4,right:4,minWidth:16,height:16,paddingHorizontal:e.space.xs,borderRadius:e.radius.pill,...smoothCorners,backgroundColor:e.colors.danger,alignItems:"center",justifyContent:"center"},badgeText:{color:e.colors["on-danger"],fontSize:e.text.xs.size,fontWeight:e.weight.semibold,lineHeight:13}});export{AppBar};export default AppBar;

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

@@ -18,6 +18,11 @@ export interface AppBarPressAction {
      * `accessibilityLabel` defaults to this label. Wins over `icon` when both are set.
      */
     label?: string;
+    /**
+     * The drawn width in pt of a glyph larger than the 24 pt icon (an icon on its own disc, say),
+     * so the bar's gutter lands on the glyph's visible edge. Default 24.
+     */
+    glyphSize?: number;
     /** Draws a small unread dot on the button's corner, with no count. */
     dot?: boolean;
     /** A count or short text drawn on the button's corner; zero draws nothing. */
@@ -36,6 +41,11 @@ export interface AppBarMenuAction {
     dot?: boolean;
     /** A count or short text drawn on the button's corner; zero draws nothing. */
     badge?: number | string;
+    /**
+     * The drawn width in pt of a glyph larger than the 24 pt icon (an icon on its own disc, say),
+     * so the bar's gutter lands on the glyph's visible edge. Default 24.
+     */
+    glyphSize?: number;
     /** The spoken label of the button, required because the button has no text of its own. */
     accessibilityLabel: string;
     testID?: string;
@@ -66,7 +76,8 @@ export interface AppBarProps {
     /**
      * The page gutter: the distance from the screen edge to the VISIBLE edge of the outermost
      * glyph. The bar subtracts the empty space inside an action button (the 44 pt button minus
-     * the 24 pt icon, halved; the text padding for a text action). A
+     * the glyph, 24 pt unless the action's `glyphSize` says otherwise, halved; the text padding for
+     * a text action). A
      * `leading` or `trailing` node is taken to draw to its own edge. Default: the bar's own
      * `space.xs` padding.
      */

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

@@ -18,6 +18,11 @@ export interface AppBarPressAction {
      * `accessibilityLabel` defaults to this label. Wins over `icon` when both are set.
      */
     label?: string;
+    /**
+     * The drawn width in pt of a glyph larger than the 24 pt icon (an icon on its own disc, say),
+     * so the bar's gutter lands on the glyph's visible edge. Default 24.
+     */
+    glyphSize?: number;
     /** Draws a small unread dot on the button's corner, with no count. */
     dot?: boolean;
     /** A count or short text drawn on the button's corner; zero draws nothing. */
@@ -36,6 +41,11 @@ export interface AppBarMenuAction {
     dot?: boolean;
     /** A count or short text drawn on the button's corner; zero draws nothing. */
     badge?: number | string;
+    /**
+     * The drawn width in pt of a glyph larger than the 24 pt icon (an icon on its own disc, say),
+     * so the bar's gutter lands on the glyph's visible edge. Default 24.
+     */
+    glyphSize?: number;
     /** The spoken label of the button, required because the button has no text of its own. */
     accessibilityLabel: string;
     testID?: string;
@@ -66,7 +76,8 @@ export interface AppBarProps {
     /**
      * The page gutter: the distance from the screen edge to the VISIBLE edge of the outermost
      * glyph. The bar subtracts the empty space inside an action button (the 44 pt button minus
-     * the 24 pt icon, halved; the text padding for a text action). A
+     * the glyph, 24 pt unless the action's `glyphSize` says otherwise, halved; the text padding for
+     * a text action). A
      * `leading` or `trailing` node is taken to draw to its own edge. Default: the bar's own
      * `space.xs` padding.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/mobile-ui",
-  "version": "0.120.0",
+  "version": "0.121.0",
   "description": "Beautiful, animated, accessible React Native components, theme and form engine for Webority projects.",
   "keywords": [
     "react-native",
@@ -85,13 +85,13 @@
     }
   },
   "dependencies": {
-    "@webority/markdown-core": "0.120.0"
+    "@webority/markdown-core": "0.121.0"
   },
   "peerDependencies": {
     "@react-navigation/bottom-tabs": ">=7.0.0",
     "@react-navigation/native": ">=7.0.0",
-    "@webority/canvas-kit": "0.120.0",
-    "@webority/mobile-core": "0.120.0",
+    "@webority/canvas-kit": "0.121.0",
+    "@webority/mobile-core": "0.121.0",
     "expo": ">=57.0.0",
     "expo-file-system": ">=57.0.0",
     "expo-haptics": ">=57.0.0",
@@ -155,10 +155,10 @@
     "@types/node": "25.6.0",
     "@types/react": "19.2.18",
     "@types/react-test-renderer": "19.1.0",
-    "@webority/canvas-kit": "0.120.0",
-    "@webority/mobile-core": "0.120.0",
+    "@webority/canvas-kit": "0.121.0",
+    "@webority/mobile-core": "0.121.0",
     "@webority/mobile-dev": "0.0.0",
-    "@webority/tokens": "0.120.0",
+    "@webority/tokens": "0.121.0",
     "expo": "57.0.31",
     "expo-file-system": "57.0.7",
     "expo-haptics": "57.0.3",