@webority-technologies/mobile-ui 0.0.1

package/lib/module/form/useField.js

@@ -0,0 +1,49 @@
+"use strict";
+
+import { useFormContext } from "./FormContext.js";
+import { getPath } from "./path.js";
+/**
+ * Bind a single field by name. Returns everything an input needs; pick the
+ * handler your control uses:
+ *   const email = useField('email');
+ *   <Input value={email.value} onChangeText={email.onChangeText} onBlur={email.onBlur} error={email.error} />
+ *   <Select value={country.value} onChange={country.onChange} error={country.error} />
+ *   <Switch value={!!agree.value} onChange={agree.onChange} />
+ */
+export function useField(name) {
+  const form = useFormContext();
+  return form.getFieldProps(name);
+}
+/**
+ * Manage a repeating list field (phone numbers, line items, etc.) by name.
+ * Each helper writes the whole array back through the form so validation and
+ * dirty-tracking stay correct.
+ */
+export function useFieldArray(name) {
+  const form = useFormContext();
+  const fields = getPath(form.values, name) ?? [];
+  const set = next => form.setFieldValue(name, next);
+  return {
+    fields,
+    length: fields.length,
+    push: item => set([...fields, item]),
+    remove: index => set(fields.filter((_, i) => i !== index)),
+    insert: (index, item) => {
+      const copy = [...fields];
+      copy.splice(index, 0, item);
+      set(copy);
+    },
+    move: (from, to) => {
+      const copy = [...fields];
+      const [moved] = copy.splice(from, 1);
+      copy.splice(to, 0, moved);
+      set(copy);
+    },
+    replace: (index, item) => {
+      const copy = [...fields];
+      copy[index] = item;
+      set(copy);
+    }
+  };
+}
+//# sourceMappingURL=useField.js.map

package/lib/module/form/useForm.js

