@idealyst/components 1.2.106 → 1.2.108

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.2.106",
+  "version": "1.2.108",
   "description": "Shared component library for React and React Native",
   "documentation": "https://github.com/IdealystIO/idealyst-framework/tree/main/packages/components#readme",
   "readme": "README.md",
@@ -56,7 +56,7 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/theme": "^1.2.106",
+    "@idealyst/theme": "^1.2.108",
     "@mdi/js": ">=7.0.0",
     "@mdi/react": ">=1.0.0",
     "@react-native-vector-icons/common": ">=12.0.0",
@@ -107,8 +107,8 @@
   },
   "devDependencies": {
     "@idealyst/blur": "^1.2.40",
-    "@idealyst/theme": "^1.2.106",
-    "@idealyst/tooling": "^1.2.106",
+    "@idealyst/theme": "^1.2.108",
+    "@idealyst/tooling": "^1.2.108",
     "@mdi/react": "^1.6.1",
     "@types/react": "^19.1.0",
     "react": "^19.1.0",

package/src/Dialog/Dialog.native.tsx

@@ -1,7 +1,7 @@
 import { useEffect, forwardRef, useMemo, useState } from 'react';
 import { Modal, View, Text, TouchableOpacity, TouchableWithoutFeedback, BackHandler, Platform, Keyboard, useWindowDimensions } 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 { DialogProps } from './types';
 import { dialogStyles } from './Dialog.styles';
 import { getNativeInteractiveAccessibilityProps } from '../utils/accessibility';

package/src/Form/Form.native.tsx

@@ -0,0 +1,38 @@
+import React, { forwardRef } from 'react';
+import { View } from 'react-native';
+import { formStyles } from './Form.styles';
+import { FormContext } from './FormContext';
+import type { FormProps } from './types';
+import type { IdealystElement } from '../utils/refTypes';
+
+/**
+ * Form component for managing form state and validation.
+ * Wraps children in a context provider and renders a View on native.
+ */
+const Form = forwardRef<IdealystElement, FormProps>(({
+  form,
+  children,
+  style,
+  testID,
+  id,
+}, ref) => {
+  return (
+    <FormContext.Provider value={{ form }}>
+      <View
+        ref={ref as any}
+        nativeID={id}
+        style={[
+          formStyles.container,
+          style as any,
+        ]}
+        testID={testID}
+      >
+        {children}
+      </View>
+    </FormContext.Provider>
+  );
+});
+
+Form.displayName = 'Form';
+
+export default Form;

package/src/Form/Form.styles.tsx

@@ -0,0 +1,14 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme } from '@idealyst/theme';
+
+void StyleSheet;
+type Theme = ThemeStyleWrapper<BaseTheme>;
+
+export const formStyles = defineStyle('Form', (_theme: Theme) => ({
+    container: {
+        display: 'flex' as const,
+        flexDirection: 'column' as const,
+        width: '100%',
+    },
+}));

package/src/Form/Form.web.tsx

@@ -0,0 +1,50 @@
+import React, { forwardRef, useCallback } from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
+import { formStyles } from './Form.styles';
+import { FormContext } from './FormContext';
+import useMergeRefs from '../hooks/useMergeRefs';
+import type { FormProps } from './types';
+import type { IdealystElement } from '../utils/refTypes';
+
+/**
+ * Form component for managing form state and validation.
+ * Wraps children in a context provider and renders a semantic <form> element on web.
+ */
+const Form = forwardRef<IdealystElement, FormProps>(({
+  form,
+  children,
+  style,
+  testID,
+  id,
+}, ref) => {
+  const handleSubmit = useCallback((e: React.FormEvent) => {
+    e.preventDefault();
+    form.handleSubmit();
+  }, [form]);
+
+  const containerProps = getWebProps([
+    formStyles.container,
+    style as any,
+  ]);
+
+  const mergedRef = useMergeRefs(ref, containerProps.ref);
+
+  return (
+    <FormContext.Provider value={{ form }}>
+      <form
+        {...containerProps}
+        ref={mergedRef}
+        onSubmit={handleSubmit}
+        noValidate
+        id={id}
+        data-testid={testID}
+      >
+        {children}
+      </form>
+    </FormContext.Provider>
+  );
+});
+
+Form.displayName = 'Form';
+
+export default Form;

