@factorialco/f0-react 1.309.1 → 1.311.0

package/README.md

@@ -81,6 +81,6 @@ import "@factorialco/f0-react/dist/styles.css"
 
 You can then utilize any of its components:
 
-```
+```tsx
 import { Button } from "@factorialco/f0-react"
 ```

package/dist/experimental.d.ts

@@ -6483,6 +6483,11 @@ declare module "gridstack" {
 }
 
 
+declare namespace Calendar {
+    var displayName: string;
+}
+
+
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
         moodTracker: {
@@ -6490,8 +6495,3 @@ declare module "@tiptap/core" {
         };
     }
 }
-
-
-declare namespace Calendar {
-    var displayName: string;
-}

package/dist/experimental.js

@@ -1,5 +1,5 @@
-import { bK as Zm, bL as $c, bM as vA, bN as yA, bO as Jm, bP as v7, bQ as Ls, av as c0, bR as Wr, bS as f0, bT as Ts, bU as Tf, az as ii, bV as sl, bW as Xm, bX as xA, e as ks, bY as Vc, bZ as kA, b_ as wA, b$ as bA, c0 as CA, c1 as Ym, c2 as y7, c3 as x7, c4 as _A, c5 as SA, c6 as EA, d as fa, c7 as Qm, c8 as Af, c9 as LA, ca as k7, cb as e3, cc as t3, cd as TA, ce as d0, aI as w7, cf as n3, cg as AA, ch as b7, ci as C7, cj as A5, ck as Nf, cl as NA, cm as MA, cn as OA, co as Ah, cp as FA, cq as DA, cr as IA, m as ye, cs as _7, ct as RA, cu as Mf, l as Ua, cv as zc, z as xd, cw as S7, x as c1, cx as PA, n as Nh, cy as BA, q as HA, r as f1, i as $A, H as VA, J as zA, t as N5, cz as jA, G as M5, cA as WA, N as UA, cB as E7, cC as L7, cD as qA, aA as Te, F as Ve, c as F, cE as Of, cF as i3, cG as r3, cH as Gn, cI as Vn, cJ as Ff, cK as Nl, cL as kd, bG as Ml, b as Je, cM as da, A as dt, b8 as fs, B as Ft, cN as GA, cO as s3, a as Rn, cP as O5, cQ as KA, cR as ZA, cS as JA, aw as T7, ax as A7, cT as N7, cU as M7, cV as Lo, cW as XA, cX as F5, cY as YA, cZ as QA, c_ as eN, w as Kt, S as xe, c$ as u0, d0 as Ci, d1 as o3, ao as Oi, ap as tN, d2 as O7, D as a3, b9 as ol, d3 as t2, d4 as F7, d5 as D7, d6 as I7, d7 as R7, d8 as P7, am as zt, d9 as B7, da as H7, db as $7, dc as V7, dd as z7, de as nN, df as iN, dg as h0, dh as j7, C as rN, bm as sN, di as Fi, au as Zo, g as hn, as as l3, dj as D5, dk as oN, ay as W7, dl as U7, dm as wd, dn as aN, f as ua, dp as Jo, dq as q7, dr as lN, ds as I5, dt as al, du as c3, dv as Df, dw as bd, dx as cN, dy as G7, dz as fN, dA as f3, dB as jc, dC as Di, dD as dN, dE as uN, dF as $s, dG as Mh, dH as hN, dI as fc, dJ as Fa, dK as pN, dL as K7, dM as mN, dN as gN, dO as vN, dP as yN, O as ri, U as xN, Z as kN, _ as wN, a0 as bN, a5 as R5, a6 as P5, a7 as CN, a8 as _N, dQ as SN, dR as Oh, dS as qa, dT as d3, dU as EN, dV as LN, dW as TN, b6 as AN, dX as NN, bH as If, b5 as Cd, dY as n2, dZ as Z7, h as Pi, d_ as p0, b2 as ws, d$ as MN, e0 as ON, e1 as J7, b0 as yr, e2 as FN, e3 as X7, e4 as Y7, e5 as Ol, e6 as u3, e7 as DN, e8 as Q7, e9 as IN, ea as RN, ak as h3, al as p3, an as m3, eb as ex, ec as PN, ed as BN, ee as HN, ef as tx, aE as $N, eg as i2, eh as nx, aZ as _d, ei as VN, ej as zN, ek as jN, el as WN, em as UN, aW as r2, bJ as qN, bI as GN, en as ix, at as ro, eo as KN, ep as ZN, bg as m0, a_ as g3, aT as Rf, eq as rx, b1 as JN, aV as sx, aR as ox, er as XN, es as ax, et as YN, aU as Fl, aX as lx, aG as QN, eu as eM, bo as tM, bp as nM, bw as g0, bu as v3, aC as v0, ev as y0, ew as x0, aD as k0, ex as y3, bv as cx, b4 as x3, ey as iM, bA as rM, ez as s2, eA as sM, eB as Sd, eC as oM, bq as Ed, bB as aM, eD as lM, bz as fx, eE as cM, by as fM, bx as dM, eF as uM, eG as hM, eH as k3, eI as pM, eJ as mM, eK as gM, eL as vM, eM as yM, eN as xM, eO as kM, eP as wM, u as dx, bb as bM, bt as CM, eQ as _M, eR as SM, aY as EM, eS as Pf, eT as w3, b3, eU as C3, eV as Bf, eW as LM, eX as ux, eY as TM, eZ as AM, bC as hx, e_ as px, bd as mx, e$ as NM, f0 as MM, f1 as OM, aF as FM, aa as DM, ab as IM, ad as RM, ae as PM, af as BM, ac as HM, f2 as B5, f3 as $M, f4 as VM, K as zM, f5 as gx, f6 as jM } from "./hooks-BxHngDSH.js";
-import { aH as ege, f9 as tge, fa as nge, f8 as ige, a$ as rge, b7 as sge, f7 as oge, ba as age } from "./hooks-BxHngDSH.js";
+import { bN as Zm, bO as $c, bP as vA, bQ as yA, bR as Jm, bS as v7, bT as Ls, az as c0, bU as Wr, bV as f0, bW as Ts, bX as Tf, aD as ii, bY as sl, bZ as Xm, b_ as xA, e as ks, b$ as Vc, c0 as kA, c1 as wA, c2 as bA, c3 as CA, c4 as Ym, c5 as y7, c6 as x7, c7 as _A, c8 as SA, c9 as EA, d as fa, ca as Qm, cb as Af, cc as LA, cd as k7, ce as e3, cf as t3, cg as TA, ch as d0, aM as w7, ci as n3, cj as AA, ck as b7, cl as C7, cm as A5, cn as Nf, co as NA, cp as MA, cq as OA, cr as Ah, cs as FA, ct as DA, cu as IA, m as ye, cv as _7, cw as RA, cx as Mf, l as Ua, cy as zc, z as xd, cz as S7, x as c1, cA as PA, n as Nh, cB as BA, q as HA, r as f1, i as $A, H as VA, J as zA, t as N5, cC as jA, G as M5, cD as WA, N as UA, cE as E7, cF as L7, cG as qA, aE as Te, F as Ve, c as F, cH as Of, cI as i3, cJ as r3, cK as Gn, cL as Vn, cM as Ff, cN as Nl, cO as kd, bJ as Ml, b as Je, cP as da, A as dt, bc as fs, B as Ft, cQ as GA, cR as s3, a as Rn, cS as O5, cT as KA, cU as ZA, cV as JA, aA as T7, aB as A7, cW as N7, cX as M7, cY as Lo, cZ as XA, c_ as F5, c$ as YA, d0 as QA, d1 as eN, w as Kt, S as xe, d2 as u0, d3 as Ci, d4 as o3, as as Oi, at as tN, d5 as O7, D as a3, bd as ol, d6 as t2, d7 as F7, d8 as D7, d9 as I7, da as R7, db as P7, aq as zt, dc as B7, dd as H7, de as $7, df as V7, dg as z7, dh as nN, di as iN, dj as h0, dk as j7, C as rN, bp as sN, dl as Fi, ay as Zo, g as hn, aw as l3, dm as D5, dn as oN, aC as W7, dp as U7, dq as wd, dr as aN, f as ua, ds as Jo, dt as q7, du as lN, dv as I5, dw as al, dx as c3, dy as Df, dz as bd, dA as cN, dB as G7, dC as fN, dD as f3, dE as jc, dF as Di, dG as dN, dH as uN, dI as $s, dJ as Mh, dK as hN, dL as fc, dM as Fa, dN as pN, dO as K7, dP as mN, dQ as gN, dR as vN, dS as yN, O as ri, U as xN, Z as kN, _ as wN, a0 as bN, a5 as R5, a6 as P5, a7 as CN, a8 as _N, dT as SN, dU as Oh, dV as qa, dW as d3, dX as EN, dY as LN, dZ as TN, ba as AN, d_ as NN, bK as If, b9 as Cd, d$ as n2, e0 as Z7, h as Pi, e1 as p0, b6 as ws, e2 as MN, e3 as ON, e4 as J7, b4 as yr, e5 as FN, e6 as X7, e7 as Y7, e8 as Ol, e9 as u3, ea as DN, eb as Q7, ec as IN, ed as RN, ao as h3, ap as p3, ar as m3, ee as ex, ef as PN, eg as BN, eh as HN, ei as tx, aI as $N, ej as i2, ek as nx, b1 as _d, el as VN, em as zN, en as jN, eo as WN, ep as UN, a_ as r2, bM as qN, bL as GN, eq as ix, ax as ro, er as KN, es as ZN, bj as m0, b2 as g3, aX as Rf, et as rx, b5 as JN, aZ as sx, aV as ox, eu as XN, ev as ax, ew as YN, aY as Fl, a$ as lx, aK as QN, ex as eM, br as tM, bs as nM, bz as g0, bx as v3, aG as v0, ey as y0, ez as x0, aH as k0, eA as y3, by as cx, b8 as x3, eB as iM, bD as rM, eC as s2, eD as sM, eE as Sd, eF as oM, bt as Ed, bE as aM, eG as lM, bC as fx, eH as cM, bB as fM, bA as dM, eI as uM, eJ as hM, eK as k3, eL as pM, eM as mM, eN as gM, eO as vM, eP as yM, eQ as xM, eR as kM, eS as wM, u as dx, bf as bM, bw as CM, eT as _M, eU as SM, b0 as EM, eV as Pf, eW as w3, b7 as b3, eX as C3, eY as Bf, eZ as LM, e_ as ux, e$ as TM, f0 as AM, bF as hx, f1 as px, bh as mx, f2 as NM, f3 as MM, f4 as OM, aJ as FM, aa as DM, ab as IM, ad as RM, ae as PM, af as BM, ac as HM, f5 as B5, f6 as $M, f7 as VM, K as zM, f8 as gx, f9 as jM } from "./hooks-ncaiQCro.js";
+import { aL as ege, fc as tge, fd as nge, fb as ige, b3 as rge, bb as sge, fa as oge, be as age } from "./hooks-ncaiQCro.js";
 import { jsxs as x, jsx as f, Fragment as Ge } from "react/jsx-runtime";
 import * as Se from "react";
 import be, { forwardRef as B, createContext as li, useRef as _e, useState as X, useCallback as Ze, useContext as Kn, useMemo as we, useEffect as Ae, PureComponent as WM, useId as go, useTransition as UM, useLayoutEffect as ha, memo as Hf, Fragment as Hr, isValidElement as vx, cloneElement as _3, createElement as o2, useDebugValue as yx, createRef as qM, version as H5, useImperativeHandle as w0, Children as xx } from "react";
@@ -74806,6 +74806,8 @@ function J4e({ title: t, description: e, emoji: n, actions: i }) {
 }
 const A3e = B(({ title: t, children: e }, n) => (jM(t, {
   disallowEmpty: !0
+}, {
+  componentName: "WidgetSection"
 }), x("div", {
   ref: n,
   className: "flex flex-col gap-2",

package/dist/f0.d.ts

@@ -10,6 +10,7 @@ import { AvatarListCellValue as AvatarListCellValue_2 } from './types/avatarList
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { AvatarProps as AvatarProps_2 } from '@radix-ui/react-avatar';
 import { baseColors } from '@factorialco/f0-core';
+import { BigNumberProps as BigNumberProps_2 } from './types';
 import { BlockContentExtraProps } from './blocks/BlockContent';
 import { BlockProps } from './blocks/Block';
 import { CategoryBarProps } from './CategoryBarChart';
@@ -561,6 +562,14 @@ declare type BaseTag<T extends {
     type: string;
 }> = T & WithTooltipDescription;
 
+export declare type BigNumberProps = {
+    value: Numeric | NumberWithFormatter | number;
+    label?: string;
+    trend?: boolean | TrendConfig;
+    comparisonHint?: string;
+    comparison: Numeric | NumberWithFormatter | number;
+};
+
 export declare const buildTranslations: (translations: TranslationsType) => TranslationsType;
 
 /**
@@ -2212,6 +2221,13 @@ export declare type F0AvatarTeamProps = {
     badge?: AvatarBadge;
 } & Pick<BaseAvatarProps, "aria-label" | "aria-labelledby">;
 
+export declare const F0BigNumber: {
+    ({ label, ...props }: BigNumberProps_2): JSX_2.Element;
+    displayName: string;
+} & {
+    Skeleton: () => JSX_2.Element;
+};
+
 export declare const F0Button: ForwardRefExoticComponent<Omit<ButtonInternalProps, "style" | "className" | "variant" | "pressed" | "append" | "compact" | "noAutoTooltip" | "noTitle"> & {
 variant?: Exclude<ButtonInternalProps["variant"], "ai">;
 } & RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
@@ -3373,13 +3389,128 @@ declare type NumberFilterValue = {
     };
 } | undefined;
 
-declare interface NumericValue {
-    number: number;
-    units?: string;
-    unitsPosition?: "left" | "right";
-    decimalPlaces?: number | undefined;
+export declare type NumberWithFormatter = NumericWithFormatter & {
+    animated?: boolean;
+};
+
+declare type Numeric = NumericValue | number | undefined | null;
+
+/**
+ * Formats a numeric value according to the provided options.
+ *
+ * @param value - The numeric value to format.
+ * @param options - The formatting options.
+ * @returns The formatted value as a string.
+ */
+declare type NumericFormatter = (value: Numeric, options?: NumericFormatterOptions) => string;
+
+/**
+ * Configuration options for the numeric formatter.
+ */
+declare type NumericFormatterOptions = {
+    /**
+     * Locale string for number formatting (e.g., "en-US", "es-ES", "de-DE").
+     * Determines the decimal separator and other locale-specific formatting rules.
+     *
+     * @default "en-US"
+     */
     locale?: string;
-}
+    /**
+     * Maximum number of decimal places to display.
+     * The formatter will round the number to this precision.
+     *
+     * @default 2
+     */
+    decimalPlaces?: number;
+    /**
+     * Whether to hide the units from the formatted value.
+     *
+     * @default false
+     */
+    hideUnits?: boolean;
+    /**
+     * Whether to space the units from the formatted value.
+     *
+     * @default false
+     */
+    unitsSpaced?: boolean;
+    /**
+     * Whether to use compact notation for the formatted value.
+     *
+     * @default false
+     */
+    compact?: boolean;
+    /**
+     * Placeholder text to return when value is undefined or null.
+     */
+    emptyPlaceholder?: string;
+    /**
+     * Whether to use grouping for the formatted value.
+     *
+     * @default true
+     */
+    useGrouping?: boolean;
+};
+
+/**
+ * Represents a numeric value that can be formatted with optional units.
+ *
+ * The value can be provided in two formats:
+ * - `value`: Direct numeric value (e.g., 123.45)
+ * - `value_x100`: Value stored as integer multiplied by 100 (e.g., 12345 represents 123.45)
+ *
+ * @example
+ * ```ts
+ * // Direct value
+ * const directValue: NumericValue = { value: 123.45, units: "€" }
+ *
+ * // Value stored as x100 (useful for avoiding floating point precision issues)
+ * const x100Value: NumericValue = { value_x100: 12345, units: "€" }
+ * ```
+ */
+declare type NumericValue = {
+    /**
+     * Optional unit string to append or prepend to the formatted number.
+     * Common examples: "€", "$", "kg", "%", etc.
+     */
+    units?: string;
+    /**
+     * Position of the units relative to the number.
+     * - "prepend": Units appear before the number (e.g., "$123.45")
+     * - "append": Units appear after the number (e.g., "123.45€")
+     *
+     * @default "append"
+     */
+    unitsPosition?: "prepend" | "append";
+} & ({
+    /**
+     * Direct numeric value to format.
+     */
+    value: number | undefined;
+} | {
+    /**
+     * Numeric value stored as an integer multiplied by 100.
+     * This format is useful for avoiding floating-point precision issues.
+     * The formatter will automatically divide by 100 before formatting.
+     *
+     * @example
+     * value_x100: 12345 represents 123.45
+     */
+    value_x100: number | undefined;
+});
+
+/**
+ * A numeric value that can be formatted with an optional formatter and options.
+ *
+ * @param value - The numeric value to format.
+ * @param formatter - The formatter to use.
+ * @param formatterOptions - The formatting options.
+ */
+declare type NumericWithFormatter = {
+    numericValue: NumericValue;
+    formatter?: NumericFormatter;
+    formatterOptions?: NumericFormatterOptions;
+};
 
 declare type OnBulkActionCallback<Record extends RecordType, Filters extends FiltersDefinition> = (...args: [
 action: BulkAction,
@@ -3788,6 +3919,14 @@ declare type RegularAction = BaseAction & {
     variant: ButtonVariant;
 };
 
+/**
+ * A numeric value that can be formatted with an optional formatter and options.
+ * This is a relaxed version of NumericWithFormatter that allows the numeric value to be a Numeric.
+ */
+declare type RelaxedNumericWithFormatter = Omit<NumericWithFormatter, "numericValue"> & {
+    numericValue: Numeric;
+};
+
 declare type RendererDefinition = ValueDisplayRendererDefinition;
 
 export declare type ResolvedRecordType<R> = R extends RecordType ? R : RecordType;
@@ -4095,13 +4234,16 @@ export declare type TagBalanceProps = {
      */
     nullText?: string;
     /**
-     * Amount to display next to the tag
+     * Value to display next to the tag can be a number, a Numeric or a NumericWithFormatter
      */
-    amount?: number | NumericValue | null;
+    amount: RelaxedNumericWithFormatter | Numeric;
 } & ({
-    percentage: number | Omit<NumericValue, "units" | "unitsPosition">;
+    percentage: (Omit<RelaxedNumericWithFormatter, "value"> & {
+        value: Omit<Numeric, "units" | "unitsPosition">;
+    }) | Omit<Numeric, "units" | "unitsPosition">;
 } | {
     percentage?: null;
+    formatterOptions?: undefined;
 });
 
 export declare interface TagCompanyProps {
@@ -4293,6 +4435,11 @@ declare type TranslationShape<T> = {
 
 export declare type TranslationsType = TranslationShape<typeof defaultTranslations>;
 
+export declare type TrendConfig = {
+    show?: boolean;
+    invertStatus?: boolean;
+};
+
 export declare const TwoColumnLayout: ForwardRefExoticComponent<Omit<TwoColumnLayoutProps & RefAttributes<HTMLDivElement>, "ref"> & RefAttributes<HTMLElement | SVGElement>>;
 
 export declare interface TwoColumnLayoutProps {
@@ -4802,6 +4949,11 @@ declare module "gridstack" {
 }
 
 
+declare namespace Calendar {
+    var displayName: string;
+}
+
+
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
         moodTracker: {
@@ -4809,8 +4961,3 @@ declare module "@tiptap/core" {
         };
     }
 }
-
-
-declare namespace Calendar {
-    var displayName: string;
-}