@@ -0,0 +1,360 @@
+"use strict";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { getPath, setPath } from "./path.js";
+// Loosely typed (Values -> any) so the generic schema from any useForm<Values>
+// instance flows in without variance friction; callers re-apply Values at use.
+const rulesFor = (validate, name) => {
+  if (!validate || typeof validate === 'function') {
+    return [];
+  }
+  const r = validate[name];
+  if (!r) {
+    return [];
+  }
+  return Array.isArray(r) ? r : [r];
+};
+
+/**
+ * Dependency-free form engine. Tracks values/errors/touched/dirty, runs
+ * synchronous and async validation (per-field rule maps or a form-level
+ * function), gates error display behind touched/submit, and on a failed submit
+ * focuses the first errored field. The returned object is rebuilt every render
+ * so `<Form>` consumers re-render on state changes.
+ */
+export function useForm(config) {
+  const configRef = useRef(config);
+  configRef.current = config;
+  const initialRef = useRef(config.initialValues);
+  const [values, setValuesState] = useState(config.initialValues);
+  const [errors, setErrorsState] = useState({});
+  const [touched, setTouchedState] = useState({});
+  const [isSubmitting, setSubmitting] = useState(false);
+  const [isValidating, setValidating] = useState(false);
+  const [submitCount, setSubmitCount] = useState(0);
+
+  // Mirror of the latest state so handlers (incl. async) never read stale
+  // closures and sequential setFieldValue calls in one tick compound correctly.
+  const ref = useRef({
+    values,
+    errors,
+    touched,
+    submitCount
+  });
+  ref.current = {
+    values,
+    errors,
+    touched,
+    submitCount
+  };
+  const fieldNodes = useRef(new Map());
+  const fieldOrder = useRef([]);
+  const focusedFieldRef = useRef(null);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: `JSON.stringify(config.initialValues)` is the dependency by design so reinitialize compares by value, not by object identity
+  useEffect(() => {
+    if (!configRef.current.enableReinitialize) {
+      return;
+    }
+    const next = configRef.current.initialValues;
+    initialRef.current = next;
+    ref.current.values = next;
+    ref.current.errors = {};
+    ref.current.touched = {};
+    setValuesState(next);
+    setErrorsState({});
+    setTouchedState({});
+  }, [JSON.stringify(config.initialValues)]);
+  const validateField = useCallback(async name => {
+    const validate = configRef.current.validate;
+    const allValues = ref.current.values;
+    if (typeof validate === 'function') {
+      const map = (await validate(allValues)) ?? {};
+      return map[name] || undefined;
+    }
+    const value = getPath(allValues, name);
+    for (const rule of rulesFor(validate, name)) {
+      const res = await rule(value, allValues);
+      if (res) {
+        return res;
+      }
+    }
+    return undefined;
+  }, []);
+  const runAll = useCallback(async vals => {
+    const validate = configRef.current.validate;
+    if (!validate) {
+      return {};
+    }
+    if (typeof validate === 'function') {
+      return (await validate(vals)) ?? {};
+    }
+    const out = {};
+    await Promise.all(Object.keys(validate).map(async name => {
+      const value = getPath(vals, name);
+      for (const rule of rulesFor(validate, name)) {
+        const res = await rule(value, vals);
+        if (res) {
+          out[name] = res;
+          break;
+        }
+      }
+    }));
+    return out;
+  }, []);
+  const revalidateField = useCallback(async name => {
+    const err = await validateField(name);
+    setErrorsState(prev => {
+      if (prev[name] === err) {
+        return prev;
+      }
+      const next = {
+        ...prev
+      };
+      if (err) {
+        next[name] = err;
+      } else {
+        delete next[name];
+      }
+      ref.current.errors = next;
+      return next;
+    });
+  }, [validateField]);
+  const validate = useCallback(async () => {
+    setValidating(true);
+    const errs = await runAll(ref.current.values);
+    setValidating(false);
+    ref.current.errors = errs;
+    setErrorsState(errs);
+    return errs;
+  }, [runAll]);
+  const setFieldValue = useCallback((name, value, shouldValidate) => {
+    const next = setPath(ref.current.values, name, value);
+    ref.current.values = next;
+    setValuesState(next);
+    const cfg = configRef.current;
+    // `revalidateOn: 'blur'` means a field that has ALREADY surfaced an error
+    // stops re-checking on every keystroke and waits for blur — without this
+    // the option was declared, documented and ignored.
+    const alreadyErrored = Boolean(ref.current.errors[name]);
+    const deferToBlur = alreadyErrored && cfg.revalidateOn === 'blur';
+    const willValidate = shouldValidate ?? (!deferToBlur && (ref.current.touched[name] || ref.current.submitCount > 0 || cfg.validateOn === 'change'));
+    if (willValidate) {
+      void revalidateField(name);
+    }
+  }, [revalidateField]);
+  const handleBlur = useCallback(name => {
+    setTouchedState(prev => {
+      if (prev[name]) {
+        return prev;
+      }
+      const next = {
+        ...prev,
+        [name]: true
+      };
+      ref.current.touched = next;
+      return next;
+    });
+    // Blur is the natural moment to surface a field's error.
+    void revalidateField(name);
+  }, [revalidateField]);
+  const setFieldTouched = useCallback((name, isTouched = true, shouldValidate) => {
+    const next = {
+      ...ref.current.touched,
+      [name]: isTouched
+    };
+    ref.current.touched = next;
+    setTouchedState(next);
+    if (shouldValidate ?? isTouched) {
+      void revalidateField(name);
+    }
+  }, [revalidateField]);
+  const setFieldError = useCallback((name, error) => {
+    setErrorsState(prev => {
+      const next = {
+        ...prev
+      };
+      if (error) {
+        next[name] = error;
+      } else {
+        delete next[name];
+      }
+      ref.current.errors = next;
+      return next;
+    });
+  }, []);
+  const setErrors = useCallback(errs => {
+    ref.current.errors = errs;
+    setErrorsState(errs);
+  }, []);
+  const setValues = useCallback((next, shouldValidate) => {
+    const resolved = typeof next === 'function' ? next(ref.current.values) : {
+      ...ref.current.values,
+      ...next
+    };
+    ref.current.values = resolved;
+    setValuesState(resolved);
+    if (shouldValidate) {
+      void validate();
+    }
+  }, [validate]);
+  const reset = useCallback(nextValues => {
+    const base = nextValues ? {
+      ...initialRef.current,
+      ...nextValues
+    } : initialRef.current;
+    initialRef.current = base;
+    ref.current.values = base;
+    ref.current.errors = {};
+    ref.current.touched = {};
+    ref.current.submitCount = 0;
+    setValuesState(base);
+    setErrorsState({});
+    setTouchedState({});
+    setSubmitCount(0);
+  }, []);
+  const registerField = useCallback((name, node) => {
+    if (node) {
+      fieldNodes.current.set(name, node);
+      if (!fieldOrder.current.includes(name)) {
+        fieldOrder.current.push(name);
+      }
+    } else {
+      fieldNodes.current.delete(name);
+      fieldOrder.current = fieldOrder.current.filter(n => n !== name);
+    }
+  }, []);
+  const handleFocus = useCallback(name => {
+    focusedFieldRef.current = name;
+  }, []);
+  const focusAdjacent = useCallback(direction => {
+    const order = fieldOrder.current;
+    const current = focusedFieldRef.current;
+    const index = current ? order.indexOf(current) : -1;
+    const target = order[index + direction];
+    if (!target) {
+      return;
+    }
+    focusedFieldRef.current = target;
+    fieldNodes.current.get(target)?.focus?.();
+  }, []);
+  const focusNext = useCallback(() => focusAdjacent(1), [focusAdjacent]);
+  const focusPrev = useCallback(() => focusAdjacent(-1), [focusAdjacent]);
+  const helpers = useMemo(() => ({
+    setErrors,
+    setFieldError,
+    reset,
+    setSubmitting
+  }), [setErrors, setFieldError, reset]);
+  const submit = useCallback(() => {
+    void (async () => {
+      const cfg = configRef.current;
+      const currentValues = ref.current.values;
+      ref.current.submitCount += 1;
+      setSubmitCount(c => c + 1);
+      setValidating(true);
+      const errs = await runAll(currentValues);
+      setValidating(false);
+      const keys = new Set([...fieldOrder.current, ...Object.keys(errs)]);
+      const nextTouched = {
+        ...ref.current.touched
+      };
+      keys.forEach(k => {
+        nextTouched[k] = true;
+      });
+      ref.current.touched = nextTouched;
+      ref.current.errors = errs;
+      setTouchedState(nextTouched);
+      setErrorsState(errs);
+      const firstError = fieldOrder.current.find(n => errs[n]) ?? Object.keys(errs).find(n => errs[n]);
+      if (firstError) {
+        fieldNodes.current.get(firstError)?.focus?.();
+        return;
+      }
+      setSubmitting(true);
+      try {
+        await cfg.onSubmit(currentValues, helpers);
+      } finally {
+        setSubmitting(false);
+      }
+    })();
+  }, [runAll, helpers]);
+  const uiErrors = useMemo(() => {
+    const gated = {};
+    for (const k of Object.keys(errors)) {
+      if (errors[k] && (touched[k] || submitCount > 0)) {
+        gated[k] = errors[k];
+      }
+    }
+    return gated;
+  }, [errors, touched, submitCount]);
+  const isValid = useMemo(() => {
+    const validateCfg = configRef.current.validate;
+    if (!validateCfg) {
+      return true;
+    }
+    // Form-level async fn can't run synchronously — fall back to known errors.
+    if (typeof validateCfg === 'function') {
+      return Object.values(errors).every(e => !e);
+    }
+    for (const name of Object.keys(validateCfg)) {
+      const value = getPath(values, name);
+      for (const rule of rulesFor(validateCfg, name)) {
+        const res = rule(value, values);
+        if (typeof res === 'string' && res) {
+          return false; // async rules (Promise) are skipped here
+        }
+      }
+    }
+    return true;
+  }, [values, errors]);
+  const dirty = useMemo(() => JSON.stringify(values) !== JSON.stringify(initialRef.current), [values]);
+  return {
+    values,
+    errors: uiErrors,
+    rawErrors: errors,
+    touched,
+    dirty,
+    isValid,
+    isSubmitting,
+    isValidating,
+    submitCount,
+    setFieldValue,
+    setFieldTouched,
+    setFieldError,
+    setValues,
+    setErrors,
+    reset,
+    validate,
+    validateField,
+    submit,
+    handleBlur,
+    focusNext,
+    focusPrev,
+    registerField,
+    getFieldState: name => {
+      const value = getPath(values, name);
+      const rawError = errors[name];
+      const isTouched = !!touched[name];
+      return {
+        value,
+        error: isTouched || submitCount > 0 ? rawError : undefined,
+        rawError,
+        touched: isTouched,
+        dirty: JSON.stringify(value) !== JSON.stringify(getPath(initialRef.current, name))
+      };
+    },
+    getFieldProps: name => ({
+      name,
+      value: getPath(values, name),
+      error: touched[name] || submitCount > 0 ? errors[name] : undefined,
+      touched: !!touched[name],
+      onChange: val => setFieldValue(name, val),
+      onChangeText: text => setFieldValue(name, text),
+      onBlur: () => handleBlur(name),
+      onFocus: () => handleFocus(name),
+      setValue: (val, sv) => setFieldValue(name, val, sv)
+    })
+  };
+}
+//# sourceMappingURL=useForm.js.map

