finform-react-builder 1.15.0 → 1.16.0

package/dist/components/FinForm/index.d.ts

@@ -6,5 +6,6 @@ export { CustomButtons } from './CustomButtons';
 export { generateSchema } from './generateSchema';
 export { fetchApiData, hasApiConfig, getApiConfig, shouldShowField, useApiData } from './apiUtils';
 export * from './inputs';
-export type { FieldConfig, AutomationFieldConfig, ValidationRule, FormButton, ButtonGroup, FormTitle, FormTheme, FinFormProps, ApiConfig, } from './types';
+export * from './utils/phoneUtils';
+export type { FieldConfig, MobileField, AutomationFieldConfig, ValidationRule, FormButton, ButtonGroup, FormTitle, FormTheme, FinFormProps, ApiConfig, } from './types';
 export { buildFinformTestIds, resolveFieldTestIds } from './testIds';

package/dist/components/FinForm/inputs/FinMobileField.d.ts

@@ -0,0 +1,31 @@
+import { default as React } from 'react';
+import { DialCodeOption } from '../utils/phoneUtils';
+export type FinMobileFieldProps = {
+    id?: string;
+    value?: any;
+    onChange?: (val: string) => void;
+    onBlur?: () => void;
+    labelText?: string;
+    label?: string;
+    labelVariant?: 'caption' | 'body2' | 'subtitle2' | 'h6';
+    placeholder?: string;
+    disabled?: boolean;
+    hasError?: boolean;
+    helperText?: string;
+    dialCodes?: DialCodeOption[];
+    defaultDialCode?: string;
+    mobilePrefixes?: string[];
+    storeFormat?: string;
+    phoneExamples?: string[];
+    name?: string;
+    inputTestId?: string;
+    labelTestId?: string;
+    errorTestId?: string;
+};
+/**
+ * Mobile phone field: dial-code select + national number.
+ * Visual tokens match FinTextField (8px radius, outlined, theme input tokens).
+ * Stored value is national store-format string (not E.164).
+ */
+export declare const FinMobileField: React.FC<FinMobileFieldProps>;
+export default FinMobileField;

package/dist/components/FinForm/inputs/index.d.ts

@@ -1,4 +1,5 @@
 export * from './FinTextField';
+export * from './FinMobileField';
 export * from './FinSelect';
 export * from './FinAutocomplete';
 export * from './FinCheckbox';

package/dist/components/FinForm/types.d.ts

@@ -35,7 +35,7 @@ export interface BaseField {
     title?: string;
     name: string;
     label: string;
-    type: 'text' | 'email' | 'password' | 'number' | 'tel' | 'select' | 'checkbox' | 'checkboxGroup' | 'toggle' | 'radio' | 'switch' | 'autocomplete' | 'date' | 'textarea' | 'image' | 'title' | 'section' | 'component' | 'finuiHeader' | 'tabs' | 'grid' | 'listcards' | 'dragdroplist';
+    type: 'text' | 'email' | 'password' | 'number' | 'tel' | 'mobile' | 'select' | 'checkbox' | 'checkboxGroup' | 'toggle' | 'radio' | 'switch' | 'autocomplete' | 'date' | 'textarea' | 'image' | 'title' | 'section' | 'component' | 'finuiHeader' | 'tabs' | 'grid' | 'listcards' | 'dragdroplist';
     placeholder?: string;
     labelPosition?: 'inner' | 'top' | 'none';
     labelVariant?: 'caption' | 'body2' | 'subtitle2' | 'h6';
@@ -80,6 +80,27 @@ export interface NumberField extends BaseField {
     min?: number;
     max?: number;
 }
+/** Mobile phone with dial-code dropdown; store value is national store-format string (not E.164). */
+export interface MobileField extends BaseField {
+    type: 'mobile';
+    minLength?: number;
+    maxLength?: number;
+    pattern?: string;
+    /** Dial-code options (digits without "+"), e.g. [{ dial_code: "260", label: "ZM" }] */
+    dialCodes?: Array<{
+        dial_code: string;
+        label?: string;
+        iso?: string;
+    }>;
+    /** Default dial code digits without "+" */
+    defaultDialCode?: string;
+    /** Optional national prefix allowlist */
+    mobilePrefixes?: string[];
+    /** Expected store shape, e.g. "0XXXXXXXXX" */
+    storeFormat?: string;
+    /** Example strings for helper / paste hints */
+    phoneExamples?: string[];
+}
 export interface SelectField extends BaseField {
     type: 'select';
     options?: Array<{
@@ -342,7 +363,7 @@ export interface DragDropListField extends Omit<BaseField, 'helperText'> {
     helperText?: React.ReactNode | string;
     sx?: any;
 }
-export type FieldConfig = TextField | NumberField | SelectField | CheckboxField | CheckboxGroupField | ToggleField | RadioField | SwitchField | AutocompleteField | DateField | ImageField | TitleField | SectionField | ComponentField | FinUiHeaderField | TabsField | GridField | ListCardsField | DragDropListField;
+export type FieldConfig = TextField | NumberField | MobileField | SelectField | CheckboxField | CheckboxGroupField | ToggleField | RadioField | SwitchField | AutocompleteField | DateField | ImageField | TitleField | SectionField | ComponentField | FinUiHeaderField | TabsField | GridField | ListCardsField | DragDropListField;
 export type AutomationFieldConfig = FieldConfig & {
     testId?: string;
     automation?: {

package/dist/components/FinForm/utils/phoneUtils.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Generic phone normalize / display helpers for FinMobileField.
+ * Country rules come from field props — no country hardcoding.
+ */
+export type DialCodeOption = {
+    dial_code: string;
+    label?: string;
+    iso?: string;
+};
+export type PhoneNormalizeOptions = {
+    dialCode?: string;
+    storeFormat?: string;
+    prefixes?: string[];
+};
+export type PhoneDisplayParts = {
+    dialCode: string;
+    national: string;
+};
+/** Digits only. */
+export declare function digitsOnly(value: unknown): string;
+/** Strip leading zeros from a dial code string ("0260" → "260", "+260" → "260"). */
+export declare function normalizeDialCode(dialCode: unknown): string;
+/**
+ * Parse storeFormat like "0XXXXXXXXX":
+ * - leadingDigits: literal digit prefix ("0")
+ * - xCount: number of X placeholders (9)
+ * - totalLen: expected national length (10)
+ */
+export declare function parseStoreFormat(storeFormat?: string): {
+    leadingDigits: string;
+    xCount: number;
+    totalLen: number;
+};
+/**
+ * Normalize any common input shape into the national store format.
+ * Accepts: "+260971234567", "0971234567", "971234567", with spaces/dashes.
+ */
+export declare function normalizePhoneToStoreFormat(raw: unknown, options?: PhoneNormalizeOptions): string;
+/**
+ * Split a stored national value for UI: dial code + national digits.
+ */
+export declare function parsePhoneDisplayParts(stored: unknown, options?: {
+    dialCode?: string;
+    dialCodes?: DialCodeOption[];
+}): PhoneDisplayParts;
+/**
+ * Validate a store-format national number.
+ */
+export declare function validatePhone(storeValue: unknown, options?: {
+    pattern?: string | RegExp;
+    prefixes?: string[];
+    message?: string;
+}): {
+    valid: boolean;
+    message?: string;
+};