@factorialco/f0-react 1.436.1 → 1.437.0

package/dist/experimental.d.ts

@@ -1432,6 +1432,8 @@ export declare interface CardSelectableItem<T extends CardSelectableValue> {
         href: string;
         label?: string;
     };
+    /** Custom content rendered inside the card when it is selected, with an expand/collapse animation */
+    selectedContent?: ReactNode;
 }
 
 export declare interface CardSelectableMultipleProps<T extends CardSelectableValue> {
@@ -6406,11 +6408,11 @@ declare const spinnerVariants: (props?: ({
 
 export declare const Split: ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
 overflow?: "hidden" | "auto" | undefined;
-paddingX?: "none" | "p-2" | "p-4" | "p-8" | "p-12" | "p-16" | undefined;
+paddingX?: "none" | "p-4" | "p-2" | "p-8" | "p-12" | "p-16" | undefined;
 maxWidth?: "md" | "sm" | "xs" | "xl" | "screen-sm" | "screen-md" | "screen-lg" | "screen-xl" | "screen-2xl" | undefined;
 height?: "auto" | "full" | undefined;
 width?: "auto" | "full" | undefined;
-paddingY?: "none" | "p-2" | "p-4" | "p-8" | "p-12" | "p-16" | undefined;
+paddingY?: "none" | "p-4" | "p-2" | "p-8" | "p-12" | "p-16" | undefined;
 basis?: "0" | undefined;
 inline?: boolean | undefined;
 justifyContent?: "center" | "end" | "start" | "space-between" | "stretch" | undefined;
@@ -6436,11 +6438,11 @@ className?: ClassValue;
 
 export declare const Stack: ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
 overflow?: "hidden" | "auto" | undefined;
-paddingX?: "none" | "p-2" | "p-4" | "p-8" | "p-12" | "p-16" | undefined;
+paddingX?: "none" | "p-4" | "p-2" | "p-8" | "p-12" | "p-16" | undefined;
 maxWidth?: "md" | "sm" | "xs" | "xl" | "screen-sm" | "screen-md" | "screen-lg" | "screen-xl" | "screen-2xl" | undefined;
 height?: "auto" | "full" | undefined;
 width?: "auto" | "full" | undefined;
-paddingY?: "none" | "p-2" | "p-4" | "p-8" | "p-12" | "p-16" | undefined;
+paddingY?: "none" | "p-4" | "p-2" | "p-8" | "p-12" | "p-16" | undefined;
 basis?: "0" | undefined;
 inline?: boolean | undefined;
 justifyContent?: "center" | "end" | "start" | "space-between" | "stretch" | undefined;

package/dist/experimental.js

@@ -3,8 +3,8 @@ import { f1 as jN, f0 as VN, ai as WN, e_ as UN, fl as GN, az as KN, e$ as qN, a
 import { jsx as c, jsxs as g, Fragment as re } from "react/jsx-runtime";
 import * as he from "react";
 import ne, { forwardRef as F, useRef as K, useTransition as op, useState as L, useLayoutEffect as Ca, useContext as Es, createContext as Ds, useCallback as J, useMemo as ee, useEffect as W, useId as Sa, useImperativeHandle as Na, memo as Ia, Fragment as lp, isValidElement as ap, cloneElement as Aa, Children as _a } from "react";
-import { C as cp, m as dp, N as He, o as ot, q as Te, t as up, v as sr, w as Ue, x as Ta, y as Oe, z as Rs, E as $e, G as wo, H as fp, I as Ea, J as Ie, K as ze, O as vn, Q as vr, U as Da, W as hp, X as Ht, Y as pp, Z as mp, a0 as gp, a1 as Fn, a2 as zn, a3 as Ls, a4 as bp, a5 as Ra, a6 as La, a7 as Ma, a8 as wp, a9 as Oa, aa as Fa, ab as za, ac as Pa, ad as $a, ae as Ba, n as xo, af as xp, ag as yo, ah as yp, ai as vp, aj as kp, ak as Ha, al as Cp, am as Sp, an as Np, ao as ja, e as Ri, ap as Ip, aq as Ap, ar as _p, as as Tp, at as Ep, au as Dp, av as Rp, M as Lp, aw as Mp, ax as Op, ay as Fp, az as zp, u as Va, aA as Pp, aB as $p, aC as Bp, aD as Hp, aE as jp, aF as Vp, aG as vo, aH as Wp, aI as Up, aJ as Gp } from "./index-B0hDgrco.js";
-import { A as xI, f as yI, B as vI, a as kI, g as CI, j as SI, D as NI, F as II, b as AI, aM as _I, aK as TI, aL as EI, L as DI, h as RI, i as LI, k as MI, c as OI, R as FI, S as zI, T as PI, V as $I, _ as BI, l as HI, p as jI, s as VI } from "./index-B0hDgrco.js";
+import { C as cp, m as dp, N as He, o as ot, q as Te, t as up, v as sr, w as Ue, x as Ta, y as Oe, z as Rs, E as $e, G as wo, H as fp, I as Ea, J as Ie, K as ze, O as vn, Q as vr, U as Da, W as hp, X as Ht, Y as pp, Z as mp, a0 as gp, a1 as Fn, a2 as zn, a3 as Ls, a4 as bp, a5 as Ra, a6 as La, a7 as Ma, a8 as wp, a9 as Oa, aa as Fa, ab as za, ac as Pa, ad as $a, ae as Ba, n as xo, af as xp, ag as yo, ah as yp, ai as vp, aj as kp, ak as Ha, al as Cp, am as Sp, an as Np, ao as ja, e as Ri, ap as Ip, aq as Ap, ar as _p, as as Tp, at as Ep, au as Dp, av as Rp, M as Lp, aw as Mp, ax as Op, ay as Fp, az as zp, u as Va, aA as Pp, aB as $p, aC as Bp, aD as Hp, aE as jp, aF as Vp, aG as vo, aH as Wp, aI as Up, aJ as Gp } from "./index-CFs2gP7X.js";
+import { A as xI, f as yI, B as vI, a as kI, g as CI, j as SI, D as NI, F as II, b as AI, aM as _I, aK as TI, aL as EI, L as DI, h as RI, i as LI, k as MI, c as OI, R as FI, S as zI, T as PI, V as $I, _ as BI, l as HI, p as jI, s as VI } from "./index-CFs2gP7X.js";
 import './experimental.css';const Kp = Uu("Search", [
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }],
   ["path", { d: "m21 21-4.3-4.3", key: "1qie3q" }]

package/dist/f0.d.ts

@@ -1774,6 +1774,8 @@ export declare interface CardSelectableItem<T extends CardSelectableValue> {
         href: string;
         label?: string;
     };
+    /** Custom content rendered inside the card when it is selected, with an expand/collapse animation */
+    selectedContent?: ReactNode;
 }
 
 export declare interface CardSelectableMultipleProps<T extends CardSelectableValue> {
@@ -1820,6 +1822,26 @@ export declare interface CardSelectableSingleProps<T extends CardSelectableValue
 
 export declare type CardSelectableValue = string | number;
 
+declare type CardSelectFieldRenderIf = CardSelectRenderIfCondition | CommonRenderIfCondition | F0BaseFieldRenderIfFunction;
+
+declare interface CardSelectOption {
+    value: string;
+    label: string;
+    description?: string;
+}
+
+declare interface CardSelectRenderIfBase {
+    fieldId: string;
+}
+
+declare type CardSelectRenderIfCondition = CardSelectRenderIfBase & ({
+    equalsTo: string;
+} | {
+    notEqualsTo: string;
+} | {
+    isEmpty: boolean;
+});
+
 declare type CardVisualizationOptions<T, _Filters extends FiltersDefinition, _Sortings extends SortingsDefinition> = {
     cardProperties: ReadonlyArray<CardPropertyDefinition<T>>;
     title: (record: T) => string;
@@ -5037,6 +5059,26 @@ compact?: boolean;
 
 export declare type F0CardProps = Omit<CardInternalProps, (typeof privateProps_3)[number]>;
 
+declare interface F0CardSelectConfig {
+    options: CardSelectOption[];
+    hideLabel?: boolean;
+    /**
+     * When false, renders each option as a separate bordered card
+     * instead of a single container with dividers.
+     * @default true
+     */
+    grouped?: boolean;
+}
+
+declare type F0CardSelectField = F0BaseField & {
+    type: "cardSelect";
+    options: CardSelectOption[];
+    hideLabel?: boolean;
+    /** When false, renders each option as a separate bordered card */
+    grouped?: boolean;
+    renderIf?: CardSelectFieldRenderIf;
+};
+
 /**
  * @experimental This is an experimental component use it at your own risk
  */
@@ -5838,7 +5880,7 @@ export declare function F0EventCatcherProvider({ children, onEvent, enabled, cat
 /**
  * Union of all F0 field types used for rendering
  */
-export declare type F0Field = F0TextField | F0NumberField | F0DurationField | F0TextareaField | F0SelectField | F0CheckboxField | F0SwitchField | F0DateField | F0TimeField | F0DateTimeField | F0DateRangeField | F0RichTextField | F0FileField | F0CustomField;
+export declare type F0Field = F0TextField | F0NumberField | F0DurationField | F0TextareaField | F0SelectField | F0CheckboxField | F0SwitchField | F0DateField | F0TimeField | F0DateTimeField | F0DateRangeField | F0RichTextField | F0FileField | F0CardSelectField | F0CustomField;
 
 /**
  * Alert configuration for a field.
@@ -5873,12 +5915,12 @@ export declare type F0FieldAlertProps = Omit<F0AlertProps, "variant"> & {
  * @typeParam T - The value type for select fields (string or number)
  * @typeParam R - Record type for data source (when using source instead of options)
  */
-export declare type F0FieldConfig<T extends string | number = string | number, R extends Record<string, unknown> = Record<string, unknown>> = F0StringConfig<string, undefined, R> | F0NumberFieldConfig<R> | F0BooleanConfig | F0DateFieldConfig | F0TimeFieldConfig | F0DateTimeFieldConfig | F0ArrayConfig<T, R> | F0FileFieldConfig | F0ObjectConfig;
+export declare type F0FieldConfig<T extends string | number = string | number, R extends Record<string, unknown> = Record<string, unknown>> = F0StringConfig<string, undefined, R> | F0NumberFieldConfig<R> | F0BooleanConfig | F0DateFieldConfig | F0TimeFieldConfig | F0DateTimeFieldConfig | F0ArrayConfig<T, R> | F0FileFieldConfig | F0ObjectConfig | F0StringCardSelectConfig;
 
 /**
  * Field types for rendering
  */
-export declare type F0FieldType = "text" | "number" | "duration" | "textarea" | "select" | "checkbox" | "switch" | "date" | "time" | "datetime" | "daterange" | "richtext" | "file" | "custom";
+export declare type F0FieldType = "text" | "number" | "duration" | "textarea" | "select" | "checkbox" | "switch" | "date" | "time" | "datetime" | "daterange" | "richtext" | "file" | "cardSelect" | "custom";
 
 /**
  * F0 config options specific to file fields
@@ -6120,7 +6162,7 @@ export declare function f0FormField<T extends z.ZodDate>(schema: T, config: F0Da
  * Enum field - select
  * @typeParam R - Record type for data source (when using source instead of options)
  */
-export declare function f0FormField<T extends z.ZodEnum<[string, ...string[]]>, R extends Record<string, unknown> = Record<string, unknown>>(schema: T, config: F0StringSelectConfig<R>): T & F0ZodType<T>;
+export declare function f0FormField<T extends z.ZodEnum<[string, ...string[]]>, R extends Record<string, unknown> = Record<string, unknown>>(schema: T, config: F0StringSelectConfig<R> | F0StringCardSelectConfig): T & F0ZodType<T>;
 
 /**
  * Array field - multi-select
@@ -7016,6 +7058,13 @@ export declare type F0SelectTagProp = string | {
     src?: string;
 };
 
+/**
+ * Config for string fields rendered as grouped radio cards
+ */
+declare type F0StringCardSelectConfig = F0BaseConfig & F0CardSelectConfig & {
+    fieldType: "cardSelect";
+};
+
 /**
  * Union of all string field configs
  *
@@ -7023,7 +7072,7 @@ export declare type F0SelectTagProp = string | {
  * @typeParam TConfig - Type of the fieldConfig object (for custom fields)
  * @typeParam R - Record type for data source (when using source instead of options)
  */
-export declare type F0StringConfig<TValue = string, TConfig = undefined, R extends Record<string, unknown> = Record<string, unknown>> = F0StringTextConfig | F0StringTextareaConfig | F0StringSelectConfig<R> | F0StringFileConfig | F0CustomFieldConfig<TValue, TConfig>;
+export declare type F0StringConfig<TValue = string, TConfig = undefined, R extends Record<string, unknown> = Record<string, unknown>> = F0StringTextConfig | F0StringTextareaConfig | F0StringSelectConfig<R> | F0StringCardSelectConfig | F0StringFileConfig | F0CustomFieldConfig<TValue, TConfig>;
 
 /**
  * Config for file fields (single file upload, form value is a string identifier)
@@ -7066,6 +7115,12 @@ export declare interface F0SwitchConfig {
      * moreInfoLink: { href: "https://help.example.com/article", label: "Learn more" }
      */
     moreInfoLink?: F0MoreInfoLink;
+    /**
+     * When false, prevents this switch from being grouped with adjacent switches
+     * into a single bordered container. Renders as a standalone field instead.
+     * @default true
+     */
+    grouped?: boolean;
 }
 
 /**
@@ -7075,6 +7130,8 @@ export declare type F0SwitchField = F0BaseField & {
     type: "switch";
     /** Link displayed below the help text, typically pointing to external documentation */
     moreInfoLink?: F0MoreInfoLink;
+    /** When false, renders as a standalone field instead of grouping with adjacent switches */
+    grouped?: boolean;
     /** Conditional rendering based on another field's value */
     renderIf?: SwitchFieldRenderIf;
 };
@@ -7405,7 +7462,7 @@ export declare function fieldsToSeconds(fields: DurationFields): number;
 /**
  * Field types for rendering
  */
-export declare type FieldType = "text" | "number" | "duration" | "textarea" | "select" | "checkbox" | "switch" | "date" | "time" | "datetime" | "daterange" | "richtext" | "file" | "custom";
+export declare type FieldType = "text" | "number" | "duration" | "textarea" | "select" | "checkbox" | "switch" | "date" | "time" | "datetime" | "daterange" | "richtext" | "file" | "cardSelect" | "custom";
 
 export declare type FileAvatarVariant = Extract<AvatarVariant, {
     type: "file";