package/lib/module/hooks/index.js

@@ -0,0 +1,8 @@
+"use strict";
+
+export { useControllableState } from "./useControllableState.js";
+export { useDebounce } from "./useDebounce.js";
+export { usePressAnimation } from "./usePressAnimation.js";
+export { useReducedMotion } from "./useReducedMotion.js";
+export { useToggle } from "./useToggle.js";
+//# sourceMappingURL=index.js.map

package/lib/module/hooks/useControllableState.js

@@ -0,0 +1,28 @@
+"use strict";
+
+import { useCallback, useRef, useState } from 'react';
+/**
+ * Bridges controlled and uncontrolled usage for a value+onChange pair. When
+ * `value` is provided the component is controlled (the hook just forwards it
+ * and calls `onChange`); otherwise the hook owns the state, seeded from
+ * `defaultValue`. The controlled/uncontrolled decision is locked on first
+ * render so a component never flips modes mid-life.
+ */
+export function useControllableState({
+  value,
+  defaultValue,
+  onChange
+}) {
+  const isControlledRef = useRef(value !== undefined);
+  const isControlled = isControlledRef.current;
+  const [internal, setInternal] = useState(defaultValue);
+  const current = isControlled ? value : internal;
+  const setValue = useCallback(next => {
+    if (!isControlled) {
+      setInternal(next);
+    }
+    onChange?.(next);
+  }, [isControlled, onChange]);
+  return [current, setValue];
+}
+//# sourceMappingURL=useControllableState.js.map

