@factorialco/f0-react 6.6.0 → 6.7.0

package/dist/experimental.d.ts

@@ -39,6 +39,7 @@ import { DotTagCellValue as DotTagCellValue_2 } from './experimental';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { EmployeeItemProps } from './types';
 import { F0EmojiPickerProps as F0EmojiPickerProps_2 } from './types';
+import { F0PhoneInputProps as F0PhoneInputProps_2 } from './types';
 import { F0SegmentedControlProps as F0SegmentedControlProps_2 } from './types';
 import { F0SelectProps as F0SelectProps_2 } from './types';
 import { F0TagBalanceProps as F0TagBalanceProps_2 } from './types';
@@ -3184,6 +3185,7 @@ declare const defaultTranslations: {
         readonly selectPlaceholder: "Select";
     };
     readonly countries: {
+        ac: string;
         ad: string;
         ae: string;
         af: string;
@@ -3208,14 +3210,19 @@ declare const defaultTranslations: {
         bh: string;
         bi: string;
         bj: string;
+        bl: string;
         bm: string;
+        bn: string;
         bo: string;
+        bq: string;
         br: string;
+        bs: string;
         bt: string;
         bw: string;
         by: string;
         bz: string;
         ca: string;
+        cc: string;
         cd: string;
         cf: string;
         cg: string;
@@ -3230,6 +3237,7 @@ declare const defaultTranslations: {
         cu: string;
         cv: string;
         cw: string;
+        cx: string;
         cy: string;
         cz: string;
         de: string;
@@ -3241,6 +3249,7 @@ declare const defaultTranslations: {
         ec: string;
         ee: string;
         eg: string;
+        eh: string;
         er: string;
         es: string;
         et: string;
@@ -3254,17 +3263,20 @@ declare const defaultTranslations: {
         gb: string;
         gd: string;
         ge: string;
+        gf: string;
         gg: string;
         gh: string;
         gi: string;
         gl: string;
         gm: string;
         gn: string;
+        gp: string;
         gq: string;
         gr: string;
         gt: string;
         gu: string;
         gw: string;
+        gy: string;
         hk: string;
         hn: string;
         hr: string;
@@ -3285,6 +3297,140 @@ declare const defaultTranslations: {
         jo: string;
         jp: string;
         ke: string;
+        kg: string;
+        kh: string;
+        ki: string;
+        km: string;
+        kn: string;
+        kp: string;
+        kr: string;
+        kw: string;
+        ky: string;
+        kz: string;
+        la: string;
+        lb: string;
+        lc: string;
+        li: string;
+        lk: string;
+        lr: string;
+        ls: string;
+        lt: string;
+        lu: string;
+        lv: string;
+        ly: string;
+        ma: string;
+        mc: string;
+        md: string;
+        me: string;
+        mf: string;
+        mg: string;
+        mh: string;
+        mk: string;
+        ml: string;
+        mm: string;
+        mn: string;
+        mo: string;
+        mp: string;
+        mq: string;
+        mr: string;
+        ms: string;
+        mt: string;
+        mu: string;
+        mv: string;
+        mw: string;
+        mx: string;
+        my: string;
+        mz: string;
+        na: string;
+        nc: string;
+        ne: string;
+        nf: string;
+        ng: string;
+        ni: string;
+        nl: string;
+        no: string;
+        np: string;
+        nr: string;
+        nu: string;
+        nz: string;
+        om: string;
+        pa: string;
+        pe: string;
+        pf: string;
+        pg: string;
+        ph: string;
+        pk: string;
+        pl: string;
+        pm: string;
+        pn: string;
+        pr: string;
+        ps: string;
+        pt: string;
+        pw: string;
+        py: string;
+        qa: string;
+        re: string;
+        ro: string;
+        rs: string;
+        ru: string;
+        rw: string;
+        sa: string;
+        sb: string;
+        sc: string;
+        sd: string;
+        se: string;
+        sg: string;
+        sh: string;
+        si: string;
+        sj: string;
+        sk: string;
+        sl: string;
+        sm: string;
+        sn: string;
+        so: string;
+        sr: string;
+        ss: string;
+        st: string;
+        sv: string;
+        sx: string;
+        sy: string;
+        sz: string;
+        ta: string;
+        tc: string;
+        td: string;
+        tg: string;
+        th: string;
+        tj: string;
+        tk: string;
+        tl: string;
+        tm: string;
+        tn: string;
+        to: string;
+        tr: string;
+        tt: string;
+        tv: string;
+        tw: string;
+        tz: string;
+        ua: string;
+        ug: string;
+        us: string;
+        uy: string;
+        uz: string;
+        va: string;
+        vc: string;
+        ve: string;
+        vg: string;
+        vi: string;
+        vn: string;
+        vu: string;
+        wf: string;
+        ws: string;
+        xk: string;
+        ye: string;
+        yt: string;
+        za: string;
+        zm: string;
+        zw: string;
     };
     readonly approvals: {
         readonly history: "Approval history";
@@ -3952,6 +4098,12 @@ declare const defaultTranslations: {
         readonly greaterThan: "It should be greater than {{min}}";
         readonly lessThan: "It should be less than {{max}}";
     };
+    readonly phoneInput: {
+        readonly country: "Country";
+        readonly countryWithDialCode: "{{country}} {{dialCode}}";
+        readonly searchCountry: "Search country or dial code";
+        readonly noResults: "No country found";
+    };
     readonly imageUpload: {
         readonly uploading: "Uploading...";
         readonly uploadError: "Upload failed";
@@ -4165,6 +4317,9 @@ declare const defaultTranslations: {
             readonly checkbox: {
                 readonly mustBeChecked: "This option must be selected";
             };
+            readonly phone: {
+                readonly invalid: "Enter a valid phone number";
+            };
         };
     };
     readonly graph: {
@@ -6221,6 +6376,73 @@ export declare const F0NumberInput: ForwardRefExoticComponent<Omit<F0NumberInput
 
 export declare type F0NumberInputProps = Omit<NumberInputInternalProps, (typeof privateProps_4)[number]>;
 
+/** @experimental This is an experimental component, use it at your own risk. */
+export declare const F0PhoneInput: ForwardRefExoticComponent<F0PhoneInputProps_2 & RefAttributes<HTMLInputElement>>;
+
+export declare type F0PhoneInputChangeMeta = {
+    /** Country resolved for the current value, e.g. `"es"` */
+    country: CountryCode | undefined;
+    /** Full E.164 representation when derivable, e.g. `"+34674897945"` */
+    e164: string | undefined;
+    /** libphonenumber validity — informative only, never enforced */
+    isValid: boolean;
+    isPossible: boolean;
+};
+
+export declare interface F0PhoneInputProps {
+    label: string;
+    /** Controlled value */
+    value?: F0PhoneInputValue;
+    /** Initial value when uncontrolled */
+    defaultValue?: F0PhoneInputValue;
+    onChange?: (value: F0PhoneInputValue | undefined, meta: F0PhoneInputChangeMeta) => void;
+    onCountryChange?: (country: CountryCode | undefined) => void;
+    /** Country pre-selected while the input is empty */
+    defaultCountry?: CountryCode;
+    /** Countries listed first in the selector, in the given order */
+    pinnedCountries?: CountryCode[];
+    /** Restricts both the selector and typed/pasted country detection */
+    allowedCountries?: CountryCode[];
+    /**
+     * Defaults to a national example number (`612 34 56 78`) for the selected
+     * country, or an international one (`+34 612 34 56 78`) while no country
+     * is selected
+     */
+    placeholder?: string;
+    hideLabel?: boolean;
+    labelIcon?: IconType;
+    hint?: string;
+    error?: string | boolean;
+    status?: InputFieldStatus;
+    required?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    loading?: boolean;
+    clearable?: boolean;
+    size?: PhoneInputSize;
+    name?: string;
+    id?: string;
+    autoFocus?: boolean;
+    onBlur?: (event: React.FocusEvent<HTMLElement>) => void;
+    onFocus?: (event: React.FocusEvent<HTMLElement>) => void;
+}
+
+/**
+ * Structured phone value matching how backends store the pair:
+ * a dial code plus the national number. Consumers never need to
+ * split or join the two parts themselves.
+ */
+export declare type F0PhoneInputValue = {
+    /** Dial code including the leading `+`, e.g. `"+34"` */
+    prefix: string | undefined;
+    /**
+     * National significant number (digits only, no trunk prefix) — or the raw
+     * stored string when it cannot be parsed (legacy data is passed through
+     * untouched until the user edits it).
+     */
+    number: string;
+};
+
 /**
  * @experimental This is an experimental component, use it at your own risk.
  */
@@ -6500,11 +6722,28 @@ declare type F0SelectBaseProps<T extends string, R = unknown> = {
     fitContentWidth?: boolean;
 } & WithDataTestIdProps;
 
+/**
+ * Short token rendered next to the option label, in secondary color, on a
+ * single line — never wraps and never affects row height. For prose that
+ * deserves its own line use `description`; for chips/badges use `tag`.
+ * Can coexist with both.
+ *
+ * Deliberately strict: no free-form variant. Each variant carries semantics
+ * the component can validate and format — add new ones (e.g. currency,
+ * locale) as concrete use cases appear.
+ */
+export declare type F0SelectItemMetadata = {
+    type: "dialCode";
+    dialCode: string;
+};
+
 declare type F0SelectItemObject<T, R = unknown> = {
     type?: "item";
     value: T;
     label: string;
     description?: string;
+    /** Short token shown next to the label (e.g. a dial code) */
+    metadata?: F0SelectItemMetadata;
     avatar?: AvatarVariant;
     tag?: F0SelectTagProp;
     icon?: IconType;
@@ -7743,10 +7982,21 @@ declare const internalAvatarSizes: readonly ["xsmall", "small", "medium", "large
 
 declare const internalAvatarTypes: readonly ["base", "rounded"];
 
+export declare const isPossiblePhoneValue: (value: F0PhoneInputValue | undefined, fallbackCountry?: CountryCode) => boolean;
+
 export declare const isSystemMessage: (item: F0ChatItem) => item is F0ChatSystemMessage;
 
 export declare const isUserMessage: (item: F0ChatItem) => item is F0ChatMessage;
 
+/**
+ * Standalone validators for the structured pair, matching the `isValid` /
+ * `isPossible` flags of the change meta: "valid" checks the country's number
+ * patterns, "possible" only checks the length. For form schemas.
+ * `fallbackCountry` must mirror the input's `defaultCountry` so prefix-less
+ * legacy values validate exactly as the input renders them.
+ */
+export declare const isValidPhoneValue: (value: F0PhoneInputValue | undefined, fallbackCountry?: CountryCode) => boolean;
+
 export declare function Item({ item, counter, isActive, collapsible, isExpanded, onToggleExpanded, sortable, children, onDragOver, onDragLeave, onDrop, canDropInside, currentParentId, justDropped, }: TOCItemProps): JSX_2.Element;
 
 export declare type ItemActionsDefinition<T extends RecordType> = (item: T) => ActionDefinition[] | undefined;
@@ -9142,6 +9392,10 @@ declare type PersonProfile = {
 
 declare type PersonTagProps = ComponentProps<typeof F0TagPerson>;
 
+export declare type PhoneInputSize = (typeof phoneInputSizes)[number];
+
+export declare const phoneInputSizes: readonly ["sm", "md"];
+
 export declare const PieChart: WithDataTestIdReturnType_5<ForwardRefExoticComponent<Omit<PieChartProps & RefAttributes<HTMLDivElement>, "ref"> & RefAttributes<HTMLElement | SVGElement>>>;
 
 export declare const PieChartWidget: ForwardRefExoticComponent<Omit<WidgetProps_2 & {