package/src/Form/FormContext.ts

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+import type { FormContextValue } from './types';
+
+export const FormContext = createContext<FormContextValue | null>(null);
+
+export function useFormContext(): FormContextValue {
+  const ctx = useContext(FormContext);
+  if (!ctx) {
+    throw new Error('useFormContext must be used within a <Form> component');
+  }
+  return ctx;
+}

package/src/Form/fields/FormCheckbox.tsx

@@ -0,0 +1,27 @@
+import React, { forwardRef } from 'react';
+import Checkbox from '../../Checkbox';
+import { useFormField } from '../useFormField';
+import type { FormCheckboxProps } from '../types';
+import type { IdealystElement } from '../../utils/refTypes';
+
+const FormCheckbox = forwardRef<IdealystElement, FormCheckboxProps>(({
+  name,
+  disabled: localDisabled,
+  ...rest
+}, ref) => {
+  const field = useFormField(name);
+
+  return (
+    <Checkbox
+      ref={ref}
+      checked={Boolean(field.value)}
+      onChange={(checked: boolean) => field.onChange(checked)}
+      error={field.error}
+      disabled={field.disabled || localDisabled}
+      {...rest}
+    />
+  );
+});
+
+FormCheckbox.displayName = 'Form.Checkbox';
+export default FormCheckbox;

package/src/Form/fields/FormField.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { useFormField } from '../useFormField';
+import type { FormFieldProps } from '../types';
+
+const FormField: React.FC<FormFieldProps> = ({ name, children }) => {
+  const field = useFormField(name);
+  return <>{children(field)}</>;
+};
+
+FormField.displayName = 'Form.Field';
+export default FormField;

package/src/Form/fields/FormRadioGroup.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { RadioGroup } from '../../RadioButton';
+import { useFormField } from '../useFormField';
+import type { FormRadioGroupProps } from '../types';
+
+const FormRadioGroup: React.FC<FormRadioGroupProps> = ({
+  name,
+  disabled: localDisabled,
+  ...rest
+}) => {
+  const field = useFormField(name);
+
+  return (
+    <RadioGroup
+      value={(field.value as string) ?? ''}
+      onValueChange={(value) => field.onChange(value)}
+      disabled={field.disabled || localDisabled}
+      {...rest}
+    />
+  );
+};
+
+FormRadioGroup.displayName = 'Form.RadioGroup';
+export default FormRadioGroup;

package/src/Form/fields/FormSelect.tsx

@@ -0,0 +1,27 @@
+import React, { forwardRef } from 'react';
+import Select from '../../Select';
+import { useFormField } from '../useFormField';
+import type { FormSelectProps } from '../types';
+import type { IdealystElement } from '../../utils/refTypes';
+
+const FormSelect = forwardRef<IdealystElement, FormSelectProps>(({
+  name,
+  disabled: localDisabled,
+  ...rest
+}, ref) => {
+  const field = useFormField(name);
+
+  return (
+    <Select
+      ref={ref}
+      value={(field.value as string) ?? ''}
+      onChange={(value) => field.onChange(value)}
+      error={Boolean(field.error)}
+      disabled={field.disabled || localDisabled}
+      {...rest}
+    />
+  );
+});
+
+FormSelect.displayName = 'Form.Select';
+export default FormSelect;

package/src/Form/fields/FormSlider.tsx

@@ -0,0 +1,26 @@
+import React, { forwardRef } from 'react';
+import Slider from '../../Slider';
+import { useFormField } from '../useFormField';
+import type { FormSliderProps } from '../types';
+import type { IdealystElement } from '../../utils/refTypes';
+
+const FormSlider = forwardRef<IdealystElement, FormSliderProps>(({
+  name,
+  disabled: localDisabled,
+  ...rest
+}, ref) => {
+  const field = useFormField(name);
+
+  return (
+    <Slider
+      ref={ref}
+      value={(field.value as number) ?? 0}
+      onChange={(value: number) => field.onChange(value)}
+      disabled={field.disabled || localDisabled}
+      {...rest}
+    />
+  );
+});
+
+FormSlider.displayName = 'Form.Slider';
+export default FormSlider;

