@webority-technologies/mobile 0.0.21 → 0.0.23

package/lib/module/form/useForm.js

@@ -0,0 +1,312 @@
+"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);
+  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({});
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [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;
+    const willValidate = shouldValidate ?? (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

@@ -3,4 +3,6 @@
 export { useToggle } from "./useToggle.js";
 export { useDebounce } from "./useDebounce.js";
 export { usePressAnimation } from "./usePressAnimation.js";
+export { useReducedMotion } from "./useReducedMotion.js";
+export { useControllableState } from "./useControllableState.js";
 //# sourceMappingURL=index.js.map

package/lib/module/hooks/useControllableState.js

@@ -0,0 +1,26 @@
+"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/useReducedMotion.js

@@ -0,0 +1,27 @@
+"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/index.js

@@ -21,13 +21,15 @@ export { VersionCheck, useVersionCheck } from "./versionCheck/index.js";
 // Theme
 export { ThemeProvider, useTheme, useThemeMode, setTheme, setColorMode, getColorMode, getTheme, resetTheme, subscribeTheme, mergeTheme, lightTheme, darkTheme } from "./theme/index.js";
 // Hooks
-export { useToggle, useDebounce, usePressAnimation } from "./hooks/index.js";
+export { useToggle, useDebounce, usePressAnimation, useReducedMotion, useControllableState } from "./hooks/index.js";
 // Utils
 export { ScreenDimensions, Breakpoints, Responsive, isScreenSize, isTablet, Spacing, Padding, Margin, triggerHaptic, setHapticImplementation, shadowStyle, compressImage } from "./utils/index.js";
 // Formatters
 export { formatDate, formatTime, formatDateTime, formatRelativeTime, formatPhone, normalizePhone, formatCurrency, formatNumber, formatPercent, formatCompactNumber, getInitials } from "./formatters/index.js";
 // Validators
 export { isNonEmpty, isEmail, isIndianMobile, isPhone, isUrl, isNumeric, isInteger, isAlphanumeric, isStrongPassword, isIndianPincode, isPan, isGstin, isAadhaar, isIfsc, isHexColor, isBetween, minLength, maxLength } from "./validators/index.js";
+// Form engine (dependency-free; replaces Formik + Yup)
+export { useForm, useField, useFieldArray, Form, useFormContext, useOptionalFormContext, rules, getPath, setPath, deletePath } from "./form/index.js";
 // Network
 export { useNetworkStatus, getNetworkStatus, addNetworkStatusListener, NetworkStatusBanner } from "./network/index.js";
 // Permissions

package/lib/module/theme/ThemeContext.js

@@ -4,7 +4,30 @@ import React, { createContext, useContext, useEffect, useMemo, useState } from '
 import { Appearance } from 'react-native';
 import { darkTheme, lightTheme } from "./tokens.js";
 import { mergeTheme } from "./merge.js";
+import { useReducedMotion } from "../hooks/useReducedMotion.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+const REDUCED_SPRING = {
+  damping: 100,
+  stiffness: 1000,
+  mass: 1
+};
+// Reduce Motion: collapse timed animations to instant and make springs settle in
+// ~1 frame, so vestibular-sensitive users aren't subjected to slides/scales/bounces.
+const collapseMotion = motion => ({
+  ...motion,
+  duration: {
+    instant: 0,
+    fast: 0,
+    normal: 0,
+    slow: 0,
+    slower: 0
+  },
+  spring: {
+    gentle: REDUCED_SPRING,
+    bouncy: REDUCED_SPRING,
+    snappy: REDUCED_SPRING
+  }
+});
 const defaultValue = {
   theme: lightTheme,
   mode: 'light',
@@ -30,11 +53,16 @@ export const ThemeProvider = ({
     return () => sub.remove();
   }, []);
   const mode = preference === 'system' ? systemMode : preference;
+  const reduceMotion = useReducedMotion();
   const theme = useMemo(() => {
     const base = mode === 'dark' ? darkTheme : lightTheme;
     const overrides = mode === 'dark' ? darkOverrides : lightOverrides;
-    return overrides ? mergeTheme(base, overrides) : base;
-  }, [mode, lightOverrides, darkOverrides]);
+    const merged = overrides ? mergeTheme(base, overrides) : base;
+    return reduceMotion ? {
+      ...merged,
+      motion: collapseMotion(merged.motion)
+    } : merged;
+  }, [mode, lightOverrides, darkOverrides, reduceMotion]);
   const value = useMemo(() => ({
     theme,
     mode,

package/lib/module/theme/tokens.js

@@ -521,6 +521,12 @@ export const lightTheme = {
     warning: '#F59E0B',
     error: '#E5484D',
     info: '#3B82F6',
+    onPrimary: '#FFFFFF',
+    onSecondary: '#0F0F1A',
+    onSuccess: '#FFFFFF',
+    onWarning: '#0F0F1A',
+    onError: '#FFFFFF',
+    onInfo: '#FFFFFF',
     text: {
       primary: '#0F0F1A',
       secondary: '#52525B',
@@ -576,6 +582,12 @@ export const darkTheme = {
     warning: '#FBBF24',
     error: '#F87171',
     info: '#60A5FA',
+    onPrimary: '#0F0F1A',
+    onSecondary: '#FAFAFA',
+    onSuccess: '#0F0F1A',
+    onWarning: '#0F0F1A',
+    onError: '#0F0F1A',
+    onInfo: '#0F0F1A',
     text: {
       primary: '#FAFAFA',
       secondary: '#B4B4BB',

package/lib/typescript/commonjs/components/BottomNavigation/BottomNavigation.d.ts

@@ -20,7 +20,7 @@ export interface TabConfig {
 export interface BottomNavigationProps {
     tabs: TabConfig[];
     activeTab: string;
-    onTabPress: (tabKey: string) => void;
+    onChange: (tabKey: string) => void;
     haptic?: HapticType | false;
     showLabels?: boolean;
     variant?: BottomNavigationVariant;

package/lib/typescript/commonjs/components/BottomSheet/BottomSheet.d.ts

@@ -56,6 +56,23 @@ export interface BottomSheetProps {
     mode?: BottomSheetMode;
     handleIndicatorStyle?: StyleProp<ViewStyle>;
     containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Sticky region rendered between the drag handle and the scrollable content.
+     * Does not scroll with `children`. Can call `useBottomSheet()` to read sheet
+     * state.
+     */
+    header?: React.ReactNode;
+    /**
+     * Sticky region pinned to the bottom of the sheet, above the safe-area
+     * inset. Does not scroll with `children`, and rides up with the keyboard
+     * when `keyboardBehavior='shift'` (no extra wiring needed — the whole sheet
+     * shifts). Typical use: action button rows.
+     */
+    footer?: React.ReactNode;
+    /** Style applied to the header region wrapper. */
+    headerStyle?: StyleProp<ViewStyle>;
+    /** Style applied to the footer region wrapper. */
+    footerStyle?: StyleProp<ViewStyle>;
     children?: React.ReactNode;
     accessibilityLabel?: string;
     accessibilityViewIsModal?: boolean;
@@ -66,6 +83,30 @@ export interface BottomSheetRef {
     collapse: () => void;
     close: () => void;
 }
+/**
+ * State + actions exposed to anything rendered inside a `<BottomSheet>` —
+ * including the `header` and `footer` slots. Read via `useBottomSheet()`.
+ *
+ * `snapIndex` is the JS-thread mirror of the current snap point. -1 means the
+ * sheet is closed (mid-close-animation included). Use it to drive footer
+ * button enable state, conditional headers, etc. If you need per-frame
+ * progress (e.g. fade a header in as the sheet expands), reach for the
+ * animated value via a future enhancement — not exposed today to keep the
+ * surface minimal.
+ */
+export interface BottomSheetContextValue {
+    snapIndex: number;
+    snapPoints: number[];
+    expand: (index?: number) => void;
+    collapse: () => void;
+    close: () => void;
+}
+/**
+ * Access the enclosing `<BottomSheet>`'s state and imperative actions.
+ * Must be called from a component rendered inside a `<BottomSheet>` (as
+ * `children`, `header`, or `footer`).
+ */
+export declare const useBottomSheet: () => BottomSheetContextValue;
 declare const BottomSheet: React.ForwardRefExoticComponent<BottomSheetProps & React.RefAttributes<BottomSheetRef>>;
 export { BottomSheet };
 export default BottomSheet;

package/lib/typescript/commonjs/components/BottomSheet/index.d.ts

@@ -1,3 +1,3 @@
-export { BottomSheet, default } from './BottomSheet';
-export type { BottomSheetProps, BottomSheetRef, SnapPoint } from './BottomSheet';
+export { BottomSheet, default, useBottomSheet } from './BottomSheet';
+export type { BottomSheetContextValue, BottomSheetProps, BottomSheetRef, SnapPoint } from './BottomSheet';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/commonjs/components/Box/Box.d.ts

@@ -0,0 +1,60 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
+import type { ColorPalette, RadiusScale, SpacingScale, Theme } from '../../theme/types';
+export type SpacingToken = keyof SpacingScale;
+export type RadiusToken = keyof RadiusScale;
+export type BackgroundToken = keyof ColorPalette['background'];
+export interface BoxProps extends ViewProps {
+    /** padding (all sides) */
+    p?: SpacingToken;
+    /** paddingHorizontal */
+    px?: SpacingToken;
+    /** paddingVertical */
+    py?: SpacingToken;
+    pt?: SpacingToken;
+    pr?: SpacingToken;
+    pb?: SpacingToken;
+    pl?: SpacingToken;
+    /** margin (all sides) */
+    m?: SpacingToken;
+    mx?: SpacingToken;
+    my?: SpacingToken;
+    mt?: SpacingToken;
+    mr?: SpacingToken;
+    mb?: SpacingToken;
+    ml?: SpacingToken;
+    /** Flexbox gap between children (spacing token). */
+    gap?: SpacingToken;
+    /** Background — a `colors.background.*` token or a raw colour string. */
+    bg?: BackgroundToken | (string & {});
+    radius?: RadiusToken;
+    /** Draw a hairline border in `colors.border.primary`. */
+    border?: boolean;
+    flex?: number;
+    align?: ViewStyle['alignItems'];
+    justify?: ViewStyle['justifyContent'];
+    direction?: ViewStyle['flexDirection'];
+    wrap?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+type LayoutProps = Omit<BoxProps, 'style' | 'children'>;
+export declare const resolveBoxStyle: (theme: Theme, p: LayoutProps) => ViewStyle;
+declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<View>>;
+export type StackProps = Omit<BoxProps, 'direction'>;
+/** Vertical flex container with token spacing between children (default gap `md`). */
+declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<View>>;
+export type RowProps = Omit<BoxProps, 'direction'>;
+/** Horizontal flex container (default `align="center"`, gap `sm`). */
+declare const Row: React.ForwardRefExoticComponent<RowProps & React.RefAttributes<View>>;
+export interface SpacerProps {
+    /** Fixed spacer of this spacing token. Omit for a flexible spacer (`flex: 1`). */
+    size?: SpacingToken;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/** Fixed gap (`size`) or a flexible push (`flex: 1`) between siblings. */
+declare const Spacer: React.FC<SpacerProps>;
+export { Box, Stack, Row, Spacer };
+export default Box;
+//# sourceMappingURL=Box.d.ts.map

package/lib/typescript/commonjs/components/Box/index.d.ts

@@ -0,0 +1,3 @@
+export { Box, Stack, Row, Spacer, resolveBoxStyle } from './Box';
+export type { BoxProps, StackProps, RowProps, SpacerProps } from './Box';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/commonjs/components/Button/Button.d.ts

@@ -4,7 +4,7 @@ import type { PressableProps, StyleProp, TextStyle, ViewStyle } from 'react-nati
 import type { GradientDefinition } from '../../theme/types';
 import type { HapticType } from '../../utils/hapticUtils';
 export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'link';
-export type ButtonTone = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'neutral';
+export type ButtonTone = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'neutral';
 export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface ButtonProps extends Omit<PressableProps, 'style' | 'children'> {
     title?: string;

package/lib/typescript/commonjs/components/Checkbox/Checkbox.d.ts

@@ -5,8 +5,9 @@ import type { HapticType } from '../../utils/hapticUtils';
 export type CheckboxSize = 'sm' | 'md' | 'lg';
 export type CheckboxTone = 'primary' | 'success' | 'warning' | 'error';
 export interface CheckboxProps extends Omit<PressableProps, 'style' | 'children' | 'onPress'> {
-    checked: boolean;
-    onChange: (checked: boolean) => void;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean) => void;
     indeterminate?: boolean;
     disabled?: boolean;
     label?: string;

package/lib/typescript/commonjs/components/DatePicker/DatePicker.d.ts

@@ -6,21 +6,21 @@ export type WeekStart = 0 | 1 | 6;
 /**
  * DatePicker operates in two modes:
  *
- * 1. **Controlled-modal mode** — pass `visible` (plus `onSelect` / `onClose`)
+ * 1. **Controlled-modal mode** — pass `visible` (plus `onChange` / `onClose`)
  *    and own the open state externally. The component renders only the modal.
  * 2. **Trigger mode** — omit `visible`. The component renders a built-in
  *    PickerTrigger field (label / value / placeholder / chevron / clear /
  *    helper / error / size / variant) and manages its own open state. The
  *    field opens the modal on press and closes it on confirm/cancel.
  *
- * `onSelect` / `onClose` are typed optional to support trigger-only usage
+ * `onChange` / `onClose` are typed optional to support trigger-only usage
  * where the consumer may not need either callback. In controlled-modal mode
  * they remain semantically required.
  */
 export interface DatePickerProps {
     visible?: boolean;
     value?: Date | null;
-    onSelect?: (date: Date) => void;
+    onChange?: (date: Date) => void;
     onClose?: () => void;
     minDate?: Date;
     maxDate?: Date;

package/lib/typescript/commonjs/components/Dialog/Dialog.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
-export type DialogVariant = 'default' | 'success' | 'warning' | 'danger' | 'info';
-export type DialogActionTone = 'primary' | 'neutral' | 'danger';
+export type DialogVariant = 'default' | 'success' | 'warning' | 'error' | 'info';
+export type DialogActionTone = 'primary' | 'neutral' | 'error';
 export interface DialogAction {
     label: string;
     onPress: () => void;