@idealyst/components 1.2.106 → 1.2.108

package/src/Form/useForm.ts

@@ -0,0 +1,279 @@
+import { useReducer, useRef, useCallback, useMemo } from 'react';
+import type { UseFormOptions, UseFormReturn, FormValues, FormErrors } from './types';
+
+// Action types for the reducer
+type FormAction<T extends FormValues> =
+  | { type: 'SET_VALUE'; name: keyof T; value: T[keyof T] }
+  | { type: 'SET_VALUES'; values: Partial<T> }
+  | { type: 'SET_TOUCHED'; name: keyof T }
+  | { type: 'SET_ERROR'; name: keyof T; error: string | undefined }
+  | { type: 'SET_ERRORS'; errors: FormErrors<T> }
+  | { type: 'SET_SUBMITTING'; isSubmitting: boolean }
+  | { type: 'INCREMENT_SUBMIT_COUNT' }
+  | { type: 'RESET'; values: T };
+
+// Form state shape
+interface FormState<T extends FormValues> {
+  values: T;
+  errors: FormErrors<T>;
+  touched: Partial<Record<keyof T, boolean>>;
+  isSubmitting: boolean;
+  submitCount: number;
+}
+
+// Reducer function
+function formReducer<T extends FormValues>(
+  state: FormState<T>,
+  action: FormAction<T>
+): FormState<T> {
+  switch (action.type) {
+    case 'SET_VALUE':
+      return {
+        ...state,
+        values: {
+          ...state.values,
+          [action.name]: action.value,
+        },
+      };
+    case 'SET_VALUES':
+      return {
+        ...state,
+        values: {
+          ...state.values,
+          ...action.values,
+        },
+      };
+    case 'SET_TOUCHED':
+      return {
+        ...state,
+        touched: {
+          ...state.touched,
+          [action.name]: true,
+        },
+      };
+    case 'SET_ERROR':
+      return {
+        ...state,
+        errors: {
+          ...state.errors,
+          [action.name]: action.error,
+        },
+      };
+    case 'SET_ERRORS':
+      return {
+        ...state,
+        errors: action.errors,
+      };
+    case 'SET_SUBMITTING':
+      return {
+        ...state,
+        isSubmitting: action.isSubmitting,
+      };
+    case 'INCREMENT_SUBMIT_COUNT':
+      return {
+        ...state,
+        submitCount: state.submitCount + 1,
+      };
+    case 'RESET':
+      return {
+        values: action.values,
+        errors: {},
+        touched: {},
+        isSubmitting: false,
+        submitCount: 0,
+      };
+    default:
+      return state;
+  }
+}
+
+// Field registration info
+interface FieldRegistration {
+  ref: React.RefObject<any>;
+  order: number;
+}
+
+export function useForm<T extends FormValues = FormValues>(
+  options: UseFormOptions<T>
+): UseFormReturn<T> {
+  const { initialValues, validate, validateOn = 'onBlur', onSubmit, disabled = false } = options;
+
+  // Store initial values in a ref for dirty detection and reset
+  const initialValuesRef = useRef<T>(initialValues);
+
+  // Auto-incrementing order counter for field registration
+  const orderCounterRef = useRef<number>(0);
+
+  // Field registration map
+  const fieldsRef = useRef<Map<keyof T, FieldRegistration>>(new Map());
+
+  // Initialize reducer with initial state
+  const [state, dispatch] = useReducer(formReducer<T>, {
+    values: initialValues,
+    errors: {},
+    touched: {},
+    isSubmitting: false,
+    submitCount: 0,
+  });
+
+  // Validate a single field
+  const validateField = useCallback((name: keyof T): string | undefined => {
+    if (!validate) return undefined;
+    const result = validate(state.values);
+    if (!result) return undefined;
+    return result[name];
+  }, [validate, state.values]);
+
+  // Validate all fields
+  const validateAll = useCallback((): boolean => {
+    if (!validate) return true;
+    const errors = validate(state.values);
+    if (errors && Object.keys(errors).length > 0) {
+      dispatch({ type: 'SET_ERRORS', errors });
+      return false;
+    }
+    dispatch({ type: 'SET_ERRORS', errors: {} });
+    return true;
+  }, [validate, state.values]);
+
+  // Get a single value
+  const getValue = useCallback((name: keyof T): T[keyof T] => {
+    return state.values[name];
+  }, [state.values]);
+
+  // Set a single value
+  const setValue = useCallback((name: keyof T, value: T[keyof T]) => {
+    dispatch({ type: 'SET_VALUE', name, value });
+
+    // Validate on change if configured
+    if (validateOn === 'onChange' && validate) {
+      const result = validate({ ...state.values, [name]: value } as T);
+      const error = result ? result[name] : undefined;
+      dispatch({ type: 'SET_ERROR', name, error });
+    }
+  }, [validateOn, validate, state.values]);
+
+  // Set touched state for a field
+  const setTouched = useCallback((name: keyof T) => {
+    dispatch({ type: 'SET_TOUCHED', name });
+
+    // Validate on blur if configured
+    if (validateOn === 'onBlur' && validate) {
+      const result = validate(state.values);
+      const error = result ? result[name] : undefined;
+      dispatch({ type: 'SET_ERROR', name, error });
+    }
+  }, [validateOn, validate, state.values]);
+
+  // Get error for a field
+  const getError = useCallback((name: keyof T): string | undefined => {
+    return state.errors[name];
+  }, [state.errors]);
+
+  // Set error for a field
+  const setError = useCallback((name: keyof T, error: string | undefined) => {
+    dispatch({ type: 'SET_ERROR', name, error });
+  }, []);
+
+  // Handle form submission
+  const handleSubmit = useCallback(async () => {
+    dispatch({ type: 'INCREMENT_SUBMIT_COUNT' });
+
+    const isValid = validateAll();
+    if (!isValid) return;
+
+    dispatch({ type: 'SET_SUBMITTING', isSubmitting: true });
+
+    try {
+      await onSubmit(state.values);
+    } finally {
+      dispatch({ type: 'SET_SUBMITTING', isSubmitting: false });
+    }
+  }, [validateAll, onSubmit, state.values]);
+
+  // Reset the form
+  const reset = useCallback((nextValues?: Partial<T>) => {
+    const resetValues = {
+      ...initialValuesRef.current,
+      ...nextValues,
+    } as T;
+    dispatch({ type: 'RESET', values: resetValues });
+  }, []);
+
+  // Register a field for keyboard flow
+  const registerField = useCallback((name: keyof T, ref: React.RefObject<any>, order?: number) => {
+    const fieldOrder = order ?? orderCounterRef.current++;
+    fieldsRef.current.set(name, { ref, order: fieldOrder });
+  }, []);
+
+  // Unregister a field
+  const unregisterField = useCallback((name: keyof T) => {
+    fieldsRef.current.delete(name);
+  }, []);
+
+  // Focus the next field in order
+  const focusNextField = useCallback((currentName: keyof T) => {
+    const fields = Array.from(fieldsRef.current.entries())
+      .sort((a, b) => a[1].order - b[1].order);
+
+    const currentIndex = fields.findIndex(([name]) => name === currentName);
+    if (currentIndex === -1 || currentIndex === fields.length - 1) return;
+
+    const nextField = fields[currentIndex + 1];
+    if (nextField && nextField[1].ref.current?.focus) {
+      nextField[1].ref.current.focus();
+    }
+  }, []);
+
+  // Check if this is the last text field
+  const isLastTextField = useCallback((name: keyof T): boolean => {
+    const fields = Array.from(fieldsRef.current.entries())
+      .sort((a, b) => a[1].order - b[1].order);
+
+    if (fields.length === 0) return true;
+
+    const lastField = fields[fields.length - 1];
+    return lastField[0] === name;
+  }, []);
+
+  // Compute isDirty by comparing current values to initial values
+  const isDirty = useMemo(() => {
+    const initial = initialValuesRef.current;
+    for (const key in state.values) {
+      if (state.values[key] !== initial[key]) {
+        return true;
+      }
+    }
+    return false;
+  }, [state.values]);
+
+  // Compute isValid by checking if there are any errors
+  const isValid = useMemo(() => {
+    return Object.keys(state.errors).length === 0;
+  }, [state.errors]);
+
+  return {
+    values: state.values,
+    errors: state.errors,
+    touched: state.touched,
+    isSubmitting: state.isSubmitting,
+    isDirty,
+    isValid,
+    submitCount: state.submitCount,
+    disabled,
+
+    getValue,
+    setValue,
+    setTouched,
+    getError,
+    setError,
+
+    handleSubmit,
+    reset,
+
+    registerField,
+    unregisterField,
+    focusNextField,
+    isLastTextField,
+  };
+}

