@klyftig/mobile-ui 1.3.3 → 1.3.5

package/package.json

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TouchableOpacity, Text, View, StyleSheet } from 'react-native';
+import { TouchableOpacity, Text, View, StyleSheet, Switch } from 'react-native';
 import { MaterialCommunityIcons as Icon } from '@expo/vector-icons';
 import { useTheme } from '../hooks/useTheme';
 
@@ -12,6 +12,16 @@ interface GlassListItemProps {
   style?: any;
 }
 
+interface GlassToggleItemProps {
+  title: string;
+  description?: string;
+  leftIcon?: string;
+  value: boolean;
+  onValueChange: (next: boolean) => void;
+  disabled?: boolean;
+  style?: any;
+}
+
 export const GlassListItem: React.FC<GlassListItemProps> = ({
   title,
   description,
@@ -61,6 +71,52 @@ export const GlassListItem: React.FC<GlassListItemProps> = ({
   return content;
 };
 
+// A list row that ends in a native Switch instead of a chevron/icon. The
+// switch turns the theme's success green when on. Use this for settings
+// toggles so the on/off state reads clearly (GlassListItem's rightIcon is a
+// static tertiary-gray glyph and can't convey toggle state).
+export const GlassToggleItem: React.FC<GlassToggleItemProps> = ({
+  title,
+  description,
+  leftIcon,
+  value,
+  onValueChange,
+  disabled,
+  style,
+}) => {
+  const { colors } = useTheme();
+
+  return (
+    <View
+      style={[
+        styles.listItem,
+        { backgroundColor: colors.background.card, borderColor: colors.border.light },
+        style,
+      ]}
+    >
+      <View style={styles.listItemContent}>
+        {leftIcon && (
+          <Icon name={leftIcon} size={24} color={colors.icon.primary} style={styles.leftIcon} />
+        )}
+        <View style={styles.textContainer}>
+          <Text style={[styles.title, { color: colors.text.primary }]}>{title}</Text>
+          {description && <Text style={[styles.description, { color: colors.text.secondary }]}>{description}</Text>}
+        </View>
+        <Switch
+          value={value}
+          onValueChange={onValueChange}
+          disabled={disabled}
+          accessibilityLabel={title}
+          trackColor={{ false: '#E5E5EA', true: colors.accent.success }}
+          thumbColor="#FFFFFF"
+          ios_backgroundColor="#E5E5EA"
+          style={styles.toggleSwitch}
+        />
+      </View>
+    </View>
+  );
+};
+
 const styles = StyleSheet.create({
   listItem: {
     borderRadius: 16,
@@ -94,4 +150,7 @@ const styles = StyleSheet.create({
   rightIcon: {
     marginLeft: 12,
   },
+  toggleSwitch: {
+    marginLeft: 12,
+  },
 });

package/src/index.ts

@@ -20,7 +20,7 @@ export { GlassCard } from './components/GlassCard';
 export { GlassContainer } from './components/GlassContainer';
 export { GlassHeaderBackground } from './components/GlassHeaderBackground';
 export { GlassInput } from './components/GlassInput';
-export { GlassListItem } from './components/GlassList';
+export { GlassListItem, GlassToggleItem } from './components/GlassList';
 export { GlassStatsCard, GlassMacroCard, GlassNutrientRow } from './components/GlassStats';
 export { RadioOption, RadioGroup } from './components/RadioOption';
 export type { RadioOptionProps, RadioGroupProps } from './components/RadioOption';
@@ -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';