package/src/Form/fields/FormSwitch.tsx

@@ -0,0 +1,26 @@
+import React, { forwardRef } from 'react';
+import Switch from '../../Switch';
+import { useFormField } from '../useFormField';
+import type { FormSwitchProps } from '../types';
+import type { IdealystElement } from '../../utils/refTypes';
+
+const FormSwitch = forwardRef<IdealystElement, FormSwitchProps>(({
+  name,
+  disabled: localDisabled,
+  ...rest
+}, ref) => {
+  const field = useFormField(name);
+
+  return (
+    <Switch
+      ref={ref}
+      checked={Boolean(field.value)}
+      onChange={(checked: boolean) => field.onChange(checked)}
+      disabled={field.disabled || localDisabled}
+      {...rest}
+    />
+  );
+});
+
+FormSwitch.displayName = 'Form.Switch';
+export default FormSwitch;

package/src/Form/fields/FormTextArea.tsx

@@ -0,0 +1,27 @@
+import React, { forwardRef } from 'react';
+import TextArea from '../../TextArea';
+import { useFormField } from '../useFormField';
+import type { FormTextAreaProps } from '../types';
+import type { IdealystElement } from '../../utils/refTypes';
+
+const FormTextArea = forwardRef<IdealystElement, FormTextAreaProps>(({
+  name,
+  disabled: localDisabled,
+  ...rest
+}, ref) => {
+  const field = useFormField(name);
+
+  return (
+    <TextArea
+      ref={ref}
+      value={(field.value as string) ?? ''}
+      onChange={(text) => field.onChange(text)}
+      error={field.error}
+      disabled={field.disabled || localDisabled}
+      {...rest}
+    />
+  );
+});
+
+FormTextArea.displayName = 'Form.TextArea';
+export default FormTextArea;

package/src/Form/fields/FormTextInput.tsx

@@ -0,0 +1,55 @@
+import React, { forwardRef, useRef, useEffect } from 'react';
+import TextInput from '../../TextInput';
+import { useFormField } from '../useFormField';
+import { useFormContext } from '../FormContext';
+import useMergeRefs from '../../hooks/useMergeRefs';
+import type { FormTextInputProps } from '../types';
+import type { IdealystElement } from '../../utils/refTypes';
+
+const FormTextInput = forwardRef<IdealystElement, FormTextInputProps>(({
+  name,
+  tabOrder,
+  disabled: localDisabled,
+  onSubmitEditing: userOnSubmitEditing,
+  returnKeyType: userReturnKeyType,
+  ...rest
+}, ref) => {
+  const { form } = useFormContext();
+  const field = useFormField(name);
+  const inputRef = useRef<any>(null);
+  const mergedRef = useMergeRefs(ref, inputRef);
+
+  useEffect(() => {
+    form.registerField(name, inputRef, tabOrder);
+    return () => form.unregisterField(name);
+  }, [name, tabOrder, form]);
+
+  const isLast = form.isLastTextField(name);
+
+  const handleSubmitEditing = () => {
+    if (userOnSubmitEditing) {
+      userOnSubmitEditing();
+    } else if (isLast) {
+      form.handleSubmit();
+    } else {
+      form.focusNextField(name);
+    }
+  };
+
+  return (
+    <TextInput
+      ref={mergedRef}
+      value={(field.value as string) ?? ''}
+      onChangeText={(text) => field.onChange(text)}
+      onBlur={field.onBlur}
+      error={field.error}
+      disabled={field.disabled || localDisabled}
+      returnKeyType={userReturnKeyType ?? (isLast ? 'done' : 'next')}
+      onSubmitEditing={handleSubmitEditing}
+      {...rest}
+    />
+  );
+});
+
+FormTextInput.displayName = 'Form.TextInput';
+export default FormTextInput;

package/src/Form/index.native.ts

