@klyftig/mobile-ui 1.3.6 → 1.3.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klyftig/mobile-ui",
-  "version": "1.3.6",
+  "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,6 +54,9 @@ 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). */
@@ -69,7 +72,7 @@ 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, size = FAB_SIZE }) => {
+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);
@@ -174,7 +177,7 @@ export const FAB: React.FC<FABProps> = ({ actions, overrideIcon, overrideOnPress
           accessibilityState={{ expanded: overrideOnPress ? undefined : isExpanded }}
         >
           <Icon
-            name={overrideIcon ?? (isExpanded ? 'close' : 'plus')}
+            name={overrideIcon ?? (isExpanded ? 'close' : (collapsedIcon ?? 'plus'))}
             size={iconSize}
             color={GLASS_AVAILABLE ? '#1A1A1A' : '#FFFFFF'}
           />

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';