package/lib/module/hooks/useDebounce.js

@@ -0,0 +1,12 @@
+"use strict";
+
+import { useEffect, useState } from 'react';
+export const useDebounce = (value, delay = 300) => {
+  const [debounced, setDebounced] = useState(value);
+  useEffect(() => {
+    const handle = setTimeout(() => setDebounced(value), delay);
+    return () => clearTimeout(handle);
+  }, [value, delay]);
+  return debounced;
+};
+//# sourceMappingURL=useDebounce.js.map

package/lib/module/hooks/usePressAnimation.js

@@ -0,0 +1,42 @@
+"use strict";
+
+import { useCallback, useRef } from 'react';
+import { Animated, Easing } from 'react-native';
+import { useTheme } from "../theme/index.js";
+export const usePressAnimation = ({
+  scaleTo = 0.97,
+  pressDuration,
+  enabled = true
+} = {}) => {
+  const theme = useTheme();
+  const scale = useRef(new Animated.Value(1)).current;
+  const pressIn = useCallback(() => {
+    if (!enabled) {
+      return;
+    }
+    Animated.timing(scale, {
+      toValue: scaleTo,
+      duration: pressDuration ?? theme.motion.duration.fast,
+      easing: Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: true
+    }).start();
+  }, [enabled, scale, scaleTo, pressDuration, theme]);
+  const pressOut = useCallback(() => {
+    if (!enabled) {
+      return;
+    }
+    Animated.spring(scale, {
+      toValue: 1,
+      damping: theme.motion.spring.snappy.damping,
+      stiffness: theme.motion.spring.snappy.stiffness,
+      mass: theme.motion.spring.snappy.mass,
+      useNativeDriver: true
+    }).start();
+  }, [enabled, scale, theme]);
+  return {
+    scale,
+    pressIn,
+    pressOut
+  };
+};
+//# sourceMappingURL=usePressAnimation.js.map