@@ -0,0 +1,35 @@
+import FormComponent from './Form.native';
+import FormTextInput from './fields/FormTextInput';
+import FormTextArea from './fields/FormTextArea';
+import FormSelect from './fields/FormSelect';
+import FormCheckbox from './fields/FormCheckbox';
+import FormRadioGroup from './fields/FormRadioGroup';
+import FormSwitch from './fields/FormSwitch';
+import FormSlider from './fields/FormSlider';
+import FormField from './fields/FormField';
+
+type FormType = typeof FormComponent & {
+  TextInput: typeof FormTextInput;
+  TextArea: typeof FormTextArea;
+  Select: typeof FormSelect;
+  Checkbox: typeof FormCheckbox;
+  RadioGroup: typeof FormRadioGroup;
+  Switch: typeof FormSwitch;
+  Slider: typeof FormSlider;
+  Field: typeof FormField;
+};
+
+const Form = FormComponent as FormType;
+Form.TextInput = FormTextInput;
+Form.TextArea = FormTextArea;
+Form.Select = FormSelect;
+Form.Checkbox = FormCheckbox;
+Form.RadioGroup = FormRadioGroup;
+Form.Switch = FormSwitch;
+Form.Slider = FormSlider;
+Form.Field = FormField;
+
+export default Form;
+export { Form };
+export { useForm } from './useForm';
+export * from './types';

package/src/Form/index.ts

@@ -0,0 +1,35 @@
+import FormComponent from './Form.web';
+import FormTextInput from './fields/FormTextInput';
+import FormTextArea from './fields/FormTextArea';
+import FormSelect from './fields/FormSelect';
+import FormCheckbox from './fields/FormCheckbox';
+import FormRadioGroup from './fields/FormRadioGroup';
+import FormSwitch from './fields/FormSwitch';
+import FormSlider from './fields/FormSlider';
+import FormField from './fields/FormField';
+
+type FormType = typeof FormComponent & {
+  TextInput: typeof FormTextInput;
+  TextArea: typeof FormTextArea;
+  Select: typeof FormSelect;
+  Checkbox: typeof FormCheckbox;
+  RadioGroup: typeof FormRadioGroup;
+  Switch: typeof FormSwitch;
+  Slider: typeof FormSlider;
+  Field: typeof FormField;
+};
+
+const Form = FormComponent as FormType;
+Form.TextInput = FormTextInput;
+Form.TextArea = FormTextArea;
+Form.Select = FormSelect;
+Form.Checkbox = FormCheckbox;
+Form.RadioGroup = FormRadioGroup;
+Form.Switch = FormSwitch;
+Form.Slider = FormSlider;
+Form.Field = FormField;
+
+export default Form;
+export { Form };
+export { useForm } from './useForm';
+export * from './types';

package/src/Form/index.web.ts

@@ -0,0 +1,35 @@
+import FormComponent from './Form.web';
+import FormTextInput from './fields/FormTextInput';
+import FormTextArea from './fields/FormTextArea';
+import FormSelect from './fields/FormSelect';
+import FormCheckbox from './fields/FormCheckbox';
+import FormRadioGroup from './fields/FormRadioGroup';
+import FormSwitch from './fields/FormSwitch';
+import FormSlider from './fields/FormSlider';
+import FormField from './fields/FormField';
+
+type FormType = typeof FormComponent & {
+  TextInput: typeof FormTextInput;
+  TextArea: typeof FormTextArea;
+  Select: typeof FormSelect;
+  Checkbox: typeof FormCheckbox;
+  RadioGroup: typeof FormRadioGroup;
+  Switch: typeof FormSwitch;
+  Slider: typeof FormSlider;
+  Field: typeof FormField;
+};
+
+const Form = FormComponent as FormType;
+Form.TextInput = FormTextInput;
+Form.TextArea = FormTextArea;
+Form.Select = FormSelect;
+Form.Checkbox = FormCheckbox;
+Form.RadioGroup = FormRadioGroup;
+Form.Switch = FormSwitch;
+Form.Slider = FormSlider;
+Form.Field = FormField;
+
+export default Form;
+export { Form };
+export { useForm } from './useForm';
+export * from './types';

