babylonjs-gui-editor 5.26.1 → 5.27.1

package/babylon.guiEditor.d.ts

@@ -1235,6 +1235,9 @@ declare module BABYLON.GuiEditor.SharedUIComponents {
         onPanButtonClicked?: () => void;
         onZoomButtonClicked?: () => void;
         onFitButtonClicked?: () => void;
+        onArtboardColorChanged?: (newColor: string) => void;
+        artboardColor?: string;
+        artboardColorPickerColor?: string;
     }
     export var CommandBarComponent: React.FC<ICommandBarComponentProps>;
 
@@ -1318,6 +1321,104 @@ declare module BABYLON.GuiEditor.SharedUIComponents {
 
 
 
+}
+declare module BABYLON {
+
+}
+declare module BABYLON.GuiEditor.SharedUIComponents {
+        export interface IColorComponentEntryProps {
+        value: number;
+        label: string;
+        max?: number;
+        min?: number;
+        onChange: (value: number) => void;
+        disabled?: boolean;
+        lockObject: BABYLON.GuiEditor.SharedUIComponents.LockObject;
+    }
+    export class ColorComponentEntry extends React.Component<IColorComponentEntryProps> {
+        constructor(props: IColorComponentEntryProps);
+        updateValue(valueString: string): void;
+        lock(): void;
+        unlock(): void;
+        render(): JSX.Element;
+    }
+
+
+
+}
+declare module BABYLON {
+
+}
+declare module BABYLON.GuiEditor.SharedUIComponents {
+        /**
+     * Interface used to specify creation options for color picker
+     */
+    export interface IColorPickerProps {
+        color: Color3 | Color4;
+        linearhint?: boolean;
+        debugMode?: boolean;
+        onColorChanged?: (color: Color3 | Color4) => void;
+        lockObject: BABYLON.GuiEditor.SharedUIComponents.LockObject;
+        backgroundColor?: string;
+    }
+    /**
+     * Interface used to specify creation options for color picker
+     */
+    export interface IColorPickerState {
+        color: Color3;
+        alpha: number;
+    }
+    /**
+     * Class used to create a color picker
+     */
+    export class ColorPicker extends React.Component<IColorPickerProps, IColorPickerState> {
+        private _saturationRef;
+        private _hueRef;
+        private _isSaturationPointerDown;
+        private _isHuePointerDown;
+        constructor(props: IColorPickerProps);
+        shouldComponentUpdate(nextProps: IColorPickerProps, nextState: IColorPickerState): boolean;
+        onSaturationPointerDown(evt: React.PointerEvent<HTMLDivElement>): void;
+        onSaturationPointerUp(evt: React.PointerEvent<HTMLDivElement>): void;
+        onSaturationPointerMove(evt: React.PointerEvent<HTMLDivElement>): void;
+        onHuePointerDown(evt: React.PointerEvent<HTMLDivElement>): void;
+        onHuePointerUp(evt: React.PointerEvent<HTMLDivElement>): void;
+        onHuePointerMove(evt: React.PointerEvent<HTMLDivElement>): void;
+        private _evaluateSaturation;
+        private _evaluateHue;
+        componentDidUpdate(): void;
+        raiseOnColorChanged(): void;
+        render(): JSX.Element;
+    }
+
+
+
+}
+declare module BABYLON {
+
+}
+declare module BABYLON.GuiEditor.SharedUIComponents {
+        export interface IHexColorProps {
+        value: string;
+        expectedLength: number;
+        onChange: (value: string) => void;
+        lockObject: BABYLON.GuiEditor.SharedUIComponents.LockObject;
+    }
+    export class HexColor extends React.Component<IHexColorProps, {
+        hex: string;
+    }> {
+        constructor(props: IHexColorProps);
+        shouldComponentUpdate(nextProps: IHexColorProps, nextState: {
+            hex: string;
+        }): boolean;
+        lock(): void;
+        unlock(): void;
+        updateHexValue(valueString: string): void;
+        render(): JSX.Element;
+    }
+
+
+
 }
 declare module BABYLON {
 
@@ -1346,6 +1447,85 @@ declare module BABYLON.GuiEditor.SharedUIComponents {
 
 
 
+}
+declare module BABYLON {
+
+}
+declare module BABYLON.GuiEditor.SharedUIComponents {
+        export interface IColorLineComponentProps {
+        label: string;
+        target: any;
+        propertyName: string;
+        onPropertyChangedObservable: Observable<BABYLON.GuiEditor.SharedUIComponents.PropertyChangedEvent>;
+        onChange?: () => void;
+        isLinear?: boolean;
+        icon?: string;
+        iconLabel?: string;
+        disableAlpha?: boolean;
+        lockObject: BABYLON.GuiEditor.SharedUIComponents.LockObject;
+    }
+    interface IColorLineComponentState {
+        isExpanded: boolean;
+        color: Color4;
+    }
+    export class ColorLineComponent extends React.Component<IColorLineComponentProps, IColorLineComponentState> {
+        constructor(props: IColorLineComponentProps);
+        shouldComponentUpdate(nextProps: IColorLineComponentProps, nextState: IColorLineComponentState): boolean;
+        getValue(props?: Readonly<IColorLineComponentProps> & Readonly<{
+            children?: React.ReactNode;
+        }>): Color4;
+        setColorFromString(colorString: string): void;
+        setColor(newColor: Color4): void;
+        switchExpandState(): void;
+        updateStateR(value: number): void;
+        updateStateG(value: number): void;
+        updateStateB(value: number): void;
+        updateStateA(value: number): void;
+        copyToClipboard(): void;
+        private _convertToColor;
+        private _toColor3;
+        render(): JSX.Element;
+    }
+
+
+
+}
+declare module BABYLON {
+
+}
+declare module BABYLON.GuiEditor.SharedUIComponents {
+        export interface IColorPickerComponentProps {
+        value: Color4 | Color3;
+        linearHint?: boolean;
+        onColorChanged: (newOne: string) => void;
+        icon?: string;
+        iconLabel?: string;
+        shouldPopRight?: boolean;
+        lockObject?: BABYLON.GuiEditor.SharedUIComponents.LockObject;
+        backgroundColor?: string;
+    }
+    interface IColorPickerComponentState {
+        pickerEnabled: boolean;
+        color: Color3 | Color4;
+        hex: string;
+    }
+    export class ColorPickerLineComponent extends React.Component<IColorPickerComponentProps, IColorPickerComponentState> {
+        private _floatRef;
+        private _floatHostRef;
+        private _coverRef;
+        constructor(props: IColorPickerComponentProps);
+        syncPositions(): void;
+        shouldComponentUpdate(nextProps: IColorPickerComponentProps, nextState: IColorPickerComponentState): boolean;
+        getHexString(props?: Readonly<IColorPickerComponentProps> & Readonly<{
+            children?: React.ReactNode;
+        }>): string;
+        componentDidUpdate(): void;
+        componentDidMount(): void;
+        render(): JSX.Element;
+    }
+
+
+
 }
 declare module BABYLON {
 
@@ -1369,6 +1549,42 @@ declare module BABYLON.GuiEditor.SharedUIComponents {
 
 
 
+}
+declare module BABYLON {
+
+}
+declare module BABYLON.GuiEditor.SharedUIComponents {
+        interface INumericInputComponentProps {
+        label: string;
+        value: number;
+        step?: number;
+        onChange: (value: number) => void;
+        precision?: number;
+        icon?: string;
+        iconLabel?: string;
+        lockObject: BABYLON.GuiEditor.SharedUIComponents.LockObject;
+    }
+    export class NumericInputComponent extends React.Component<INumericInputComponentProps, {
+        value: string;
+    }> {
+        static defaultProps: {
+            step: number;
+        };
+        private _localChange;
+        constructor(props: INumericInputComponentProps);
+        componentWillUnmount(): void;
+        shouldComponentUpdate(nextProps: INumericInputComponentProps, nextState: {
+            value: string;
+        }): boolean;
+        updateValue(valueString: string): void;
+        onBlur(): void;
+        incrementValue(amount: number): void;
+        onKeyDown(evt: React.KeyboardEvent<HTMLInputElement>): void;
+        render(): JSX.Element;
+    }
+
+
+
 }
 declare module BABYLON {
 
@@ -3069,6 +3285,11 @@ declare module BABYLON.GuiEditor.SharedUIComponents {
         component: ICommandBarComponentProps>;
     };
     export var Default: {};
+    export var WithArtboardColor: {
+        parameters: {
+            onArtboardColorChanged: (color: string) => void;
+        };
+    };
 
 
 
@@ -3101,6 +3322,22 @@ declare module BABYLON.GuiEditor.SharedUIComponents {
 
 
 
+}
+declare module BABYLON {
+
+}
+declare module BABYLON.GuiEditor.SharedUIComponents {
+        var _default: {
+        component: typeof BABYLON.GuiEditor.SharedUIComponents.ColorPicker;
+    };
+    export var Default: {
+        args: {
+            color: Color3;
+        };
+    };
+
+
+
 }
 declare module BABYLON {
 
@@ -3130,6 +3367,48 @@ declare module BABYLON.GuiEditor.SharedUIComponents {
 
 
 
+}
+declare module BABYLON {
+
+}
+declare module BABYLON.GuiEditor.SharedUIComponents {
+        /// <reference types="react" />
+    var _default: {
+        component: typeof BABYLON.GuiEditor.SharedUIComponents.ColorLineComponent;
+    };
+    export var Default: {
+        render: (args: BABYLON.GuiEditor.SharedUIComponents.IColorLineComponentProps) => JSX.Element;
+        args: {
+            target: {};
+            label: string;
+            propertyName: string;
+            lockObject: {
+                lock: boolean;
+            };
+            onPropertyChangedObservable: Observable<BABYLON.GuiEditor.SharedUIComponents.PropertyChangedEvent>;
+        };
+    };
+
+
+
+}
+declare module BABYLON {
+
+}
+declare module BABYLON.GuiEditor.SharedUIComponents {
+        /// <reference types="react" />
+    var _default: {
+        component: typeof BABYLON.GuiEditor.SharedUIComponents.ColorPickerLineComponent;
+    };
+    export var Default: {
+        render: (args: BABYLON.GuiEditor.SharedUIComponents.IColorPickerComponentProps) => JSX.Element;
+        args: {
+            value: Color3;
+        };
+    };
+
+
+
 }
 declare module BABYLON {
 
@@ -3142,6 +3421,23 @@ declare module BABYLON.GuiEditor.SharedUIComponents {
 
 
 
+}
+declare module BABYLON {
+
+}
+declare module BABYLON.GuiEditor.SharedUIComponents {
+        var _default: {
+        component: typeof BABYLON.GuiEditor.SharedUIComponents.NumericInputComponent;
+    };
+    export var Default: {
+        args: {
+            label: string;
+            value: number;
+        };
+    };
+
+
+
 }
 declare module BABYLON {
 

package/babylon.guiEditor.module.d.ts

@@ -1540,7 +1540,7 @@ export class HexColor extends React.Component<IHexColorProps, {
 
 }
 declare module "babylonjs-gui-editor/components/bars/CommandBarComponent" {
-import * as React from "react";
+import { FC } from "react";
 export interface ICommandBarComponentProps {
     onSaveButtonClicked?: () => void;
     onSaveToSnippetButtonClicked?: () => void;
@@ -1551,8 +1551,11 @@ export interface ICommandBarComponentProps {
     onPanButtonClicked?: () => void;
     onZoomButtonClicked?: () => void;
     onFitButtonClicked?: () => void;
+    onArtboardColorChanged?: (newColor: string) => void;
+    artboardColor?: string;
+    artboardColorPickerColor?: string;
 }
-export const CommandBarComponent: React.FC<ICommandBarComponentProps>;
+export const CommandBarComponent: FC<ICommandBarComponentProps>;
 
 }
 declare module "babylonjs-gui-editor/components/bars/CommandButtonComponent" {
@@ -1615,6 +1618,96 @@ declare module "babylonjs-gui-editor/components/classNames" {
 export function ClassNames(names: any, styleObject: any): string;
 export function JoinClassNames(styleObject: any, ...names: string[]): string;
 
+}
+declare module "babylonjs-gui-editor/components/colorPicker/ColorComponentEntry" {
+import * as React from "react";
+import { LockObject } from "babylonjs-gui-editor/tabs/propertyGrids/lockObject";
+export interface IColorComponentEntryProps {
+    value: number;
+    label: string;
+    max?: number;
+    min?: number;
+    onChange: (value: number) => void;
+    disabled?: boolean;
+    lockObject: LockObject;
+}
+export class ColorComponentEntry extends React.Component<IColorComponentEntryProps> {
+    constructor(props: IColorComponentEntryProps);
+    updateValue(valueString: string): void;
+    lock(): void;
+    unlock(): void;
+    render(): JSX.Element;
+}
+
+}
+declare module "babylonjs-gui-editor/components/colorPicker/ColorPicker" {
+import * as React from "react";
+import { Color3, Color4 } from "babylonjs/Maths/math.color";
+import { LockObject } from "babylonjs-gui-editor/tabs/propertyGrids/lockObject";
+/**
+ * Interface used to specify creation options for color picker
+ */
+export interface IColorPickerProps {
+    color: Color3 | Color4;
+    linearhint?: boolean;
+    debugMode?: boolean;
+    onColorChanged?: (color: Color3 | Color4) => void;
+    lockObject: LockObject;
+    backgroundColor?: string;
+}
+/**
+ * Interface used to specify creation options for color picker
+ */
+export interface IColorPickerState {
+    color: Color3;
+    alpha: number;
+}
+/**
+ * Class used to create a color picker
+ */
+export class ColorPicker extends React.Component<IColorPickerProps, IColorPickerState> {
+    private _saturationRef;
+    private _hueRef;
+    private _isSaturationPointerDown;
+    private _isHuePointerDown;
+    constructor(props: IColorPickerProps);
+    shouldComponentUpdate(nextProps: IColorPickerProps, nextState: IColorPickerState): boolean;
+    onSaturationPointerDown(evt: React.PointerEvent<HTMLDivElement>): void;
+    onSaturationPointerUp(evt: React.PointerEvent<HTMLDivElement>): void;
+    onSaturationPointerMove(evt: React.PointerEvent<HTMLDivElement>): void;
+    onHuePointerDown(evt: React.PointerEvent<HTMLDivElement>): void;
+    onHuePointerUp(evt: React.PointerEvent<HTMLDivElement>): void;
+    onHuePointerMove(evt: React.PointerEvent<HTMLDivElement>): void;
+    private _evaluateSaturation;
+    private _evaluateHue;
+    componentDidUpdate(): void;
+    raiseOnColorChanged(): void;
+    render(): JSX.Element;
+}
+
+}
+declare module "babylonjs-gui-editor/components/colorPicker/HexColor" {
+import * as React from "react";
+import { LockObject } from "babylonjs-gui-editor/tabs/propertyGrids/lockObject";
+export interface IHexColorProps {
+    value: string;
+    expectedLength: number;
+    onChange: (value: string) => void;
+    lockObject: LockObject;
+}
+export class HexColor extends React.Component<IHexColorProps, {
+    hex: string;
+}> {
+    constructor(props: IHexColorProps);
+    shouldComponentUpdate(nextProps: IHexColorProps, nextState: {
+        hex: string;
+    }): boolean;
+    lock(): void;
+    unlock(): void;
+    updateHexValue(valueString: string): void;
+    render(): JSX.Element;
+}
+
 }
 declare module "babylonjs-gui-editor/components/Icon" {
 /// <reference types="react" />
@@ -1634,6 +1727,85 @@ export type LabelProps = {
 };
 export const Label: React.FC<LabelProps>;
 
+}
+declare module "babylonjs-gui-editor/components/lines/ColorLineComponent" {
+import * as React from "react";
+import { Observable } from "babylonjs/Misc/observable";
+import { Color4 } from "babylonjs/Maths/math.color";
+import { PropertyChangedEvent } from "babylonjs-gui-editor/propertyChangedEvent";
+import { LockObject } from "babylonjs-gui-editor/tabs/propertyGrids/lockObject";
+export interface IColorLineComponentProps {
+    label: string;
+    target: any;
+    propertyName: string;
+    onPropertyChangedObservable: Observable<PropertyChangedEvent>;
+    onChange?: () => void;
+    isLinear?: boolean;
+    icon?: string;
+    iconLabel?: string;
+    disableAlpha?: boolean;
+    lockObject: LockObject;
+}
+interface IColorLineComponentState {
+    isExpanded: boolean;
+    color: Color4;
+}
+export class ColorLineComponent extends React.Component<IColorLineComponentProps, IColorLineComponentState> {
+    constructor(props: IColorLineComponentProps);
+    shouldComponentUpdate(nextProps: IColorLineComponentProps, nextState: IColorLineComponentState): boolean;
+    getValue(props?: Readonly<IColorLineComponentProps> & Readonly<{
+        children?: React.ReactNode;
+    }>): Color4;
+    setColorFromString(colorString: string): void;
+    setColor(newColor: Color4): void;
+    switchExpandState(): void;
+    updateStateR(value: number): void;
+    updateStateG(value: number): void;
+    updateStateB(value: number): void;
+    updateStateA(value: number): void;
+    copyToClipboard(): void;
+    private _convertToColor;
+    private _toColor3;
+    render(): JSX.Element;
+}
+export {};
+
+}
+declare module "babylonjs-gui-editor/components/lines/ColorPickerLineComponent" {
+import * as React from "react";
+import { Color4, Color3 } from "babylonjs/Maths/math.color";
+import { LockObject } from "babylonjs-gui-editor/tabs/propertyGrids/lockObject";
+export interface IColorPickerComponentProps {
+    value: Color4 | Color3;
+    linearHint?: boolean;
+    onColorChanged: (newOne: string) => void;
+    icon?: string;
+    iconLabel?: string;
+    shouldPopRight?: boolean;
+    lockObject?: LockObject;
+    backgroundColor?: string;
+}
+interface IColorPickerComponentState {
+    pickerEnabled: boolean;
+    color: Color3 | Color4;
+    hex: string;
+}
+export class ColorPickerLineComponent extends React.Component<IColorPickerComponentProps, IColorPickerComponentState> {
+    private _floatRef;
+    private _floatHostRef;
+    private _coverRef;
+    constructor(props: IColorPickerComponentProps);
+    syncPositions(): void;
+    shouldComponentUpdate(nextProps: IColorPickerComponentProps, nextState: IColorPickerComponentState): boolean;
+    getHexString(props?: Readonly<IColorPickerComponentProps> & Readonly<{
+        children?: React.ReactNode;
+    }>): string;
+    componentDidUpdate(): void;
+    componentDidMount(): void;
+    render(): JSX.Element;
+}
+export {};
+
 }
 declare module "babylonjs-gui-editor/components/lines/FileButtonLineComponent" {
 import * as React from "react";
@@ -1653,6 +1825,40 @@ export class FileButtonLineComponent extends React.Component<IFileButtonLineComp
     render(): JSX.Element;
 }
 
+}
+declare module "babylonjs-gui-editor/components/lines/NumericInputComponent" {
+import * as React from "react";
+import { LockObject } from "babylonjs-gui-editor/tabs/propertyGrids/lockObject";
+interface INumericInputComponentProps {
+    label: string;
+    value: number;
+    step?: number;
+    onChange: (value: number) => void;
+    precision?: number;
+    icon?: string;
+    iconLabel?: string;
+    lockObject: LockObject;
+}
+export class NumericInputComponent extends React.Component<INumericInputComponentProps, {
+    value: string;
+}> {
+    static defaultProps: {
+        step: number;
+    };
+    private _localChange;
+    constructor(props: INumericInputComponentProps);
+    componentWillUnmount(): void;
+    shouldComponentUpdate(nextProps: INumericInputComponentProps, nextState: {
+        value: string;
+    }): boolean;
+    updateValue(valueString: string): void;
+    onBlur(): void;
+    incrementValue(amount: number): void;
+    onKeyDown(evt: React.KeyboardEvent<HTMLInputElement>): void;
+    render(): JSX.Element;
+}
+export {};
+
 }
 declare module "babylonjs-gui-editor/components/MessageDialog" {
 import * as React from "react";
@@ -3265,6 +3471,11 @@ const _default: {
 };
 export default _default;
 export const Default: {};
+export const WithArtboardColor: {
+    parameters: {
+        onArtboardColorChanged: (color: string) => void;
+    };
+};
 
 }
 declare module "babylonjs-gui-editor/stories/bars/CommandButtonComponent.stories" {
@@ -3288,6 +3499,20 @@ export const Default: any;
 export const Wide: any;
 export const Small: any;
 
+}
+declare module "babylonjs-gui-editor/stories/colorPicker/ColorPicker.stories" {
+import { Color3 } from "babylonjs/Maths/math.color";
+import { ColorPicker } from "babylonjs-gui-editor/components/colorPicker/ColorPicker";
+const _default: {
+    component: typeof ColorPicker;
+};
+export default _default;
+export const Default: {
+    args: {
+        color: Color3;
+    };
+};
+
 }
 declare module "babylonjs-gui-editor/stories/Icon.stories" {
 /// <reference types="react" />
@@ -3311,6 +3536,47 @@ const _default: {
 export default _default;
 export const Default: any;
 
+}
+declare module "babylonjs-gui-editor/stories/lines/ColorLineComponent.stories" {
+/// <reference types="react" />
+import { Observable } from "babylonjs/Misc/observable";
+import { PropertyChangedEvent } from "babylonjs-gui-editor/propertyChangedEvent";
+import { IColorLineComponentProps } from "babylonjs-gui-editor/components/lines/ColorLineComponent";
+import { ColorLineComponent } from "babylonjs-gui-editor/components/lines/ColorLineComponent";
+const _default: {
+    component: typeof ColorLineComponent;
+};
+export default _default;
+export const Default: {
+    render: (args: IColorLineComponentProps) => JSX.Element;
+    args: {
+        target: {};
+        label: string;
+        propertyName: string;
+        lockObject: {
+            lock: boolean;
+        };
+        onPropertyChangedObservable: Observable<PropertyChangedEvent>;
+    };
+};
+
+}
+declare module "babylonjs-gui-editor/stories/lines/ColorPickerLineComponent.stories" {
+/// <reference types="react" />
+import { Color3 } from "babylonjs/Maths/math.color";
+import { IColorPickerComponentProps } from "babylonjs-gui-editor/components/lines/ColorPickerLineComponent";
+import { ColorPickerLineComponent } from "babylonjs-gui-editor/components/lines/ColorPickerLineComponent";
+const _default: {
+    component: typeof ColorPickerLineComponent;
+};
+export default _default;
+export const Default: {
+    render: (args: IColorPickerComponentProps) => JSX.Element;
+    args: {
+        value: Color3;
+    };
+};
+
 }
 declare module "babylonjs-gui-editor/stories/lines/FileButtonLineComponent.stories" {
 import { FileButtonLineComponent } from "babylonjs-gui-editor/components/lines/FileButtonLineComponent";
@@ -3320,6 +3586,20 @@ const _default: {
 export default _default;
 export const Default: {};
 
+}
+declare module "babylonjs-gui-editor/stories/lines/NumericInputComponent.stories" {
+import { NumericInputComponent } from "babylonjs-gui-editor/components/lines/NumericInputComponent";
+const _default: {
+    component: typeof NumericInputComponent;
+};
+export default _default;
+export const Default: {
+    args: {
+        label: string;
+        value: number;
+    };
+};
+
 }
 declare module "babylonjs-gui-editor/stories/MessageDialog.stories" {
 /// <reference types="react" />
@@ -4906,6 +5186,9 @@ declare module BABYLON.GuiEditor.SharedUIComponents {
         onPanButtonClicked?: () => void;
         onZoomButtonClicked?: () => void;
         onFitButtonClicked?: () => void;
+        onArtboardColorChanged?: (newColor: string) => void;
+        artboardColor?: string;
+        artboardColorPickerColor?: string;
     }
     export var CommandBarComponent: React.FC<ICommandBarComponentProps>;
 
@@ -4989,6 +5272,104 @@ declare module BABYLON.GuiEditor.SharedUIComponents {
 
 
 
+}
+declare module BABYLON {
+
+}
+declare module BABYLON.GuiEditor.SharedUIComponents {
+        export interface IColorComponentEntryProps {
+        value: number;
+        label: string;
+        max?: number;
+        min?: number;
+        onChange: (value: number) => void;
+        disabled?: boolean;
+        lockObject: BABYLON.GuiEditor.SharedUIComponents.LockObject;
+    }
+    export class ColorComponentEntry extends React.Component<IColorComponentEntryProps> {
+        constructor(props: IColorComponentEntryProps);
+        updateValue(valueString: string): void;
+        lock(): void;
+        unlock(): void;
+        render(): JSX.Element;
+    }
+
+
+
+}
+declare module BABYLON {
+
+}
+declare module BABYLON.GuiEditor.SharedUIComponents {
+        /**
+     * Interface used to specify creation options for color picker
+     */
+    export interface IColorPickerProps {
+        color: Color3 | Color4;
+        linearhint?: boolean;
+        debugMode?: boolean;
+        onColorChanged?: (color: Color3 | Color4) => void;
+        lockObject: BABYLON.GuiEditor.SharedUIComponents.LockObject;
+        backgroundColor?: string;
+    }
+    /**
+     * Interface used to specify creation options for color picker
+     */
+    export interface IColorPickerState {
+        color: Color3;
+        alpha: number;
+    }
+    /**
+     * Class used to create a color picker
+     */
+    export class ColorPicker extends React.Component<IColorPickerProps, IColorPickerState> {
+        private _saturationRef;
+        private _hueRef;
+        private _isSaturationPointerDown;
+        private _isHuePointerDown;
+        constructor(props: IColorPickerProps);
+        shouldComponentUpdate(nextProps: IColorPickerProps, nextState: IColorPickerState): boolean;
+        onSaturationPointerDown(evt: React.PointerEvent<HTMLDivElement>): void;
+        onSaturationPointerUp(evt: React.PointerEvent<HTMLDivElement>): void;
+        onSaturationPointerMove(evt: React.PointerEvent<HTMLDivElement>): void;
+        onHuePointerDown(evt: React.PointerEvent<HTMLDivElement>): void;
+        onHuePointerUp(evt: React.PointerEvent<HTMLDivElement>): void;
+        onHuePointerMove(evt: React.PointerEvent<HTMLDivElement>): void;
+        private _evaluateSaturation;
+        private _evaluateHue;
+        componentDidUpdate(): void;
+        raiseOnColorChanged(): void;
+        render(): JSX.Element;
+    }
+
+
+
+}
+declare module BABYLON {
+
+}
+declare module BABYLON.GuiEditor.SharedUIComponents {
+        export interface IHexColorProps {
+        value: string;
+        expectedLength: number;
+        onChange: (value: string) => void;
+        lockObject: BABYLON.GuiEditor.SharedUIComponents.LockObject;
+    }
+    export class HexColor extends React.Component<IHexColorProps, {
+        hex: string;
+    }> {
+        constructor(props: IHexColorProps);
+        shouldComponentUpdate(nextProps: IHexColorProps, nextState: {
+            hex: string;
+        }): boolean;
+        lock(): void;
+        unlock(): void;
+        updateHexValue(valueString: string): void;
+        render(): JSX.Element;
+    }
+
+
+
 }
 declare module BABYLON {
 
@@ -5017,6 +5398,85 @@ declare module BABYLON.GuiEditor.SharedUIComponents {
 
 
 
+}
+declare module BABYLON {
+
+}
+declare module BABYLON.GuiEditor.SharedUIComponents {
+        export interface IColorLineComponentProps {
+        label: string;
+        target: any;
+        propertyName: string;
+        onPropertyChangedObservable: Observable<BABYLON.GuiEditor.SharedUIComponents.PropertyChangedEvent>;
+        onChange?: () => void;
+        isLinear?: boolean;
+        icon?: string;
+        iconLabel?: string;
+        disableAlpha?: boolean;
+        lockObject: BABYLON.GuiEditor.SharedUIComponents.LockObject;
+    }
+    interface IColorLineComponentState {
+        isExpanded: boolean;
+        color: Color4;
+    }
+    export class ColorLineComponent extends React.Component<IColorLineComponentProps, IColorLineComponentState> {
+        constructor(props: IColorLineComponentProps);
+        shouldComponentUpdate(nextProps: IColorLineComponentProps, nextState: IColorLineComponentState): boolean;
+        getValue(props?: Readonly<IColorLineComponentProps> & Readonly<{
+            children?: React.ReactNode;
+        }>): Color4;
+        setColorFromString(colorString: string): void;
+        setColor(newColor: Color4): void;
+        switchExpandState(): void;
+        updateStateR(value: number): void;
+        updateStateG(value: number): void;
+        updateStateB(value: number): void;
+        updateStateA(value: number): void;
+        copyToClipboard(): void;
+        private _convertToColor;
+        private _toColor3;
+        render(): JSX.Element;
+    }
+
+
+
+}
+declare module BABYLON {
+
+}
+declare module BABYLON.GuiEditor.SharedUIComponents {
+        export interface IColorPickerComponentProps {
+        value: Color4 | Color3;
+        linearHint?: boolean;
+        onColorChanged: (newOne: string) => void;
+        icon?: string;
+        iconLabel?: string;
+        shouldPopRight?: boolean;
+        lockObject?: BABYLON.GuiEditor.SharedUIComponents.LockObject;
+        backgroundColor?: string;
+    }
+    interface IColorPickerComponentState {
+        pickerEnabled: boolean;
+        color: Color3 | Color4;
+        hex: string;
+    }
+    export class ColorPickerLineComponent extends React.Component<IColorPickerComponentProps, IColorPickerComponentState> {
+        private _floatRef;
+        private _floatHostRef;
+        private _coverRef;
+        constructor(props: IColorPickerComponentProps);
+        syncPositions(): void;
+        shouldComponentUpdate(nextProps: IColorPickerComponentProps, nextState: IColorPickerComponentState): boolean;
+        getHexString(props?: Readonly<IColorPickerComponentProps> & Readonly<{
+            children?: React.ReactNode;
+        }>): string;
+        componentDidUpdate(): void;
+        componentDidMount(): void;
+        render(): JSX.Element;
+    }
+
+
+
 }
 declare module BABYLON {
 
@@ -5040,6 +5500,42 @@ declare module BABYLON.GuiEditor.SharedUIComponents {
 
 
 
+}
+declare module BABYLON {
+
+}
+declare module BABYLON.GuiEditor.SharedUIComponents {
+        interface INumericInputComponentProps {
+        label: string;
+        value: number;
+        step?: number;
+        onChange: (value: number) => void;
+        precision?: number;
+        icon?: string;
+        iconLabel?: string;
+        lockObject: BABYLON.GuiEditor.SharedUIComponents.LockObject;
+    }
+    export class NumericInputComponent extends React.Component<INumericInputComponentProps, {
+        value: string;
+    }> {
+        static defaultProps: {
+            step: number;
+        };
+        private _localChange;
+        constructor(props: INumericInputComponentProps);
+        componentWillUnmount(): void;
+        shouldComponentUpdate(nextProps: INumericInputComponentProps, nextState: {
+            value: string;
+        }): boolean;
+        updateValue(valueString: string): void;
+        onBlur(): void;
+        incrementValue(amount: number): void;
+        onKeyDown(evt: React.KeyboardEvent<HTMLInputElement>): void;
+        render(): JSX.Element;
+    }
+
+
+
 }
 declare module BABYLON {
 
@@ -6740,6 +7236,11 @@ declare module BABYLON.GuiEditor.SharedUIComponents {
         component: ICommandBarComponentProps>;
     };
     export var Default: {};
+    export var WithArtboardColor: {
+        parameters: {
+            onArtboardColorChanged: (color: string) => void;
+        };
+    };
 
 
 
@@ -6772,6 +7273,22 @@ declare module BABYLON.GuiEditor.SharedUIComponents {
 
 
 
+}
+declare module BABYLON {
+
+}
+declare module BABYLON.GuiEditor.SharedUIComponents {
+        var _default: {
+        component: typeof BABYLON.GuiEditor.SharedUIComponents.ColorPicker;
+    };
+    export var Default: {
+        args: {
+            color: Color3;
+        };
+    };
+
+
+
 }
 declare module BABYLON {
 
@@ -6801,6 +7318,48 @@ declare module BABYLON.GuiEditor.SharedUIComponents {
 
 
 
+}
+declare module BABYLON {
+
+}
+declare module BABYLON.GuiEditor.SharedUIComponents {
+        /// <reference types="react" />
+    var _default: {
+        component: typeof BABYLON.GuiEditor.SharedUIComponents.ColorLineComponent;
+    };
+    export var Default: {
+        render: (args: BABYLON.GuiEditor.SharedUIComponents.IColorLineComponentProps) => JSX.Element;
+        args: {
+            target: {};
+            label: string;
+            propertyName: string;
+            lockObject: {
+                lock: boolean;
+            };
+            onPropertyChangedObservable: Observable<BABYLON.GuiEditor.SharedUIComponents.PropertyChangedEvent>;
+        };
+    };
+
+
+
+}
+declare module BABYLON {
+
+}
+declare module BABYLON.GuiEditor.SharedUIComponents {
+        /// <reference types="react" />
+    var _default: {
+        component: typeof BABYLON.GuiEditor.SharedUIComponents.ColorPickerLineComponent;
+    };
+    export var Default: {
+        render: (args: BABYLON.GuiEditor.SharedUIComponents.IColorPickerComponentProps) => JSX.Element;
+        args: {
+            value: Color3;
+        };
+    };
+
+
+
 }
 declare module BABYLON {
 
@@ -6813,6 +7372,23 @@ declare module BABYLON.GuiEditor.SharedUIComponents {
 
 
 
+}
+declare module BABYLON {
+
+}
+declare module BABYLON.GuiEditor.SharedUIComponents {
+        var _default: {
+        component: typeof BABYLON.GuiEditor.SharedUIComponents.NumericInputComponent;
+    };
+    export var Default: {
+        args: {
+            label: string;
+            value: number;
+        };
+    };
+
+
+
 }
 declare module BABYLON {
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "babylonjs-gui-editor",
-    "version": "5.26.1",
+    "version": "5.27.1",
     "main": "babylon.guiEditor.max.js",
     "types": "babylon.guiEditor.module.d.ts",
     "files": [
@@ -14,8 +14,8 @@
         "clean": "rimraf dist && rimraf babylon*.*"
     },
     "dependencies": {
-        "babylonjs": "^5.26.1",
-        "babylonjs-gui": "^5.26.1"
+        "babylonjs": "^5.27.1",
+        "babylonjs-gui": "^5.27.1"
     },
     "devDependencies": {
         "@dev/build-tools": "1.0.0",