package/lib/module/hooks/useReducedMotion.js

@@ -0,0 +1,29 @@
+"use strict";
+
+import { useEffect, useState } from 'react';
+import { AccessibilityInfo } from 'react-native';
+
+/**
+ * Tracks the OS "Reduce Motion" accessibility setting. The library's
+ * ThemeProvider uses this to collapse `theme.motion` (durations → 0, springs →
+ * near-instant) so animations don't trigger vestibular discomfort; consumers
+ * can also read it directly to swap an animated path for a static one.
+ */
+export const useReducedMotion = () => {
+  const [reduced, setReduced] = useState(false);
+  useEffect(() => {
+    let mounted = true;
+    AccessibilityInfo.isReduceMotionEnabled().then(value => {
+      if (mounted) {
+        setReduced(value);
+      }
+    });
+    const sub = AccessibilityInfo.addEventListener('reduceMotionChanged', value => setReduced(value));
+    return () => {
+      mounted = false;
+      sub.remove();
+    };
+  }, []);
+  return reduced;
+};
+//# sourceMappingURL=useReducedMotion.js.map

package/lib/module/hooks/useToggle.js

@@ -0,0 +1,17 @@
+"use strict";
+
+import { useCallback, useState } from 'react';
+export const useToggle = (initial = false) => {
+  const [value, setValue] = useState(initial);
+  const toggle = useCallback(() => setValue(v => !v), []);
+  const setOn = useCallback(() => setValue(true), []);
+  const setOff = useCallback(() => setValue(false), []);
+  return {
+    value,
+    toggle,
+    setOn,
+    setOff,
+    setValue
+  };
+};
+//# sourceMappingURL=useToggle.js.map

package/lib/module/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+// Components
+export * from "./components/index.js";
+// Form engine (dependency-free; replaces Formik + Yup)
+export { deletePath, Form, getPath, rules, setPath, useField, useFieldArray, useForm, useFormContext, useOptionalFormContext } from "./form/index.js";
+// Hooks
+export { useControllableState, useDebounce, usePressAnimation, useReducedMotion, useToggle } from "./hooks/index.js";
+// Initialization
+export { initUI } from "./initUI.js";
+// Network UI
+export { NetworkStatusBanner } from "./network/index.js";
+// Theme
+export { darkTheme, getColorMode, getTheme, lightTheme, mergeTheme, resetTheme, setColorMode, setTheme, subscribeTheme, ThemeProvider, useTheme, useThemeMode } from "./theme/index.js";
+// Utils
+export { Breakpoints, configureFeedback, feedback, hapticForIntent, isFeedbackEnabled, isScreenSize, isTablet, Margin, Padding, Responsive, ScreenDimensions, Spacing, setHapticImplementation, shadowStyle, triggerHaptic, warnUnknownProps } from "./utils/index.js";
+//# sourceMappingURL=index.js.map