package/src/Form/useFormField.ts

@@ -0,0 +1,21 @@
+import { useFormContext } from './FormContext';
+import type { FieldRenderProps } from './types';
+
+export function useFormField(name: string): FieldRenderProps {
+  const { form } = useFormContext();
+
+  const value = form.getValue(name);
+  const touched = Boolean(form.touched[name]);
+  const submitAttempted = form.submitCount > 0;
+
+  return {
+    name,
+    value,
+    onChange: (val) => form.setValue(name, val as any),
+    onBlur: () => form.setTouched(name),
+    error: (touched || submitAttempted) ? form.getError(name) : undefined,
+    touched,
+    dirty: Boolean(form.values[name] !== undefined),
+    disabled: form.disabled,
+  };
+}

package/src/Popover/Popover.native.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState, forwardRef, useMemo } from 'react';
 import { Modal, View, TouchableWithoutFeedback, BackHandler, Dimensions } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useSafeAreaInsets } from '@idealyst/theme';
 import { PopoverProps } from './types';
 import { popoverStyles } from './Popover.styles';
 import { calculateSmartPosition } from '../utils/positionUtils.native';

package/src/RadioButton/RadioButton.styles.tsx

@@ -125,4 +125,32 @@ export const radioButtonStyles = defineStyle('RadioButton', (theme: Theme) => ({
             },
         },
     }),
