@klyftig/mobile-ui 1.8.0 → 1.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klyftig/mobile-ui",
-  "version": "1.8.0",
+  "version": "1.10.0",
   "scripts": {
     "test": "jest",
     "sync": "bash scripts/sync-to-kaelo.sh",

package/src/components/GlassButton.tsx

@@ -13,7 +13,8 @@ interface GlassButtonProps {
   disabled?: boolean;
   icon?: string;
   fullWidth?: boolean;
-  size?: 'normal' | 'compact';
+  /** normal = 56 pt, medium = 48 pt (same text, a slimmer bar), compact = 40 pt with smaller text. */
+  size?: 'normal' | 'medium' | 'compact';
 }
 
 export const GlassButton: React.FC<GlassButtonProps> = ({
@@ -28,6 +29,7 @@ export const GlassButton: React.FC<GlassButtonProps> = ({
 }) => {
   const isDisabled = disabled || loading;
   const isCompact = size === 'compact';
+  const isMedium = size === 'medium';
   const scaleAnim = useRef(new Animated.Value(1)).current;
 
   const handlePressIn = () => {
@@ -85,6 +87,7 @@ export const GlassButton: React.FC<GlassButtonProps> = ({
             style={[
               styles.primaryButton,
               isDisabled && styles.primaryButtonDisabled,
+              isMedium && styles.primaryButtonMedium,
               isCompact && styles.primaryButtonCompact,
             ]}
           >
@@ -120,6 +123,7 @@ export const GlassButton: React.FC<GlassButtonProps> = ({
             style={[
               styles.dangerButton,
               isDisabled && styles.primaryButtonDisabled,
+              isMedium && styles.buttonMedium,
               isCompact && styles.primaryButtonCompact,
             ]}
           >
@@ -155,6 +159,7 @@ export const GlassButton: React.FC<GlassButtonProps> = ({
           style={[
             styles.secondaryButton,
             isDisabled && styles.primaryButtonDisabled,
+            isMedium && styles.buttonMedium,
             isCompact && styles.secondaryButtonCompact,
           ]}
         >
@@ -184,6 +189,13 @@ const styles = StyleSheet.create({
     borderColor: 'rgba(255,255,255,0.15)',
     ...shadows.lg,
   },
+  primaryButtonMedium: {
+    height: 48,
+    borderRadius: 24,
+  },
+  buttonMedium: {
+    height: 48,
+  },
   primaryButtonCompact: {
     height: 40,
     borderRadius: theme.borderRadius.control,

package/src/components/ScreenHeader.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, StyleProp, ViewStyle } from 'react-native';
+import { View, Text, TouchableOpacity, StyleSheet, StyleProp, TextStyle, ViewStyle } from 'react-native';
 import { MaterialCommunityIcons as Icon } from '@expo/vector-icons';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTheme } from '../hooks/useTheme';
@@ -17,6 +17,8 @@ export interface ScreenHeaderProps {
   /** Render below the title row — e.g. a tab bar or period toggle that should stay pinned with the header. */
   below?: React.ReactNode;
   style?: StyleProp<ViewStyle>;
+  /** Merged over the title's own style — e.g. an app's display (serif) face. */
+  titleStyle?: StyleProp<TextStyle>;
 }
 
 /**
@@ -30,6 +32,7 @@ export function ScreenHeader({
   leftIcon = 'home-outline',
   leftAccessibilityLabel = 'Go to Dashboard',
   onLeftPress,
+  titleStyle,
   right,
   below,
   style,
@@ -55,7 +58,7 @@ export function ScreenHeader({
         </View>
         <View style={styles.center}>
           <Text
-            style={[styles.title, { color: colors.text.primary }]}
+            style={[styles.title, { color: colors.text.primary }, titleStyle]}
             numberOfLines={1}
           >
             {title}