package/src/Form/types.ts

@@ -0,0 +1,105 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { TextInputProps } from '../TextInput/types';
+import type { TextAreaProps } from '../TextArea/types';
+import type { SelectProps } from '../Select/types';
+import type { CheckboxProps } from '../Checkbox/types';
+import type { RadioGroupProps } from '../RadioButton/types';
+import type { SwitchProps } from '../Switch/types';
+import type { SliderProps } from '../Slider/types';
+
+export type FieldValue = string | number | boolean | undefined;
+export type FormValues = Record<string, FieldValue>;
+export type FormErrors<T extends FormValues = FormValues> = Partial<Record<keyof T, string>>;
+
+export type ValidateFunction<T extends FormValues = FormValues> = (
+  values: T
+) => FormErrors<T> | undefined | void;
+
+export interface UseFormOptions<T extends FormValues = FormValues> {
+  initialValues: T;
+  validate?: ValidateFunction<T>;
+  validateOn?: 'onBlur' | 'onChange' | 'onSubmit';
+  onSubmit: (values: T) => void | Promise<void>;
+  disabled?: boolean;
+}
+
+export interface UseFormReturn<T extends FormValues = FormValues> {
+  values: T;
+  errors: FormErrors<T>;
+  touched: Partial<Record<keyof T, boolean>>;
+  isSubmitting: boolean;
+  isDirty: boolean;
+  isValid: boolean;
+  submitCount: number;
+  disabled: boolean;
+
+  getValue: (name: keyof T) => T[keyof T];
+  setValue: (name: keyof T, value: T[keyof T]) => void;
+  setTouched: (name: keyof T) => void;
+  getError: (name: keyof T) => string | undefined;
+  setError: (name: keyof T, error: string | undefined) => void;
+
+  handleSubmit: () => void | Promise<void>;
+  reset: (nextValues?: Partial<T>) => void;
+
+  registerField: (name: keyof T, ref: React.RefObject<any>, order?: number) => void;
+  unregisterField: (name: keyof T) => void;
+  focusNextField: (currentName: keyof T) => void;
+  isLastTextField: (name: keyof T) => boolean;
+}
+
+export interface FormContextValue<T extends FormValues = FormValues> {
+  form: UseFormReturn<T>;
+}
+
+export interface FieldRenderProps {
+  value: FieldValue;
+  onChange: (value: FieldValue) => void;
+  onBlur: () => void;
+  error: string | undefined;
+  touched: boolean;
+  dirty: boolean;
+  disabled: boolean;
+  name: string;
+}
+
+export interface FormProps {
+  form: UseFormReturn<any>;
+  children: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+  id?: string;
+}
+
+// Form field wrapper props - Omit the props that Form wires automatically
+export interface FormFieldBaseProps {
+  name: string;
+}
+
+export interface FormTextInputProps extends FormFieldBaseProps,
+  Omit<TextInputProps, 'value' | 'onChangeText' | 'onBlur' | 'error' | 'hasError'> {
+  tabOrder?: number;
+}
+
+export interface FormTextAreaProps extends FormFieldBaseProps,
+  Omit<TextAreaProps, 'value' | 'onChange' | 'error'> {}
+
+export interface FormSelectProps extends FormFieldBaseProps,
+  Omit<SelectProps, 'value' | 'onChange' | 'error'> {}
+
+export interface FormCheckboxProps extends FormFieldBaseProps,
+  Omit<CheckboxProps, 'checked' | 'onChange' | 'error'> {}
+
+export interface FormRadioGroupProps extends FormFieldBaseProps,
+  Omit<RadioGroupProps, 'value' | 'onValueChange' | 'error'> {}
+
+export interface FormSwitchProps extends FormFieldBaseProps,
+  Omit<SwitchProps, 'checked' | 'onChange' | 'error'> {}
+
+export interface FormSliderProps extends FormFieldBaseProps,
+  Omit<SliderProps, 'value' | 'onChange' | 'error'> {}
+
+export interface FormFieldProps extends FormFieldBaseProps {
+  children: (field: FieldRenderProps) => ReactNode;
+}