@factorialco/f0-react 1.374.1 → 1.375.0

package/dist/ai.d.ts

@@ -1196,11 +1196,6 @@ declare module "gridstack" {
 }
 
 
-declare namespace Calendar {
-    var displayName: string;
-}
-
-
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
         aiBlock: {
@@ -1248,3 +1243,8 @@ declare module "@tiptap/core" {
         };
     }
 }
+
+
+declare namespace Calendar {
+    var displayName: string;
+}

package/dist/experimental.d.ts

@@ -6700,11 +6700,6 @@ declare module "gridstack" {
 }
 
 
-declare namespace Calendar {
-    var displayName: string;
-}
-
-
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
         aiBlock: {
@@ -6752,3 +6747,8 @@ declare module "@tiptap/core" {
         };
     }
 }
+
+
+declare namespace Calendar {
+    var displayName: string;
+}

package/dist/experimental.js

@@ -3,8 +3,8 @@ import { eK as _L, eJ as LL, eI as OL, eP as RL, eQ as FL, eM as ML, eL as PL, e
 import { jsx as l, jsxs as g, Fragment as Z } from "react/jsx-runtime";
 import * as Fe from "react";
 import Q, { createContext as Pt, forwardRef as J, useRef as W, useEffect as V, useContext as zt, PureComponent as l0, useTransition as a0, useState as R, useLayoutEffect as Kn, useId as Tl, useCallback as ne, useMemo as P, useImperativeHandle as Ou, memo as lo, Fragment as $n, isValidElement as Ru, cloneElement as Dl, createElement as Oa, Children as Fu } from "react";
-import { f as _n, aG as fr, j as qr, aH as c0, b as Bo, aI as d0, A as u0, d as Kr, i as f0, m as h0, G as m0, g as Ra, aJ as p0, l as Fa, aK as g0, p as b0, aL as Mu, aM as Pu, aN as v0, C as y0, az as x0, ae as jn, D as De, aO as ot, aP as St, aQ as Ge, aR as w0, aS as ci, aT as lt, aU as zu, aV as Xe, aW as _l, aX as nt, aY as Ma, aZ as C0, a_ as $u, a$ as He, b0 as et, b1 as hr, b2 as Ti, b3 as ju, b4 as k0, b5 as vn, b6 as N0, b7 as S0, b8 as I0, b9 as Or, ba as Rr, bb as Ll, bc as A0, bd as Bu, be as Hu, bf as Vu, bg as E0, bh as Wu, bi as Uu, bj as Gu, bk as qu, bl as Ku, bm as Ju, bn as ws, bo as T0, bp as Pa, bq as D0, br as _0, bs as L0, t as O0, x as R0, y as F0, F as M0, M as za, N as $a, O as P0, P as z0, a4 as $0, a5 as j0, bt as B0, bu as H0, a7 as V0, bv as Yu, bw as W0, bx as U0, by as G0, am as ao, bz as Ol, bA as Qu, al as Cs, bB as q0, ak as Xu, a2 as Fr, ag as K0, bC as J0, bD as Y0, bE as Q0, ap as Rl, bF as X0, aD as Z0, bG as ks, bH as ev, bI as Di, bJ as tv, aE as nv, bK as rv, aC as Zu, aB as iv, aA as ov, bL as sv, bM as lv, bN as av, bO as cv, bP as dv, bQ as uv, bR as fv, bS as hv, bT as mv, bU as pv, bV as gv, bW as bv, bX as vv, bY as yv, bZ as xv, aF as ef, at as tf, b_ as wv, R as Cv, T as kv, V as Nv, W as Sv, Z as Iv, U as Av, b$ as ja, c0 as Ev, c1 as Tv, n as Dv } from "./DataCollectionStorageProvider-CWC0VRoY.js";
-import { ah as HL, c2 as VL, a8 as WL, a3 as UL, aa as GL, c6 as qL, c5 as KL, c3 as JL, c4 as YL, a6 as QL, a9 as XL, aq as ZL, ar as eO } from "./DataCollectionStorageProvider-CWC0VRoY.js";
+import { f as _n, aG as fr, j as qr, aH as c0, b as Bo, aI as d0, A as u0, d as Kr, i as f0, m as h0, G as m0, g as Ra, aJ as p0, l as Fa, aK as g0, p as b0, aL as Mu, aM as Pu, aN as v0, C as y0, az as x0, ae as jn, D as De, aO as ot, aP as St, aQ as Ge, aR as w0, aS as ci, aT as lt, aU as zu, aV as Xe, aW as _l, aX as nt, aY as Ma, aZ as C0, a_ as $u, a$ as He, b0 as et, b1 as hr, b2 as Ti, b3 as ju, b4 as k0, b5 as vn, b6 as N0, b7 as S0, b8 as I0, b9 as Or, ba as Rr, bb as Ll, bc as A0, bd as Bu, be as Hu, bf as Vu, bg as E0, bh as Wu, bi as Uu, bj as Gu, bk as qu, bl as Ku, bm as Ju, bn as ws, bo as T0, bp as Pa, bq as D0, br as _0, bs as L0, t as O0, x as R0, y as F0, F as M0, M as za, N as $a, O as P0, P as z0, a4 as $0, a5 as j0, bt as B0, bu as H0, a7 as V0, bv as Yu, bw as W0, bx as U0, by as G0, am as ao, bz as Ol, bA as Qu, al as Cs, bB as q0, ak as Xu, a2 as Fr, ag as K0, bC as J0, bD as Y0, bE as Q0, ap as Rl, bF as X0, aD as Z0, bG as ks, bH as ev, bI as Di, bJ as tv, aE as nv, bK as rv, aC as Zu, aB as iv, aA as ov, bL as sv, bM as lv, bN as av, bO as cv, bP as dv, bQ as uv, bR as fv, bS as hv, bT as mv, bU as pv, bV as gv, bW as bv, bX as vv, bY as yv, bZ as xv, aF as ef, at as tf, b_ as wv, R as Cv, T as kv, V as Nv, W as Sv, Z as Iv, U as Av, b$ as ja, c0 as Ev, c1 as Tv, n as Dv } from "./DataCollectionStorageProvider-CKziJ9he.js";
+import { ah as HL, c2 as VL, a8 as WL, a3 as UL, aa as GL, c6 as qL, c5 as KL, c3 as JL, c4 as YL, a6 as QL, a9 as XL, aq as ZL, ar as eO } from "./DataCollectionStorageProvider-CKziJ9he.js";
 import './experimental.css';function nf(t, e) {
   const n = Vd(e()), r = () => n.set(e());
   return r(), Hp(() => {
@@ -14046,7 +14046,7 @@ function PS({ totalPages: t, currentPage: e = 1, onPageChange: n, showControls:
 }
 const zS = se("OnePagination", PS), ql = ({ paginationInfo: t, setPage: e, className: n }) => {
   const r = Y();
-  return Rb(t) && g("div", {
+  return !Rb(t) || t.pagesCount <= 1 ? null : g("div", {
     className: k("flex w-full items-center justify-between px-4", n),
     children: [l("span", {
       className: "shrink-0 text-f1-foreground-secondary",
@@ -14056,8 +14056,7 @@ const zS = se("OnePagination", PS), ql = ({ paginationInfo: t, setPage: e, class
       children: l(zS, {
         totalPages: t.pagesCount,
         currentPage: t.currentPage,
-        onPageChange: e,
-        disabled: t.pagesCount <= 1
+        onPageChange: e
       })
     })]
   });

package/dist/f0.d.ts

@@ -3797,7 +3797,10 @@ export declare interface F0FilterPickerContentProps<Filters extends FiltersDefin
 /**
  * @experimental This is an experimental component, use it at your own risk
  */
-export declare const F0Form: <TSchema extends F0FormSchema>(props: F0FormProps<TSchema>) => React.ReactElement;
+export declare const F0Form: {
+    <TSchema extends F0FormSchema>(props: F0FormPropsWithSingleSchema<TSchema>): React.ReactElement;
+    <T extends F0PerSectionSchema>(props: F0FormPropsWithPerSectionSchema<T>): React.ReactElement;
+};
 
 /**
  * Submit configuration for action bar type
@@ -3938,44 +3941,60 @@ export declare function f0FormField<T extends ZodTypeAny, TConfig = undefined>(s
 export declare function f0FormField<T extends ZodTypeAny, V extends string | number = string | number, R extends Record<string, unknown> = Record<string, unknown>>(schema: T, config: F0FieldConfig<V, R>): T & F0ZodType<T>;
 
 /**
- * Props for the F0Form component
- *
- * @typeParam TSchema - The Zod object schema type. The form data type is inferred from this.
- *                      Can be a plain ZodObject or a refined ZodObject (using .refine()).
- *
- * @example
- * ```tsx
- * const schema = z.object({
- *   name: f0FormField(z.string(), { label: "Name" }),
- *   age: f0FormField(z.number(), { label: "Age" }),
- * })
- *
- * // Default submit button
- * <F0Form
- *   name="my-form"
- *   schema={schema}
- *   defaultValues={{ name: "" }}
- *   onSubmit={(data) => ({ success: true })}
- * />
- *
- * // With cross-field validation using .refine()
- * const schemaWithRefine = z.object({
- *   startDate: f0FormField(z.date(), { label: "Start" }),
- *   endDate: f0FormField(z.date(), { label: "End" }),
- * }).refine((data) => data.endDate > data.startDate, {
- *   message: "End date must be after start date",
- *   path: ["endDate"],
- * })
- * ```
+ * Union of both F0Form prop variants.
+ * The component detects the mode based on whether `schema` is a single Zod schema
+ * or a record of schemas keyed by section ID.
+ */
+export declare type F0FormProps<TSchema extends F0FormSchema | F0PerSectionSchema = F0FormSchema | F0PerSectionSchema> = TSchema extends F0FormSchema ? F0FormPropsWithSingleSchema<TSchema> : TSchema extends F0PerSectionSchema ? F0FormPropsWithPerSectionSchema<TSchema> : never;
+
+/**
+ * Props for the F0Form component (per-section schema mode).
+ * Each section key in the schema maps to an independent form with its own
+ * validation and submit button.
+ */
+export declare interface F0FormPropsWithPerSectionSchema<T extends F0PerSectionSchema> {
+    /** Unique name for the form, used for generating anchor links */
+    name: string;
+    /** Record mapping section IDs to their Zod schemas. Each section is independently validated and submitted. */
+    schema: T;
+    /** Section configurations keyed by section ID */
+    sections?: Record<string, F0PerSectionSectionConfig>;
+    /** Default values for each section, keyed by section ID */
+    defaultValues?: {
+        [K in keyof T]?: Partial<z.infer<T[K]>>;
+    };
+    /** Callback when a section is submitted. Receives the section ID and its validated data, both correctly typed. */
+    onSubmit: PerSectionSubmitHandler<T>;
+    /** Global submit config applied to all sections (can be overridden per section) */
+    submitConfig?: F0PerSectionSubmitConfig;
+    /** Additional class name for the form container */
+    className?: string;
+    /**
+     * When to trigger and display validation errors
+     * @default "on-blur"
+     */
+    errorTriggerMode?: F0FormErrorTriggerMode;
+    /**
+     * Styling configuration for form layout and appearance.
+     */
+    styling?: F0FormStylingConfig;
+    /**
+     * Ref to control the form programmatically from outside.
+     */
+    formRef?: React.MutableRefObject<F0FormRef | null>;
+}
+
+/**
+ * Props for the F0Form component (single schema mode)
  */
-export declare interface F0FormProps<TSchema extends F0FormSchema> {
-    /** Unique name for the form, used for generating anchor links (e.g., #forms.[name].[sectionId].[fieldId]) */
+export declare interface F0FormPropsWithSingleSchema<TSchema extends F0FormSchema> {
+    /** Unique name for the form, used for generating anchor links */
     name: string;
     /** Zod object schema with F0 field configurations */
     schema: TSchema;
     /** Section configurations keyed by section ID */
     sections?: Record<string, F0SectionConfig>;
-    /** Default values for the form fields (partial of the schema type) */
+    /** Default values for the form fields */
     defaultValues?: Partial<z.infer<TSchema>>;
     /** Callback when the form is submitted with valid data */
     onSubmit: (data: z.infer<TSchema>) => Promise<F0FormSubmitResult> | F0FormSubmitResult;
@@ -3999,14 +4018,6 @@ export declare interface F0FormProps<TSchema extends F0FormSchema> {
     /**
      * Ref to control the form programmatically from outside.
      * Use with the `useF0Form` hook to get a ref and submit/reset functions.
-     *
-     * @example
-     * ```tsx
-     * const { formRef, submit } = useF0Form()
-     *
-     * <F0Form formRef={formRef} ... />
-     * <Button onClick={submit}>Submit</Button>
-     * ```
      */
     formRef?: React.MutableRefObject<F0FormRef | null>;
 }
@@ -4265,6 +4276,42 @@ export declare const F0OneSwitch: ({ className, disabled }: F0OneSwitchProps) =>
  */
 export declare type F0OneSwitchProps = React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>;
 
+/**
+ * A record mapping section IDs to their individual schemas.
+ * When used, each section gets independent validation and its own submit button.
+ */
+export declare type F0PerSectionSchema = Record<string, F0FormSchema>;
+
+/**
+ * Section configuration for per-section schema mode.
+ * Extends F0SectionConfig with per-section submit and default values.
+ */
+export declare interface F0PerSectionSectionConfig extends F0SectionConfig {
+    /** Override submit config for this specific section */
+    submitConfig?: F0PerSectionSubmitConfig;
+}
+
+/**
+ * Per-section submit configuration, extending the base submit config
+ * with an optional per-section label override.
+ */
+export declare interface F0PerSectionSubmitConfig {
+    /** Custom label for the submit button (per section) */
+    label?: string;
+    /**
+     * Custom icon for the submit button
+     * - undefined: uses default Save icon
+     * - null: no icon shown
+     * - IconType: custom icon
+     */
+    icon?: IconType | null;
+    /**
+     * When true, the submit button is only visible once the section has unsaved changes.
+     * @default false
+     */
+    showSubmitWhenDirty?: boolean;
+}
+
 export declare const F0Provider: React.FC<{
     children: React.ReactNode;
     link?: LinkContextValue;
@@ -5260,6 +5307,14 @@ export declare type InferF0FormValues<T extends z.ZodObject<z.ZodRawShape>> = z.
  */
 export declare function inferFieldType(schema: ZodTypeAny, config: F0FieldConfig): F0FieldType;
 
+/**
+ * Helper type to infer the combined values from a per-section schema record.
+ * Merges all section schemas into a single type.
+ */
+export declare type InferPerSectionValues<T extends F0PerSectionSchema> = {
+    [K in keyof T]: z.infer<T[K]>;
+};
+
 export declare type InFilterDefinition<T = string | number, R extends RecordType = RecordType> = BaseFilterDefinition<"in"> & {
     options: InFilterOptions_2<T, R>;
 };
@@ -6081,6 +6136,24 @@ declare type PathsToStringProps<T> = T extends string ? [] : {
     [K in Extract<keyof T, string>]: [K, ...PathsToStringProps<T[K]>];
 }[Extract<keyof T, string>];
 
+/**
+ * Creates a union of `[sectionId, data]` pairs for each key in T.
+ * Used to build a callback where TypeScript narrows `data` based on `sectionId`.
+ *
+ * @example
+ * For T = { profile: ZodObject<{name: ZodString}>, settings: ZodObject<{theme: ZodEnum}> }
+ * Produces: ["profile", { name: string }] | ["settings", { theme: "light" | "dark" }]
+ */
+declare type PerSectionSubmitArgs<T extends F0PerSectionSchema> = {
+    [K in keyof T & string]: [sectionId: K, data: z.infer<T[K]>];
+}[keyof T & string];
+
+/**
+ * Callback type for per-section submit. Uses a discriminated union of argument
+ * tuples so that narrowing `sectionId` also narrows `data` to the correct type.
+ */
+declare type PerSectionSubmitHandler<T extends F0PerSectionSchema> = (...args: PerSectionSubmitArgs<T>) => Promise<F0FormSubmitResult> | F0FormSubmitResult;
+
 export declare type PersonAvatarVariant = Extract<AvatarVariant, {
     type: "person";
 }>;
@@ -7821,11 +7894,6 @@ declare module "gridstack" {
 }
 
 
-declare namespace Calendar {
-    var displayName: string;
-}
-
-
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
         aiBlock: {
@@ -7873,3 +7941,8 @@ declare module "@tiptap/core" {
         };
     }
 }
+
+
+declare namespace Calendar {
+    var displayName: string;
+}