@klyftig/mobile-ui 1.3.4 → 1.3.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klyftig/mobile-ui",
-  "version": "1.3.4",
+  "version": "1.3.6",
   "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/CenterDialog.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import {
+  View,
+  Modal,
+  StyleSheet,
+  TouchableOpacity,
+  KeyboardAvoidingView,
+  Platform,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+import { useTheme } from '../hooks/useTheme';
+
+export interface CenterDialogProps {
+  visible: boolean;
+  /** Called on backdrop tap and hardware back. */
+  onDismiss: () => void;
+  children: React.ReactNode;
+  /** Wrap the overlay in a KeyboardAvoidingView — use when the dialog hosts text inputs. */
+  avoidKeyboard?: boolean;
+  /** Disable tap-outside-to-dismiss. Hardware back still calls onDismiss. */
+  dismissable?: boolean;
+  /** Accessibility label for the tap-to-dismiss backdrop. */
+  backdropAccessibilityLabel?: string;
+  /** Styles merged into the white card (e.g. `{ alignItems: 'center' }`). */
+  contentStyle?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Centered alert-style modal: dimmed scrim with tap-to-dismiss + a rounded white card.
+ * Callers own the card's content; this only provides the shared shell.
+ */
+export function CenterDialog({
+  visible,
+  onDismiss,
+  children,
+  avoidKeyboard = false,
+  dismissable = true,
+  backdropAccessibilityLabel,
+  contentStyle,
+}: CenterDialogProps) {
+  const { colors } = useTheme();
+  const Overlay = avoidKeyboard ? KeyboardAvoidingView : View;
+  const overlayProps = avoidKeyboard
+    ? { behavior: Platform.OS === 'ios' ? ('padding' as const) : undefined }
+    : {};
+
+  return (
+    <Modal visible={visible} transparent animationType="fade" onRequestClose={onDismiss}>
+      <Overlay style={styles.overlay} {...overlayProps}>
+        <TouchableOpacity
+          style={styles.backdrop}
+          activeOpacity={1}
+          onPress={dismissable ? onDismiss : undefined}
+          disabled={!dismissable}
+          accessibilityRole="button"
+          accessibilityLabel={backdropAccessibilityLabel}
+        />
+        <View style={[styles.content, { backgroundColor: colors.background.card }, contentStyle]}>
+          {children}
+        </View>
+      </Overlay>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0,0,0,0.4)',
+  },
+  content: {
+    borderRadius: 20,
+    padding: 24,
+    width: '85%',
+    maxWidth: 360,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.15,
+    shadowRadius: 12,
+    elevation: 8,
+  },
+});

package/src/components/FAB.tsx

@@ -56,17 +56,22 @@ interface FABProps {
   overrideIcon?: 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, 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 +129,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 +162,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"
@@ -170,7 +175,7 @@ export const FAB: React.FC<FABProps> = ({ actions, overrideIcon, overrideOnPress
         >
           <Icon
             name={overrideIcon ?? (isExpanded ? 'close' : 'plus')}
-            size={24}
+            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

@@ -44,6 +44,8 @@ export { WheelPicker } from './components/WheelPicker';
 export type { WheelPickerProps } from './components/WheelPicker';
 export { DisclaimerPill } from './components/DisclaimerPill';
 export type { DisclaimerPillProps } from './components/DisclaimerPill';
+export { CenterDialog } from './components/CenterDialog';
+export type { CenterDialogProps } from './components/CenterDialog';
 
 // Progress
 export { CircularProgress } from './components/progress/CircularProgress';