+
+    groupWrapper: (_props: RadioButtonDynamicProps) => ({
+        display: 'flex' as const,
+        flexDirection: 'column' as const,
+        gap: 4,
+    }),
+
+    groupLabel: (_props: RadioButtonDynamicProps) => ({
+        fontSize: 14,
+        fontWeight: '500' as const,
+        color: theme.colors.text.primary,
+        variants: {
+            disabled: {
+                true: { opacity: 0.5 },
+                false: { opacity: 1 },
+            },
+        },
+    }),
+
+    groupHelperText: (_props: RadioButtonDynamicProps) => ({
+        fontSize: 12,
+        variants: {
+            hasError: {
+                true: { color: theme.intents.danger.primary },
+                false: { color: theme.colors.text.secondary },
+            },
+        },
+    }),
 }));

package/src/RadioButton/RadioGroup.native.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef, useMemo } from 'react';
-import { View } from 'react-native';
+import { View, Text } from 'react-native';
 import { radioButtonStyles } from './RadioButton.styles';
 import type { RadioGroupProps } from './types';
 import { getNativeAccessibilityProps } from '../utils/accessibility';
@@ -19,6 +19,9 @@ const RadioGroup = forwardRef<IdealystElement, RadioGroupProps>(({
   disabled = false,
   orientation: _orientation = 'vertical',
   children,
+  error,
+  helperText,
+  label,
   style,
   testID,
   id,
@@ -29,6 +32,8 @@ const RadioGroup = forwardRef<IdealystElement, RadioGroupProps>(({
   accessibilityHidden,
   accessibilityRole,
 }, ref) => {
+  const hasError = Boolean(error);
+  const showFooter = Boolean(error || helperText);
 
   // Generate native accessibility props
   const nativeA11yProps = useMemo(() => {
@@ -41,10 +46,13 @@ const RadioGroup = forwardRef<IdealystElement, RadioGroupProps>(({
     });
   }, [accessibilityLabel, accessibilityHint, accessibilityDisabled, disabled, accessibilityHidden, accessibilityRole]);
 
-  return (
+  const wrapperStyle = (radioButtonStyles.groupWrapper as any)({});
+  const labelStyle = (radioButtonStyles.groupLabel as any)({ disabled });
+  const helperTextStyle = (radioButtonStyles.groupHelperText as any)({ hasError });
+
+  const content = (
     <RadioGroupContext.Provider value={{ value, onValueChange, disabled }}>
       <View
-        ref={ref as any}
         nativeID={id}
         style={[
           radioButtonStyles.groupContainer,
@@ -57,6 +65,23 @@ const RadioGroup = forwardRef<IdealystElement, RadioGroupProps>(({
       </View>
     </RadioGroupContext.Provider>
   );
+
+  if (!label && !showFooter) {
+    return content;
+  }
+
+  return (
+    <View ref={ref as any} style={wrapperStyle}>
+      {label && <Text style={labelStyle}>{label}</Text>}
+      {content}
+      {showFooter && (
+        <View style={{ flex: 1 }}>
+          {error && <Text style={helperTextStyle}>{error}</Text>}
+          {!error && helperText && <Text style={helperTextStyle}>{helperText}</Text>}
+        </View>
+      )}
+    </View>
+  );
 });
 
 RadioGroup.displayName = 'RadioGroup';

package/src/RadioButton/RadioGroup.web.tsx

@@ -18,6 +18,9 @@ const RadioGroup: React.FC<RadioGroupProps> = ({
   disabled = false,
   orientation = 'vertical',
   children,
+  error,
+  helperText,
+  label,
   style,
   testID,
   id,
@@ -30,6 +33,8 @@ const RadioGroup: React.FC<RadioGroupProps> = ({
 }) => {
   // Generate unique ID for accessibility
   const groupId = useMemo(() => id || generateAccessibilityId('radiogroup'), [id]);
+  const hasError = Boolean(error);
+  const showFooter = Boolean(error || helperText);
 
   // Generate ARIA props
   const ariaProps = useMemo(() => {
@@ -45,6 +50,8 @@ const RadioGroup: React.FC<RadioGroupProps> = ({
   // Apply variants
   radioButtonStyles.useVariants({
     orientation,
+    disabled,
+    hasError,
   });
 
   const groupProps = getWebProps([
@@ -52,7 +59,11 @@ const RadioGroup: React.FC<RadioGroupProps> = ({
     style as any,
   ]);
 
-  return (
+  const wrapperProps = getWebProps([(radioButtonStyles.groupWrapper as any)({})]);
+  const labelProps = getWebProps([(radioButtonStyles.groupLabel as any)({ disabled })]);
+  const helperTextProps = getWebProps([(radioButtonStyles.groupHelperText as any)({ hasError })]);
+
+  const content = (
     <RadioGroupContext.Provider value={{ value, onValueChange, disabled }}>
       <div
         {...groupProps}
@@ -67,6 +78,31 @@ const RadioGroup: React.FC<RadioGroupProps> = ({
       </div>
     </RadioGroupContext.Provider>
   );
+
+  if (!label && !showFooter) {
+    return content;
+  }
+
+  return (
+    <div {...wrapperProps}>
+      {label && <span {...labelProps}>{label}</span>}
+      {content}
+      {showFooter && (
+        <div style={{ flex: 1 }}>
+          {error && (
+            <span {...helperTextProps} role="alert">
+              {error}
+            </span>
+          )}
+          {!error && helperText && (
+            <span {...helperTextProps}>
+              {helperText}
+            </span>
+          )}
+        </div>
+      )}
+    </div>
+  );
 };
 
 export default RadioGroup;

package/src/RadioButton/types.ts

@@ -26,6 +26,22 @@ export interface RadioGroupProps extends BaseProps, AccessibilityProps {
   disabled?: boolean;
   orientation?: 'horizontal' | 'vertical';
   children: ReactNode;
+
+  /**
+   * Error message to display below the radio group. When set, shows error styling.
+   */
+  error?: string;
+
+  /**
+   * Helper text to display below the radio group. Hidden when error is set.
+   */
+  helperText?: string;
+
+  /**
+   * Label text to display above the radio group
+   */
+  label?: string;
+
   style?: StyleProp<ViewStyle>;
   testID?: string;
 }

package/src/Screen/Screen.native.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, useEffect } from 'react';
 import { View as RNView, ScrollView as RNScrollView, Keyboard, Platform } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useSafeAreaInsets } from '@idealyst/theme';
 import { ScreenProps } from './types';
 import { screenStyles } from './Screen.styles';
 import type { IdealystElement } from '../utils/refTypes';
@@ -129,10 +129,19 @@ const Screen = forwardRef<IdealystElement, ScreenProps>(({
     );
   }
 
+  const contentInsetStyle = contentInset ? {
+    paddingTop: safeAreaStyle.paddingTop + (contentInset.top ?? 0),
+    paddingBottom: safeAreaStyle.paddingBottom + (contentInset.bottom ?? 0),
+    paddingLeft: safeAreaStyle.paddingLeft + (contentInset.left ?? 0),
+    paddingRight: safeAreaStyle.paddingRight + (contentInset.right ?? 0),
+  } : safeAreaStyle;
+
   return (
     <Animated.View style={[{ flex: 1 }, avoidKeyboard && animatedKeyboardStyle]}>
-      <RNView ref={ref as any} nativeID={id} style={[screenStyle, safeAreaStyle, style]} testID={testID} onLayout={onLayout}>
-        {children}
+      <RNView ref={ref as any} nativeID={id} style={[screenStyle, style]} testID={testID} onLayout={onLayout}>
+        <RNView style={[contentInsetStyle, { flex: 1 }]}>
+          {children}
+        </RNView>
       </RNView>
     </Animated.View>
   );

package/src/Select/Select.native.tsx

@@ -24,7 +24,7 @@ const Select = forwardRef<IdealystElement, SelectProps>(({
   onChange,
   placeholder = 'Select an option',
   disabled = false,
-  error = false,
+  error,
   helperText,
   label,
   type = 'outlined',
@@ -43,6 +43,10 @@ const Select = forwardRef<IdealystElement, SelectProps>(({
   accessibilityLabel,
   id,
 }, ref) => {
+  // Derive hasError boolean from error prop
+  const hasError = Boolean(error);
+  // Get error message if error is a string
+  const errorMessage = typeof error === 'string' ? error : undefined;
   const [isOpen, setIsOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState('');
   const scaleAnim = useRef(new Animated.Value(0)).current;
@@ -80,7 +84,7 @@ const Select = forwardRef<IdealystElement, SelectProps>(({
     type,
     size,
     disabled,
-    error,
+    hasError,
     focused: isOpen,
     margin,
     marginVertical,
@@ -90,7 +94,7 @@ const Select = forwardRef<IdealystElement, SelectProps>(({
   // Get dynamic styles - call as functions for theme reactivity
   const containerStyle = (selectStyles.container as any)({});
   const labelStyle = (selectStyles.label as any)({});
-  const triggerStyle = (selectStyles.trigger as any)({ type, intent, disabled, error, focused: isOpen });
+  const triggerStyle = (selectStyles.trigger as any)({ type, intent, disabled, hasError, focused: isOpen });
   const triggerContentStyle = (selectStyles.triggerContent as any)({});
   const triggerTextStyle = (selectStyles.triggerText as any)({});
   const placeholderStyle = (selectStyles.placeholder as any)({});
@@ -105,7 +109,7 @@ const Select = forwardRef<IdealystElement, SelectProps>(({
   const optionIconStyle = (selectStyles.optionIcon as any)({});
   const optionTextStyle = (selectStyles.optionText as any)({});
   const optionTextDisabledStyle = (selectStyles.optionTextDisabled as any)({});
-  const helperTextStyle = (selectStyles.helperText as any)({ error });
+  const helperTextStyle = (selectStyles.helperText as any)({ hasError });
   const overlayStyle = (selectStyles.overlay as any)({});
 
   const handleTriggerPress = () => {
@@ -357,9 +361,9 @@ const Select = forwardRef<IdealystElement, SelectProps>(({
       {/* Only render dropdown modal if not using iOS ActionSheet */}
       {!(Platform.OS === 'ios' && presentationMode === 'actionSheet') && renderDropdown()}
 
-      {helperText && (
+      {(errorMessage || helperText) && (
         <Text style={helperTextStyle}>
-          {helperText}
+          {errorMessage || helperText}
         </Text>
       )}
     </View>

package/src/Select/Select.styles.tsx

@@ -19,7 +19,7 @@ export type SelectDynamicProps = {
     intent?: Intent;
     type?: SelectType;
     disabled?: boolean;
-    error?: boolean;
+    hasError?: boolean;
     focused?: boolean;
     margin?: ViewStyleSize;
     marginVertical?: ViewStyleSize;
@@ -56,10 +56,10 @@ export const selectStyles = defineStyle('Select', (theme: Theme) => ({
         marginBottom: 4,
     }),
 
-    trigger: ({ type = 'outlined', intent = 'neutral', disabled = false, error = false, focused = false }: SelectDynamicProps) => {
-        // Determine border color based on state priority: error > focused > default
+    trigger: ({ type = 'outlined', intent = 'neutral', disabled = false, hasError = false, focused = false }: SelectDynamicProps) => {
+        // Determine border color based on state priority: hasError > focused > default
         const getBorderColor = () => {
-            if (error) return theme.intents.danger.primary;
+            if (hasError) return theme.intents.danger.primary;
             if (focused) return theme.intents[intent]?.primary ?? theme.intents.primary.primary;
             return type === 'filled' ? 'transparent' : theme.colors.border.primary;
         };
@@ -86,9 +86,9 @@ export const selectStyles = defineStyle('Select', (theme: Theme) => ({
                 boxSizing: 'border-box',
                 cursor: disabled ? 'not-allowed' : 'pointer',
                 border: `1px solid ${borderColor}`,
-                boxShadow: focused && !error ? `0 0 0 2px ${theme.intents[intent]?.primary ?? theme.intents.primary.primary}33` : 'none',
+                boxShadow: focused && !hasError ? `0 0 0 2px ${theme.intents[intent]?.primary ?? theme.intents.primary.primary}33` : 'none',
                 transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
-                _hover: disabled ? {} : { borderColor: focused || error ? borderColor : theme.colors.border.secondary },
+                _hover: disabled ? {} : { borderColor: focused || hasError ? borderColor : theme.colors.border.secondary },
                 _active: disabled ? {} : { opacity: 0.9 },
                 _focus: { outline: 'none' },
             },
@@ -274,10 +274,10 @@ export const selectStyles = defineStyle('Select', (theme: Theme) => ({
         color: theme.colors.text.secondary,
     }),
 
-    helperText: ({ error = false }: SelectDynamicProps) => ({
+    helperText: ({ hasError = false }: SelectDynamicProps) => ({
         fontSize: 12,
         marginTop: 4,
-        color: error ? theme.intents.danger.primary : theme.colors.text.secondary,
+        color: hasError ? theme.intents.danger.primary : theme.colors.text.secondary,
     }),
 
     overlay: (_props: SelectDynamicProps) => ({