@klyftig/mobile-ui 1.3.5 → 1.3.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klyftig/mobile-ui",
-  "version": "1.3.5",
+  "version": "1.3.7",
   "scripts": {
     "pack-install": "npm pack && mv klyftig-ui-*.tgz /tmp/klyftig-ui-local.tgz && cd ../../mobile && npm install /tmp/klyftig-ui-local.tgz"
   },

package/src/components/CircleIconButton.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { View, TouchableOpacity, ActivityIndicator, StyleSheet } from 'react-native';
+import { MaterialCommunityIcons as Icon } from '@expo/vector-icons';
+import { useTheme } from '../hooks/useTheme';
+
+export type CircleIconButtonVariant = 'secondary' | 'primary';
+
+export interface CircleIconButtonProps {
+  icon: string;
+  onPress: () => void;
+  /** `secondary` (default) = flat iOS-style translucent-grey dismiss circle.
+   *  `primary` = solid brand-dark circle with a white glyph. */
+  variant?: CircleIconButtonVariant;
+  /** Diameter. Defaults to 40. */
+  size?: number;
+  loading?: boolean;
+  disabled?: boolean;
+  accessibilityLabel?: string;
+}
+
+/**
+ * Circular icon button for modal chrome (close, save, etc.). The `secondary`
+ * variant renders the iOS-standard dismiss affordance — a flat translucent-grey
+ * circle with a soft grey glyph, no border or shadow.
+ */
+export const CircleIconButton: React.FC<CircleIconButtonProps> = ({
+  icon,
+  onPress,
+  variant = 'secondary',
+  size = 40,
+  loading = false,
+  disabled = false,
+  accessibilityLabel,
+}) => {
+  const { colors } = useTheme();
+  const isPrimary = variant === 'primary';
+  const iconSize = Math.round(size * 0.5);
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      disabled={disabled || loading}
+      activeOpacity={0.7}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+    >
+      <View
+        style={[
+          styles.base,
+          { width: size, height: size, borderRadius: size / 2 },
+          isPrimary ? { backgroundColor: colors.text.primary } : styles.secondary,
+        ]}
+      >
+        {loading ? (
+          <ActivityIndicator size="small" color={isPrimary ? '#FFFFFF' : colors.text.primary} />
+        ) : (
+          <Icon name={icon as any} size={iconSize} color={isPrimary ? '#FFFFFF' : 'rgba(60, 60, 67, 0.6)'} />
+        )}
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  base: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    overflow: 'hidden',
+  },
+  secondary: {
+    backgroundColor: 'rgba(120, 120, 128, 0.16)',
+  },
+});

package/src/components/FAB.tsx

@@ -54,19 +54,27 @@ interface FABProps {
   actions: FABAction[];
   /** Override main button icon (e.g. 'camera' when input is focused) */
   overrideIcon?: string;
+  /** Icon for the collapsed (menu-closed) state. Defaults to 'plus'. Unlike
+   *  `overrideIcon`, this still morphs to 'close' when the menu is expanded. */
+  collapsedIcon?: string;
   /** If set, tapping the main button calls this directly instead of toggling the menu */
   overrideOnPress?: () => void;
+  /** Diameter of the main button. Defaults to FAB_SIZE (50). */
+  size?: number;
 }
 
 export const FAB_SIZE = 50;
 const SUB_BUTTON_SIZE = 44;
 const SUB_BUTTON_SPACING = 58;
+// Main icon ≈ 48% of the button diameter (24 at the default 50px).
+const ICON_RATIO = 0.48;
 
 // Fallback colors for sub-buttons when no color is specified
 const ACTION_COLORS = ['#10b981', '#f59e0b', '#0ea5e9', '#8b5cf6', '#ec4899'];
 
-export const FAB: React.FC<FABProps> = ({ actions, overrideIcon, overrideOnPress }) => {
+export const FAB: React.FC<FABProps> = ({ actions, overrideIcon, collapsedIcon, overrideOnPress, size = FAB_SIZE }) => {
   const insets = useSafeAreaInsets();
+  const iconSize = Math.round(size * ICON_RATIO);
   const [isExpanded, setIsExpanded] = useState(false);
   const expandAnim = useRef(new Animated.Value(0)).current;
 
@@ -124,8 +132,8 @@ export const FAB: React.FC<FABProps> = ({ actions, overrideIcon, overrideOnPress
             style={[
               styles.subButtonRow,
               {
-                bottom: fabBottom + (FAB_SIZE - SUB_BUTTON_SIZE) / 2,
-                right: 16 + (FAB_SIZE - SUB_BUTTON_SIZE) / 2,
+                bottom: fabBottom + (size - SUB_BUTTON_SIZE) / 2,
+                right: 16 + (size - SUB_BUTTON_SIZE) / 2,
                 transform: [{ translateY }, { scale: subButtonScale }],
                 opacity: subButtonOpacity,
               },
@@ -157,11 +165,11 @@ export const FAB: React.FC<FABProps> = ({ actions, overrideIcon, overrideOnPress
       <AdaptiveGlassView
         variant="clear"
         interactive={true}
-        style={[styles.fabGlass, { bottom: fabBottom, right: 16 }]}
+        style={[styles.fabGlass, { bottom: fabBottom, right: 16, width: size, height: size, borderRadius: size / 2 }]}
         fallbackStyle={styles.fabFallback}
       >
         <TouchableOpacity
-          style={styles.fabTouchable}
+          style={[styles.fabTouchable, { borderRadius: size / 2 }]}
           onPress={overrideOnPress ?? toggle}
           activeOpacity={0.85}
           accessibilityRole="button"
@@ -169,8 +177,8 @@ export const FAB: React.FC<FABProps> = ({ actions, overrideIcon, overrideOnPress
           accessibilityState={{ expanded: overrideOnPress ? undefined : isExpanded }}
         >
           <Icon
-            name={overrideIcon ?? (isExpanded ? 'close' : 'plus')}
-            size={24}
+            name={overrideIcon ?? (isExpanded ? 'close' : (collapsedIcon ?? 'plus'))}
+            size={iconSize}
             color={GLASS_AVAILABLE ? '#1A1A1A' : '#FFFFFF'}
           />
         </TouchableOpacity>

package/src/components/ScreenHeader.tsx

@@ -46,7 +46,8 @@ export function ScreenHeader({
               onPress={onLeftPress}
               accessibilityLabel={leftAccessibilityLabel}
               accessibilityRole="button"
-              hitSlop={8}
+              style={styles.leftButton}
+              hitSlop={12}
             >
               <Icon name={leftIcon as any} size={26} color={colors.icon.primary} />
             </TouchableOpacity>
@@ -86,10 +87,17 @@ const styles = StyleSheet.create({
     marginBottom: 8,
   },
   side: {
-    width: 40,
+    width: 44,
     alignItems: 'center',
     justifyContent: 'center',
   },
+  leftButton: {
+    width: 44,
+    height: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginLeft: -9,
+  },
   center: {
     flex: 1,
     alignItems: 'center',

package/src/index.ts

@@ -16,6 +16,8 @@ export { AdaptiveGlassView } from './components/AdaptiveGlassView';
 export { ErrorBoundary } from './components/ErrorBoundary';
 export { FAB, FAB_SIZE } from './components/FAB';
 export { GlassButton } from './components/GlassButton';
+export { CircleIconButton } from './components/CircleIconButton';
+export type { CircleIconButtonProps, CircleIconButtonVariant } from './components/CircleIconButton';
 export { GlassCard } from './components/GlassCard';
 export { GlassContainer } from './components/GlassContainer';
 export { GlassHeaderBackground } from './components/GlassHeaderBackground';