package/lib/module/initUI.js

@@ -0,0 +1,19 @@
+"use strict";
+
+import { setColorMode, setTheme } from "./theme/index.js";
+/**
+ * Configure the global functional theme API used outside of React tree
+ * (use ThemeProvider for React-tree consumers; both can coexist).
+ */
+export const initUI = (options = {}) => {
+  if (options.defaultMode) {
+    setColorMode(options.defaultMode);
+  }
+  if (options.light) {
+    setTheme(options.light, 'light');
+  }
+  if (options.dark) {
+    setTheme(options.dark, 'dark');
+  }
+};
+//# sourceMappingURL=initUI.js.map

package/lib/module/network/NetworkStatusBanner.js

@@ -0,0 +1,83 @@
+"use strict";
+
+import { useNetworkStatus } from '@webority-technologies/mobile-core';
+import React, { useEffect, useMemo, useRef } from 'react';
+import { Animated, StyleSheet, Text } from 'react-native';
+import { useTheme } from "../theme/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A subtle animated banner that slides in when the device goes offline.
+ * Mount once near the app root (above your navigation tree).
+ */
+export const NetworkStatusBanner = ({
+  message = 'You are offline. Some features may be unavailable.',
+  position = 'top',
+  style,
+  disabled = false
+}) => {
+  const theme = useTheme();
+  const {
+    isConnected,
+    isInternetReachable
+  } = useNetworkStatus();
+  const offline = !disabled && (!isConnected || isInternetReachable === false);
+  const slide = useRef(new Animated.Value(0)).current;
+  const opacity = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    Animated.parallel([Animated.timing(slide, {
+      toValue: offline ? 1 : 0,
+      duration: theme.motion.duration.normal,
+      useNativeDriver: true
+    }), Animated.timing(opacity, {
+      toValue: offline ? 1 : 0,
+      duration: theme.motion.duration.normal,
+      useNativeDriver: true
+    })]).start();
+  }, [offline, slide, opacity, theme.motion.duration.normal]);
+  const styles = useMemo(() => buildStyles(), []);
+  const translateY = slide.interpolate({
+    inputRange: [0, 1],
+    outputRange: [position === 'top' ? -56 : 56, 0]
+  });
+  return /*#__PURE__*/_jsx(Animated.View, {
+    pointerEvents: offline ? 'auto' : 'none',
+    accessibilityRole: "alert",
+    accessibilityLiveRegion: offline ? 'polite' : 'none',
+    style: [styles.container, position === 'top' ? styles.top : styles.bottom, {
+      backgroundColor: theme.colors.error,
+      opacity,
+      transform: [{
+        translateY
+      }]
+    }, style],
+    children: /*#__PURE__*/_jsx(Text, {
+      style: {
+        color: theme.colors.text.inverse,
+        fontSize: theme.typography.fontSize.sm,
+        fontWeight: theme.typography.fontWeight.semibold,
+        textAlign: 'center'
+      },
+      numberOfLines: 2,
+      children: message
+    })
+  });
+};
+const buildStyles = () => StyleSheet.create({
+  container: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    zIndex: 1000,
+    elevation: 8
+  },
+  top: {
+    top: 0
+  },
+  bottom: {
+    bottom: 0
+  }
+});
+export default NetworkStatusBanner;
+//# sourceMappingURL=NetworkStatusBanner.js.map

package/lib/module/network/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { NetworkStatusBanner } from "./NetworkStatusBanner.js";
+//# sourceMappingURL=index.js.map

package/lib/module/package.json

@@ -0,0 +1 @@
+{"type":"module"}