@klyftig/mobile-ui 1.2.0 → 1.3.0

package/package.json

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

@@ -0,0 +1,95 @@
+import React from 'react';
+import {
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+import { MaterialCommunityIcons as Icon } from '@expo/vector-icons';
+import { useTheme } from '../hooks/useTheme';
+
+export interface DisclaimerPillProps {
+  message: string;
+  linkLabel?: string;
+  onPress?: () => void;
+  iconName?: React.ComponentProps<typeof Icon>['name'];
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Compact footer pill with optional inline link. Used for medical/AI disclaimers
+ * that link to a sources/citations screen. Consumer wires up navigation via onPress.
+ */
+export function DisclaimerPill({
+  message,
+  linkLabel,
+  onPress,
+  iconName = 'information-outline',
+  style,
+}: DisclaimerPillProps) {
+  const { colors } = useTheme();
+  const content = (
+    <>
+      <Icon name={iconName} size={14} color={colors.text.tertiary} />
+      <Text style={[styles.text, { color: colors.text.tertiary }]}>
+        {message}
+        {linkLabel ? (
+          <>
+            {' '}
+            <Text
+              style={[
+                styles.link,
+                { color: colors.text.secondary },
+              ]}
+            >
+              {linkLabel}
+            </Text>
+          </>
+        ) : null}
+      </Text>
+    </>
+  );
+
+  if (onPress) {
+    return (
+      <TouchableOpacity
+        onPress={onPress}
+        activeOpacity={0.7}
+        accessibilityRole="button"
+        accessibilityLabel={linkLabel ? `${message} Tap to ${linkLabel}.` : message}
+        style={[styles.container, style]}
+      >
+        {content}
+      </TouchableOpacity>
+    );
+  }
+  return (
+    <TouchableOpacity
+      disabled
+      accessibilityLabel={message}
+      style={[styles.container, style]}
+    >
+      {content}
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+  },
+  text: {
+    flex: 1,
+    fontSize: 11,
+    lineHeight: 15,
+  },
+  link: {
+    fontWeight: '600',
+    textDecorationLine: 'underline',
+  },
+});

package/src/components/GlassInput.tsx

@@ -11,12 +11,19 @@ interface GlassInputProps {
   secureTextEntry?: boolean;
   keyboardType?: 'default' | 'email-address' | 'numeric' | 'phone-pad';
   autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
+  // Off by default for fields where iOS would otherwise replace partially-edited
+  // multi-word values with its autocorrect suggestion and snap the caret to end.
+  autoCorrect?: boolean;
+  spellCheck?: boolean;
   disabled?: boolean;
   icon?: string;
   showPasswordToggle?: boolean;
   rightText?: string;
   textContentType?: 'none' | 'password' | 'newPassword' | 'emailAddress' | 'username' | 'oneTimeCode';
   autoComplete?: string;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  selectTextOnFocus?: boolean;
 }
 
 const GlassInputComponent: React.FC<GlassInputProps> = ({
@@ -27,12 +34,17 @@ const GlassInputComponent: React.FC<GlassInputProps> = ({
   secureTextEntry = false,
   keyboardType = 'default',
   autoCapitalize = 'sentences',
+  autoCorrect,
+  spellCheck,
   disabled = false,
   icon,
   showPasswordToggle = false,
   rightText,
   textContentType,
   autoComplete,
+  onFocus,
+  onBlur,
+  selectTextOnFocus,
 }) => {
   const { colors } = useTheme();
   const [isSecure, setIsSecure] = useState(secureTextEntry);
@@ -40,11 +52,13 @@ const GlassInputComponent: React.FC<GlassInputProps> = ({
 
   const handleFocus = useCallback(() => {
     setIsFocused(true);
-  }, []);
+    onFocus?.();
+  }, [onFocus]);
 
   const handleBlur = useCallback(() => {
     setIsFocused(false);
-  }, []);
+    onBlur?.();
+  }, [onBlur]);
 
   const toggleSecure = useCallback(() => {
     setIsSecure(prev => !prev);
@@ -72,9 +86,12 @@ const GlassInputComponent: React.FC<GlassInputProps> = ({
             secureTextEntry={isSecure}
             keyboardType={keyboardType}
             autoCapitalize={autoCapitalize}
+            autoCorrect={autoCorrect}
+            spellCheck={spellCheck}
             editable={!disabled}
             onFocus={handleFocus}
             onBlur={handleBlur}
+            selectTextOnFocus={selectTextOnFocus}
             textContentType={textContentType ?? (secureTextEntry ? 'oneTimeCode' : undefined)}
             autoComplete={autoComplete as any}
             accessibilityLabel={label}

package/src/components/WheelPicker.tsx

@@ -0,0 +1,126 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import {
+  ScrollView,
+  View,
+  Text,
+  StyleSheet,
+  NativeSyntheticEvent,
+  NativeScrollEvent,
+} from 'react-native';
+import { useTheme } from '../hooks/useTheme';
+
+export interface WheelPickerProps {
+  values: number[];
+  selected: number;
+  onChange: (value: number) => void;
+  formatLabel?: (value: number) => string;
+  itemHeight?: number;
+  visibleCount?: number;
+  width?: number;
+  flex?: number;
+}
+
+const DEFAULT_ITEM_HEIGHT = 48;
+const DEFAULT_VISIBLE_COUNT = 5;
+
+export function WheelPicker({
+  values,
+  selected,
+  onChange,
+  formatLabel,
+  itemHeight = DEFAULT_ITEM_HEIGHT,
+  visibleCount = DEFAULT_VISIBLE_COUNT,
+  width,
+  flex,
+}: WheelPickerProps) {
+  const { colors } = useTheme();
+  const scrollRef = useRef<ScrollView>(null);
+  const containerHeight = itemHeight * visibleCount;
+  const padding = (containerHeight - itemHeight) / 2;
+  const lastIndexRef = useRef<number>(-1);
+
+  const selectedIndex = useMemo(() => {
+    const idx = values.indexOf(selected);
+    return idx >= 0 ? idx : 0;
+  }, [values, selected]);
+
+  useEffect(() => {
+    if (selectedIndex !== lastIndexRef.current) {
+      lastIndexRef.current = selectedIndex;
+      requestAnimationFrame(() => {
+        scrollRef.current?.scrollTo({ y: selectedIndex * itemHeight, animated: false });
+      });
+    }
+  }, [selectedIndex, itemHeight]);
+
+  const handleMomentumEnd = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const offsetY = e.nativeEvent.contentOffset.y;
+    const index = Math.round(offsetY / itemHeight);
+    const clamped = Math.max(0, Math.min(values.length - 1, index));
+    if (values[clamped] !== selected) {
+      onChange(values[clamped]);
+    }
+  };
+
+  return (
+    <View style={[styles.wrapper, { height: containerHeight, width, flex }]}>
+      <View
+        pointerEvents="none"
+        style={[
+          styles.selectionOverlay,
+          { top: padding, height: itemHeight, backgroundColor: 'rgba(0,0,0,0.06)' },
+        ]}
+      />
+      <ScrollView
+        ref={scrollRef}
+        showsVerticalScrollIndicator={false}
+        snapToInterval={itemHeight}
+        decelerationRate="fast"
+        contentContainerStyle={{ paddingTop: padding, paddingBottom: padding }}
+        onMomentumScrollEnd={handleMomentumEnd}
+        nestedScrollEnabled
+        contentOffset={{ x: 0, y: selectedIndex * itemHeight }}
+      >
+        {values.map((item, index) => {
+          const isSelected = index === selectedIndex;
+          return (
+            <View key={item} style={[styles.item, { height: itemHeight }]}>
+              <Text
+                style={[
+                  styles.itemText,
+                  {
+                    color: isSelected ? colors.text.primary : colors.text.tertiary,
+                  },
+                ]}
+              >
+                {formatLabel ? formatLabel(item) : String(item)}
+              </Text>
+            </View>
+          );
+        })}
+      </ScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    position: 'relative',
+    overflow: 'hidden',
+  },
+  selectionOverlay: {
+    position: 'absolute',
+    left: 8,
+    right: 8,
+    borderRadius: 12,
+    zIndex: 0,
+  },
+  item: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  itemText: {
+    fontSize: 22,
+    fontWeight: '600',
+  },
+});

package/src/index.ts

@@ -40,6 +40,10 @@ export { ErrorState } from './components/ErrorState';
 export type { ErrorStateProps } from './components/ErrorState';
 export { LoadingState } from './components/LoadingState';
 export type { LoadingStateProps } from './components/LoadingState';
+export { WheelPicker } from './components/WheelPicker';
+export type { WheelPickerProps } from './components/WheelPicker';
+export { DisclaimerPill } from './components/DisclaimerPill';
+export type { DisclaimerPillProps } from './components/DisclaimerPill';
 
 // Progress
 export { CircularProgress } from './components/progress/CircularProgress';