@klyftig/mobile-ui 1.2.1 → 1.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klyftig/mobile-ui",
-  "version": "1.2.1",
+  "version": "1.3.1",
   "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

@@ -4,13 +4,15 @@ import { MaterialCommunityIcons as Icon } from '@expo/vector-icons';
 import { useTheme } from '../hooks/useTheme';
 
 interface GlassInputProps {
-  label: string;
+  label?: string;
   value: string;
   onChangeText: (text: string) => void;
   placeholder?: string;
   secureTextEntry?: boolean;
-  keyboardType?: 'default' | 'email-address' | 'numeric' | 'phone-pad';
+  keyboardType?: 'default' | 'email-address' | 'numeric' | 'phone-pad' | 'decimal-pad' | 'number-pad';
   autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
+  multiline?: boolean;
+  numberOfLines?: number;
   // 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;
@@ -45,6 +47,8 @@ const GlassInputComponent: React.FC<GlassInputProps> = ({
   onFocus,
   onBlur,
   selectTextOnFocus,
+  multiline = false,
+  numberOfLines,
 }) => {
   const { colors } = useTheme();
   const [isSecure, setIsSecure] = useState(secureTextEntry);
@@ -66,7 +70,9 @@ const GlassInputComponent: React.FC<GlassInputProps> = ({
 
   return (
     <View style={styles.container}>
-      <Text style={[styles.label, { color: colors.text.primary }]}>{label}</Text>
+      {label ? (
+        <Text style={[styles.label, { color: colors.text.primary }]}>{label}</Text>
+      ) : null}
       <View
         style={[
           styles.inputContainer,
@@ -74,7 +80,7 @@ const GlassInputComponent: React.FC<GlassInputProps> = ({
           disabled && styles.inputContainerDisabled,
         ]}
       >
-        <View style={styles.inputWrapper}>
+        <View style={[styles.inputWrapper, multiline && styles.inputWrapperMultiline]}>
           {icon && (
             <Icon name={icon} size={20} color="#9B9B9B" style={styles.leftIcon} />
           )}
@@ -92,12 +98,20 @@ const GlassInputComponent: React.FC<GlassInputProps> = ({
             onFocus={handleFocus}
             onBlur={handleBlur}
             selectTextOnFocus={selectTextOnFocus}
+            multiline={multiline}
+            numberOfLines={numberOfLines}
+            textAlignVertical={multiline ? 'top' : undefined}
             textContentType={textContentType ?? (secureTextEntry ? 'oneTimeCode' : undefined)}
             autoComplete={autoComplete as any}
             accessibilityLabel={label}
-            accessibilityHint={placeholder ? `Enter ${label.toLowerCase()}` : undefined}
+            accessibilityHint={placeholder && label ? `Enter ${label.toLowerCase()}` : undefined}
             accessibilityState={{ disabled }}
-            style={[styles.input, icon && styles.inputWithLeftIcon, (rightText || showPasswordToggle) && styles.inputWithRightIcon]}
+            style={[
+              styles.input,
+              icon && styles.inputWithLeftIcon,
+              (rightText || showPasswordToggle) && styles.inputWithRightIcon,
+              multiline && styles.inputMultiline,
+            ]}
           />
           {rightText && (
             <Text style={styles.rightText}>{rightText}</Text>
@@ -154,6 +168,17 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
     height: 56,
   },
+  inputWrapperMultiline: {
+    height: undefined,
+    minHeight: 96,
+    paddingVertical: 12,
+    alignItems: 'flex-start',
+  },
+  inputMultiline: {
+    height: undefined,
+    minHeight: 72,
+    paddingTop: 4,
+  },
   leftIcon: {
     marginRight: 12,
   },

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