@factorialco/f0-react 1.391.0 → 1.392.0

package/dist/ai.d.ts

@@ -284,6 +284,12 @@ export declare function Blockquote({ children, ...props }: React.HTMLAttributes<
 
 export declare const ChatSpinner: ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & RefAttributes<SVGSVGElement>>;
 
+/**
+ * CSS RGB color string type
+ * @example 'rgb(255, 0, 0)' or 'rgb(255,0,0)'
+ */
+declare type CSSRgbString = `rgb(${number}, ${number}, ${number})` | `rgb(${number},${number},${number})`;
+
 export declare const defaultTranslations: {
     readonly countries: {
         ad: string;
@@ -1025,6 +1031,35 @@ export declare interface F0AiCollapsibleMessageProps {
  */
 export declare const F0AiFullscreenChat: () => JSX_2.Element | null;
 
+export declare class F0AiMask {
+    readonly element: HTMLElement;
+    private canvas;
+    private options;
+    private running;
+    private disposed;
+    private startTime;
+    private lastTime;
+    private rafId;
+    private glr;
+    private observer?;
+    constructor(options?: MaskOptions);
+    start(): void;
+    pause(): void;
+    dispose(): void;
+    resize(width: number, height: number, ratio?: number): void;
+    /**
+     * Automatically resizes the canvas to match the dimensions of the given element.
+     * @note using ResizeObserver
+     */
+    autoResize(sourceElement: HTMLElement): void;
+    fadeIn(): Promise<void>;
+    fadeOut(): Promise<void>;
+    private checkGLError;
+    private getGLErrorName;
+    private setupGL;
+    private render;
+}
+
 export declare function F0AuraVoiceAnimation({ size, state, color, colorShift, audioTrack, themeMode, className, ref, ...props }: F0AuraVoiceAnimationProps & ComponentProps<"div"> & VariantProps<typeof F0AuraVoiceAnimationVariants>): JSX_2.Element;
 
 export declare interface F0AuraVoiceAnimationProps {
@@ -1290,6 +1325,62 @@ declare type Join<T extends string[], D extends string> = T extends [] ? never :
 
 export declare function Li({ children, ...props }: React.HTMLAttributes<HTMLLIElement>): JSX_2.Element;
 
+declare type MaskOptions = {
+    /**
+     * The width of the Mask element.
+     * @default 600
+     */
+    width?: number;
+    /**
+     * The height of the Mask element.
+     * @default 600
+     */
+    height?: number;
+    /**
+     * Device pixel ratio multiplier; can be less than 1.
+     */
+    ratio?: number;
+    /**
+     * Color mode. Upon what background color will the element be displayed.
+     * - dark: optimize for dark background. (clean and luminous glow. may be invisible on light backgrounds.)
+     * - light: optimize for light background. (high saturation glow. not elegant on dark backgrounds.)
+     * @default light
+     * @note It's not possible to make a style that works well on both light and dark backgrounds.
+     * @note If you do not know the background color, start with light.
+     */
+    mode?: "dark" | "light";
+    /**
+     * Color list.
+     * @default ['rgb(57, 182, 255)', 'rgb(189, 69, 251)', 'rgb(255, 87, 51)', 'rgb(255, 214, 0)']
+     * @note The color list must be specified with 4 colors in an array, formatted as rgb color strings.
+     */
+    colors?: [CSSRgbString, CSSRgbString, CSSRgbString, CSSRgbString];
+    /**
+     * The width of the border.
+     * @default 8
+     */
+    borderWidth?: number;
+    /**
+     * The width of the glow effect.
+     * @default 200
+     *
+     */
+    glowWidth?: number;
+    /**
+     * The border radius.
+     * @default 8
+     */
+    borderRadius?: number;
+    /**
+     * Custom class names for wrapper and canvas elements.
+     */
+    classNames?: string;
+    /**
+     * Custom styles for wrapper and canvas elements.
+     */
+    styles?: Partial<CSSStyleDeclaration>;
+};
+
 export declare function Ol({ children, ...props }: React.HTMLAttributes<HTMLOListElement>): JSX_2.Element;
 
 export declare type OneIconSize = (typeof oneIconSizes)[number];

package/dist/ai.js

@@ -1,26 +1,27 @@
-import { A as e, B as t, C as n, q as o, E as i, h as r, F as l, a as c, D as A, i as u, b as F, j as h, w as C, x as m, y as T, z as d, c as f, r as S, s as p, t as I, H as g, I as k, m as x, L as H, O as P, v as b, P as w, S as M, T as O, n as v, o as D, p as E, U as L, k as R, l as q, d as y, e as z, u as B, g as U, f as j } from "./F0AiChat-nPbqtFaA.js";
+import { A as e, B as t, C as i, q as n, E as o, h as r, F as l, a as A, D as c, i as F, b as u, j as h, w as C, x as d, y as m, z as T, c as f, r as S, s as p, t as I, H as g, I as k, m as x, L as H, O as M, v as P, P as b, S as w, T as O, n as v, o as D, p as E, U as L, k as R, l as q, d as y, e as z, u as B, g as U, f as j } from "./F0AiChat-nPbqtFaA.js";
 import { defaultTranslations as G } from "./i18n-provider-defaults.js";
-import { A as K, F as N, c as Q, b as W, a as X, o as Y, u as Z } from "./F0HILActionConfirmation-B5UWkFgg.js";
+import { A as K, F as N, c as Q, d as W, b as X, a as Y, o as Z, u as _ } from "./F0HILActionConfirmation-C_1UQkak.js";
 export {
   e as A,
   K as AiChatTranslationsProvider,
   t as Blockquote,
-  n as ChatSpinner,
-  o as Em,
-  i as EntityRef,
+  i as ChatSpinner,
+  n as Em,
+  o as EntityRef,
   r as F0ActionItem,
   l as F0AiChat,
-  c as F0AiChatProvider,
-  A as F0AiChatTextArea,
-  u as F0AiCollapsibleMessage,
-  F as F0AiFullscreenChat,
-  N as F0AuraVoiceAnimation,
+  A as F0AiChatProvider,
+  c as F0AiChatTextArea,
+  F as F0AiCollapsibleMessage,
+  u as F0AiFullscreenChat,
+  N as F0AiMask,
+  Q as F0AuraVoiceAnimation,
   h as F0DataDownload,
-  Q as F0HILActionConfirmation,
+  W as F0HILActionConfirmation,
   C as F0MessageSources,
-  m as F0OneIcon,
-  T as F0OneSwitch,
-  d as F0Thinking,
+  d as F0OneIcon,
+  m as F0OneSwitch,
+  T as F0Thinking,
   f as FullscreenChatContext,
   S as H1,
   p as H2,
@@ -29,23 +30,23 @@ export {
   k as I18nProvider,
   x as Image,
   H as Li,
-  P as Ol,
-  b as P,
-  w as Pre,
-  M as Strong,
+  M as Ol,
+  P,
+  b as Pre,
+  w as Strong,
   O as Table,
   v as TableSimple,
   D as Td,
   E as Th,
   L as Ul,
-  W as actionItemStatuses,
-  X as aiTranslations,
+  X as actionItemStatuses,
+  Y as aiTranslations,
   G as defaultTranslations,
   R as f0MarkdownRenderers,
   q as f0MarkdownRenderersSimple,
-  Y as oneIconSizes,
+  Z as oneIconSizes,
   y as useAiChat,
-  Z as useAiChatTranslations,
+  _ as useAiChatTranslations,
   z as useDefaultCopilotActions,
   B as useI18n,
   U as useMessageSourcesAction,

package/dist/f0.d.ts

@@ -1625,6 +1625,12 @@ export declare const createPageLayoutBlock: <Props = unknown>(displayName: strin
 
 export declare const createPageLayoutBlockGroup: <Props = unknown>(displayName: string, Component: React.ComponentType<Props>) => React.ComponentType<Props> & PageLayoutGroupComponent;
 
+/**
+ * CSS RGB color string type
+ * @example 'rgb(255, 0, 0)' or 'rgb(255,0,0)'
+ */
+declare type CSSRgbString = `rgb(${number}, ${number}, ${number})` | `rgb(${number},${number},${number})`;
+
 /**
  * Extracts the current filters type from filter options.
  * Creates a type mapping filter keys to their respective value types.
@@ -3077,6 +3083,35 @@ export declare interface F0AiCollapsibleMessageProps {
  */
 export declare const F0AiFullscreenChat: () => JSX_2.Element | null;
 
+export declare class F0AiMask {
+    readonly element: HTMLElement;
+    private canvas;
+    private options;
+    private running;
+    private disposed;
+    private startTime;
+    private lastTime;
+    private rafId;
+    private glr;
+    private observer?;
+    constructor(options?: MaskOptions);
+    start(): void;
+    pause(): void;
+    dispose(): void;
+    resize(width: number, height: number, ratio?: number): void;
+    /**
+     * Automatically resizes the canvas to match the dimensions of the given element.
+     * @note using ResizeObserver
+     */
+    autoResize(sourceElement: HTMLElement): void;
+    fadeIn(): Promise<void>;
+    fadeOut(): Promise<void>;
+    private checkGLError;
+    private getGLErrorName;
+    private setupGL;
+    private render;
+}
+
 export declare const F0Alert: WithDataTestIdReturnType_3<({ title, description, action, link, icon, variant, }: F0AlertProps) => JSX_2.Element>;
 
 export declare interface F0AlertProps {
@@ -6277,6 +6312,62 @@ export declare interface LoadingStateProps {
 /** Margin tokens (spacing + auto for centering) */
 export declare type MarginToken = SpacingToken | "auto";
 
+declare type MaskOptions = {
+    /**
+     * The width of the Mask element.
+     * @default 600
+     */
+    width?: number;
+    /**
+     * The height of the Mask element.
+     * @default 600
+     */
+    height?: number;
+    /**
+     * Device pixel ratio multiplier; can be less than 1.
+     */
+    ratio?: number;
+    /**
+     * Color mode. Upon what background color will the element be displayed.
+     * - dark: optimize for dark background. (clean and luminous glow. may be invisible on light backgrounds.)
+     * - light: optimize for light background. (high saturation glow. not elegant on dark backgrounds.)
+     * @default light
+     * @note It's not possible to make a style that works well on both light and dark backgrounds.
+     * @note If you do not know the background color, start with light.
+     */
+    mode?: "dark" | "light";
+    /**
+     * Color list.
+     * @default ['rgb(57, 182, 255)', 'rgb(189, 69, 251)', 'rgb(255, 87, 51)', 'rgb(255, 214, 0)']
+     * @note The color list must be specified with 4 colors in an array, formatted as rgb color strings.
+     */
+    colors?: [CSSRgbString, CSSRgbString, CSSRgbString, CSSRgbString];
+    /**
+     * The width of the border.
+     * @default 8
+     */
+    borderWidth?: number;
+    /**
+     * The width of the glow effect.
+     * @default 200
+     *
+     */
+    glowWidth?: number;
+    /**
+     * The border radius.
+     * @default 8
+     */
+    borderRadius?: number;
+    /**
+     * Custom class names for wrapper and canvas elements.
+     */
+    classNames?: string;
+    /**
+     * Custom styles for wrapper and canvas elements.
+     */
+    styles?: Partial<CSSStyleDeclaration>;
+};
+
 declare const MAX_EXPANDED_ACTIONS = 2;
 
 declare type MentionedUser = {

package/dist/f0.js

@@ -6,8 +6,8 @@ import q, { forwardRef as Ke, useRef as Y, useImperativeHandle as Xc, Children a
 import { createPortal as Ao, unstable_batchedUpdates as en, flushSync as nd } from "react-dom";
 import { L as Oo, C as id, i as Mo, S as gs, a as sd, f as Jn, b as _r, c as od, A as ad, d as tn, e as Io, E as ld, g as sn, h as cd, j as dd, k as ud, l as ir, m as Lo, u as fd, G as hd, n as md, o as vs, p as pd, q as Po, r as gd, B as Fo, X as zo, Y as hi, s as vd, t as Bo, v as yd, w as bd, x as xd, y as wd, z as _d, D as Cd, F as Ed, H as Sd, I as ys, J as kd, K as Dd, M as Nd, N as Rd, O as Td, P as Ad, Q as Od, R as Md, V as Id, T as Ld, U as mi, W as Vo, Z as Pd, _ as Fd, $ as zd, a0 as Bd, a1 as Ho, a2 as jo, a3 as Vd, a4 as $o, a5 as Wo, a6 as Hd, a7 as jd, a8 as $d, a9 as Wd } from "./DataCollectionStorageProvider-6el79_MC.js";
 import { af as cb, aa as db, ad as ub, ae as fb, ab as hb, ac as mb, ag as pb, ah as gb, ai as vb, aj as yb } from "./DataCollectionStorageProvider-6el79_MC.js";
-import { A as xb, F as wb, c as _b, b as Cb, a as Eb, o as Sb, u as kb } from "./F0HILActionConfirmation-B5UWkFgg.js";
-import { defaultTranslations as Nb } from "./i18n-provider-defaults.js";
+import { A as xb, F as wb, c as _b, d as Cb, b as Eb, a as Sb, o as kb, u as Db } from "./F0HILActionConfirmation-C_1UQkak.js";
+import { defaultTranslations as Rb } from "./i18n-provider-defaults.js";
 import './f0.css';const Gd = {
   xs: 1,
   sm: 2,
@@ -17682,8 +17682,9 @@ export {
   Uv as F0AiChatTextArea,
   Zv as F0AiCollapsibleMessage,
   qv as F0AiFullscreenChat,
+  wb as F0AiMask,
   vv as F0Alert,
-  wb as F0AuraVoiceAnimation,
+  _b as F0AuraVoiceAnimation,
   Kv as F0Avatar,
   Ld as F0AvatarAlert,
   Xv as F0AvatarCompany,
@@ -17712,7 +17713,7 @@ export {
   yv as F0FilterPickerContent,
   _v as F0Form,
   Dv as F0GridStack,
-  _b as F0HILActionConfirmation,
+  Cb as F0HILActionConfirmation,
   Sv as F0Heading,
   Wr as F0Icon,
   fc as F0Link,
@@ -17771,8 +17772,8 @@ export {
   Wo as UpsellingButton,
   Av as UpsellingPopover,
   tv as VerticalBarChart,
-  Cb as actionItemStatuses,
-  Eb as aiTranslations,
+  Eb as actionItemStatuses,
+  Sb as aiTranslations,
   Wg as avatarVariants,
   zy as buildTranslations,
   dv as buttonDropdownModes,
@@ -17790,7 +17791,7 @@ export {
   fu as createPageLayoutBlockGroup,
   Mv as dataCollectionLocalStorageHandler,
   gv as datepickerSizes,
-  Nb as defaultTranslations,
+  Rb as defaultTranslations,
   Zn as evaluateRenderIf,
   at as experimental,
   bv as f0FormField,
@@ -17809,13 +17810,13 @@ export {
   Ce as isZodType,
   hv as linkVariants,
   Ky as modules,
-  Sb as oneIconSizes,
+  kb as oneIconSizes,
   hb as predefinedPresets,
   mb as selectSizes,
   mv as tagDotColors,
   dt as unwrapZodSchema,
   Xy as useAiChat,
-  kb as useAiChatTranslations,
+  Db as useAiChatTranslations,
   Yy as useData,
   Jy as useDataSource,
   Qy as useDefaultCopilotActions,