@babylonjs/shared-ui-components 8.16.0 → 8.16.2

package/fluent/hoc/propertyLines/switchPropertyLine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switchPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/switchPropertyLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD;;;;GAIG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAuD,CAAC,KAAK,EAAE,EAAE;IAC5F,6DAA6D;IAC7D,MAAM,EAAE,KAAK,EAAE,GAAG,WAAW,EAAE,GAAG,KAAK,CAAC;IACxC,8FAA8F;IAC9F,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,MAAM,OAAK,WAAW,GAAI,GAChB,CAClB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { PropertyLine } from \"./propertyLine\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { Switch } from \"../../primitives/switch\";\r\nimport type { SwitchProps } from \"../../primitives/switch\";\r\n/**\r\n * Wraps a switch in a property line\r\n * @param props - The properties for the switch and property line\r\n * @returns A React element representing the property line with a switch\r\n */\r\nexport const SwitchPropertyLine: FunctionComponent<PropertyLineProps & SwitchProps> = (props) => {\r\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\r\n    const { label, ...switchProps } = props;\r\n    // Ensure the label gets passed to the PropertyLine component and not to the underlying switch\r\n    return (\r\n        <PropertyLine {...props}>\r\n            <Switch {...switchProps} />\r\n        </PropertyLine>\r\n    );\r\n};\r\n"]}

package/fluent/hoc/propertyLines/syncedSliderPropertyLine.d.ts

@@ -0,0 +1,11 @@
+import type { PropertyLineProps } from "./propertyLine.js";
+import type { SyncedSliderProps } from "../../primitives/syncedSlider.js";
+import type { FunctionComponent } from "react";
+type SyncedSliderPropertyProps = SyncedSliderProps & PropertyLineProps;
+/**
+ * Renders a simple wrapper around the SyncedSliderInput
+ * @param props
+ * @returns
+ */
+export declare const SyncedSliderPropertyLine: FunctionComponent<SyncedSliderPropertyProps>;
+export {};

package/fluent/hoc/{syncedSliderLine.js → propertyLines/syncedSliderPropertyLine.js}

@@ -1,13 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PropertyLine } from "./propertyLine.js";
-import { SyncedSliderInput } from "../primitives/syncedSlider.js";
+import { SyncedSliderInput } from "../../primitives/syncedSlider.js";
 /**
  * Renders a simple wrapper around the SyncedSliderInput
  * @param props
  * @returns
  */
-export const SyncedSliderLine = (props) => {
+export const SyncedSliderPropertyLine = (props) => {
     const { label, description, ...sliderProps } = props;
     return (_jsx(PropertyLine, { label: label, description: description, children: _jsx(SyncedSliderInput, { ...sliderProps }) }));
 };
-//# sourceMappingURL=syncedSliderLine.js.map
+//# sourceMappingURL=syncedSliderPropertyLine.js.map

package/fluent/hoc/propertyLines/syncedSliderPropertyLine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"syncedSliderPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/syncedSliderPropertyLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAKlE;;;;GAIG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAiD,CAAC,KAAK,EAAsB,EAAE;IAChH,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,WAAW,EAAE,GAAG,KAAK,CAAC;IACrD,OAAO,CACH,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,YAChD,KAAC,iBAAiB,OAAK,WAAW,GAAI,GAC3B,CAClB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { PropertyLine } from \"./propertyLine\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport { SyncedSliderInput } from \"../../primitives/syncedSlider\";\r\nimport type { SyncedSliderProps } from \"../../primitives/syncedSlider\";\r\nimport type { FunctionComponent } from \"react\";\r\n\r\ntype SyncedSliderPropertyProps = SyncedSliderProps & PropertyLineProps;\r\n/**\r\n * Renders a simple wrapper around the SyncedSliderInput\r\n * @param props\r\n * @returns\r\n */\r\nexport const SyncedSliderPropertyLine: FunctionComponent<SyncedSliderPropertyProps> = (props): React.ReactElement => {\r\n    const { label, description, ...sliderProps } = props;\r\n    return (\r\n        <PropertyLine label={label} description={description}>\r\n            <SyncedSliderInput {...sliderProps} />\r\n        </PropertyLine>\r\n    );\r\n};\r\n"]}

package/fluent/hoc/propertyLines/textPropertyLine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/textPropertyLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAS9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAqD,CAAC,KAAK,EAAE,EAAE;IACxF,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,KAAK,IAAC,KAAK,EAAE,KAAK,CAAC,OAAO,YAAG,KAAK,CAAC,KAAK,GAAS,GACvC,CAClB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { Body1 } from \"@fluentui/react-components\";\r\nimport { PropertyLine } from \"./propertyLine\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport type { FunctionComponent } from \"react\";\r\n\r\ntype TextProps = {\r\n    value: string;\r\n    tooltip?: string;\r\n};\r\n\r\n/**\r\n * Wraps text in a property line\r\n * @param props - PropertyLineProps and TextProps\r\n * @returns property-line wrapped text\r\n */\r\nexport const TextPropertyLine: FunctionComponent<PropertyLineProps & TextProps> = (props) => {\r\n    return (\r\n        <PropertyLine {...props}>\r\n            <Body1 title={props.tooltip}>{props.value}</Body1>\r\n        </PropertyLine>\r\n    );\r\n};\r\n"]}

package/fluent/hoc/{vectorPropertyLine.js → propertyLines/vectorPropertyLine.js}

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useState } from "react";
 import { Body1 } from "@fluentui/react-components";
 import { PropertyLine } from "./propertyLine.js";
-import { SyncedSliderLine } from "./syncedSliderLine.js";
+import { SyncedSliderPropertyLine } from "./syncedSliderPropertyLine.js";
 import { Quaternion, Vector4 } from "@babylonjs/core/Maths/math.vector.js";
 import { Tools } from "@babylonjs/core/Misc/tools.js";
 /**
@@ -23,7 +23,7 @@ const TensorPropertyLine = (props) => {
         setVector(newVector);
         props.onChange(newVector);
     };
-    return (_jsx(PropertyLine, { ...props, expandedContent: _jsxs(_Fragment, { children: [_jsx(SyncedSliderLine, { label: "X", value: converted(vector.x), min: min, max: max, onChange: (val) => onChange(val, "x") }), _jsx(SyncedSliderLine, { label: "Y", value: converted(vector.y), min: min, max: max, onChange: (val) => onChange(val, "y") }), _jsx(SyncedSliderLine, { label: "Z", value: converted(vector.z), min: min, max: max, onChange: (val) => onChange(val, "z") }), vector instanceof Vector4 && _jsx(SyncedSliderLine, { label: "W", value: vector.w, min: min, max: max, onChange: (val) => onChange(val, "w") })] }), children: _jsx(Body1, { children: `X: ${formatted(props.value.x)} | Y: ${formatted(props.value.y)} | Z: ${formatted(props.value.z)}${props.value instanceof Vector4 ? ` | W: ${formatted(props.value.w)}` : ""}` }) }));
+    return (_jsx(PropertyLine, { ...props, expandedContent: _jsxs(_Fragment, { children: [_jsx(SyncedSliderPropertyLine, { label: "X", value: converted(vector.x), min: min, max: max, onChange: (val) => onChange(val, "x") }), _jsx(SyncedSliderPropertyLine, { label: "Y", value: converted(vector.y), min: min, max: max, onChange: (val) => onChange(val, "y") }), _jsx(SyncedSliderPropertyLine, { label: "Z", value: converted(vector.z), min: min, max: max, onChange: (val) => onChange(val, "z") }), vector instanceof Vector4 && _jsx(SyncedSliderPropertyLine, { label: "W", value: vector.w, min: min, max: max, onChange: (val) => onChange(val, "w") })] }), children: _jsx(Body1, { children: `X: ${formatted(props.value.x)} | Y: ${formatted(props.value.y)} | Z: ${formatted(props.value.z)}${props.value instanceof Vector4 ? ` | W: ${formatted(props.value.w)}` : ""}` }) }));
 };
 const ToDegreesConverter = { from: Tools.ToDegrees, to: Tools.ToRadians };
 export const RotationVectorPropertyLine = (props) => {

package/fluent/hoc/propertyLines/vectorPropertyLine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vectorPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/vectorPropertyLine.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from \"react\";\r\nimport type { FunctionComponent } from \"react\";\r\n\r\nimport { Body1 } from \"@fluentui/react-components\";\r\nimport { PropertyLine } from \"./propertyLine\";\r\nimport type { BaseComponentProps, PropertyLineProps } from \"./propertyLine\";\r\n\r\nimport { SyncedSliderPropertyLine } from \"./syncedSliderPropertyLine\";\r\n\r\nimport { Quaternion, Vector4 } from \"core/Maths/math.vector\";\r\nimport type { Vector3 } from \"core/Maths/math.vector\";\r\nimport { Tools } from \"core/Misc/tools\";\r\n\r\nexport type TensorPropertyLineProps<V extends Vector3 | Vector4 | Quaternion> = BaseComponentProps<V> &\r\n    PropertyLineProps & {\r\n        /**\r\n         * If passed, all sliders will use this for the min value\r\n         */\r\n        min?: number;\r\n        /**\r\n         * If passed, all sliders will use this for the max value\r\n         */\r\n        max?: number;\r\n        /**\r\n         * If passed, the UX will use the conversion functions to display/update values\r\n         */\r\n        valueConverter?: {\r\n            /**\r\n             * Will call from(val) before displaying in the UX\r\n             */\r\n            from: (val: number) => number;\r\n            /**\r\n             * Will call to(val) before calling onChange\r\n             */\r\n            to: (val: number) => number;\r\n        };\r\n    };\r\n\r\n/**\r\n * Reusable component which renders a vector property line containing a label, vector value, and expandable XYZW values\r\n * The expanded section contains a slider/input box for each component of the vector (x, y, z, w)\r\n * @param props\r\n * @returns\r\n */\r\nconst TensorPropertyLine: FunctionComponent<TensorPropertyLineProps<Vector3 | Vector4 | Quaternion>> = (props) => {\r\n    const converted = (val: number) => (props.valueConverter ? props.valueConverter.from(val) : val);\r\n    const formatted = (val: number) => converted(val).toFixed(2);\r\n\r\n    const [vector, setVector] = useState(props.value);\r\n    const { min, max } = props;\r\n\r\n    const onChange = (val: number, key: \"x\" | \"y\" | \"z\" | \"w\") => {\r\n        const value = props.valueConverter ? props.valueConverter.to(val) : val;\r\n        const newVector = vector.clone();\r\n        (newVector as Vector4)[key] = value; // The syncedSlider for 'w' is only rendered when vector is a Vector4, so this is safe\r\n\r\n        setVector(newVector);\r\n        props.onChange(newVector);\r\n    };\r\n\r\n    return (\r\n        <PropertyLine\r\n            {...props}\r\n            expandedContent={\r\n                <>\r\n                    <SyncedSliderPropertyLine label=\"X\" value={converted(vector.x)} min={min} max={max} onChange={(val) => onChange(val, \"x\")} />\r\n                    <SyncedSliderPropertyLine label=\"Y\" value={converted(vector.y)} min={min} max={max} onChange={(val) => onChange(val, \"y\")} />\r\n                    <SyncedSliderPropertyLine label=\"Z\" value={converted(vector.z)} min={min} max={max} onChange={(val) => onChange(val, \"z\")} />\r\n                    {vector instanceof Vector4 && <SyncedSliderPropertyLine label=\"W\" value={vector.w} min={min} max={max} onChange={(val) => onChange(val, \"w\")} />}\r\n                </>\r\n            }\r\n        >\r\n            <Body1>{`X: ${formatted(props.value.x)} | Y: ${formatted(props.value.y)} | Z: ${formatted(props.value.z)}${props.value instanceof Vector4 ? ` | W: ${formatted(props.value.w)}` : \"\"}`}</Body1>\r\n        </PropertyLine>\r\n    );\r\n};\r\n\r\ntype RotationVectorPropertyLineProps = TensorPropertyLineProps<Vector3> & {\r\n    /**\r\n     * Display angles as degrees instead of radians\r\n     */\r\n    useDegrees?: boolean;\r\n};\r\n\r\nconst ToDegreesConverter = { from: Tools.ToDegrees, to: Tools.ToRadians };\r\nexport const RotationVectorPropertyLine: FunctionComponent<RotationVectorPropertyLineProps> = (props) => {\r\n    const min = props.useDegrees ? 0 : undefined;\r\n    const max = props.useDegrees ? 360 : undefined;\r\n    return <Vector3PropertyLine {...props} valueConverter={props.useDegrees ? ToDegreesConverter : undefined} min={min} max={max} />;\r\n};\r\n\r\ntype QuaternionPropertyLineProps = TensorPropertyLineProps<Quaternion> & {\r\n    /**\r\n     * Display angles as degrees instead of radians\r\n     */\r\n    useDegrees?: boolean;\r\n};\r\n\r\nconst QuaternionPropertyLineInternal = TensorPropertyLine as FunctionComponent<TensorPropertyLineProps<Quaternion>>;\r\nexport const QuaternionPropertyLine: FunctionComponent<QuaternionPropertyLineProps> = (props) => {\r\n    const min = props.useDegrees ? 0 : undefined;\r\n    const max = props.useDegrees ? 360 : undefined;\r\n    const [quat, setQuat] = useState(props.value);\r\n    const onQuatChange = (val: Quaternion) => {\r\n        setQuat(val);\r\n        props.onChange(val);\r\n    };\r\n\r\n    const onEulerChange = (val: Vector3) => {\r\n        const quat = Quaternion.FromEulerAngles(val.x, val.y, val.z);\r\n        setQuat(quat);\r\n        props.onChange(quat);\r\n    };\r\n    return props.useDegrees ? (\r\n        <Vector3PropertyLine {...props} value={quat.toEulerAngles()} valueConverter={ToDegreesConverter} min={min} max={max} onChange={onEulerChange} />\r\n    ) : (\r\n        <QuaternionPropertyLineInternal {...props} value={quat} min={min} max={max} onChange={onQuatChange} />\r\n    );\r\n};\r\n\r\nexport const Vector3PropertyLine = TensorPropertyLine as FunctionComponent<TensorPropertyLineProps<Vector3>>;\r\nexport const Vector4PropertyLine = TensorPropertyLine as FunctionComponent<TensorPropertyLineProps<Vector4>>;\r\n"]}

package/fluent/primitives/button.d.ts

@@ -0,0 +1,9 @@
+import type { FunctionComponent } from "react";
+import type { FluentIcon } from "@fluentui/react-icons";
+export type ButtonProps = {
+    onClick: () => void;
+    icon?: FluentIcon;
+    label: string;
+    disabled?: boolean;
+};
+export declare const Button: FunctionComponent<ButtonProps>;

package/fluent/primitives/button.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Body1, Button as FluentButton, makeStyles, tokens } from "@fluentui/react-components";
+const useButtonLineStyles = makeStyles({
+    button: {
+        border: `1px solid ${tokens.colorBrandBackground}`,
+    },
+});
+export const Button = (props) => {
+    const classes = useButtonLineStyles();
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const { icon: Icon, ...buttonProps } = props;
+    return (_jsx(FluentButton, { iconPosition: "after", className: classes.button, ...buttonProps, icon: Icon && _jsx(Icon, {}), children: _jsx(Body1, { children: props.label }) }));
+};
+//# sourceMappingURL=button.js.map

package/fluent/primitives/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,IAAI,YAAY,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAI/F,MAAM,mBAAmB,GAAG,UAAU,CAAC;IACnC,MAAM,EAAE;QACJ,MAAM,EAAE,aAAa,MAAM,CAAC,oBAAoB,EAAE;KACrD;CACJ,CAAC,CAAC;AASH,MAAM,CAAC,MAAM,MAAM,GAAmC,CAAC,KAAK,EAAE,EAAE;IAC5D,MAAM,OAAO,GAAG,mBAAmB,EAAE,CAAC;IACtC,gEAAgE;IAChE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,WAAW,EAAE,GAAG,KAAK,CAAC;IAE7C,OAAO,CACH,KAAC,YAAY,IAAC,YAAY,EAAC,OAAO,EAAC,SAAS,EAAE,OAAO,CAAC,MAAM,KAAM,WAAW,EAAE,IAAI,EAAE,IAAI,IAAI,KAAC,IAAI,KAAG,YACjG,KAAC,KAAK,cAAE,KAAK,CAAC,KAAK,GAAS,GACjB,CAClB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { Body1, Button as FluentButton, makeStyles, tokens } from \"@fluentui/react-components\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport type { FluentIcon } from \"@fluentui/react-icons\";\r\n\r\nconst useButtonLineStyles = makeStyles({\r\n    button: {\r\n        border: `1px solid ${tokens.colorBrandBackground}`,\r\n    },\r\n});\r\n\r\nexport type ButtonProps = {\r\n    onClick: () => void;\r\n    icon?: FluentIcon;\r\n    label: string;\r\n    disabled?: boolean;\r\n};\r\n\r\nexport const Button: FunctionComponent<ButtonProps> = (props) => {\r\n    const classes = useButtonLineStyles();\r\n    // eslint-disable-next-line @typescript-eslint/naming-convention\r\n    const { icon: Icon, ...buttonProps } = props;\r\n\r\n    return (\r\n        <FluentButton iconPosition=\"after\" className={classes.button} {...buttonProps} icon={Icon && <Icon />}>\r\n            <Body1>{props.label}</Body1>\r\n        </FluentButton>\r\n    );\r\n};\r\n"]}

package/fluent/primitives/checkbox.d.ts

@@ -1,5 +1,5 @@
 import type { FunctionComponent } from "react";
-import type { BaseComponentProps } from "../hoc/propertyLine.js";
+import type { BaseComponentProps } from "../hoc/propertyLines/propertyLine.js";
 export type CheckboxProps = BaseComponentProps<boolean>;
 /**
  * This is a primitive fluent checkbox that can both read and write checked state

package/fluent/primitives/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/checkbox.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAI5C;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAqC,CAAC,KAAK,EAAE,EAAE;IAChE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,CAAC;IAEnE,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,KAAK,CAAC,KAAK,IAAI,SAAS,EAAE,CAAC;YAC3B,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,gDAAgD;QAC7E,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,MAAM,QAAQ,GAAG,CAAC,EAAiC,EAAE,CAAuB,EAAE,EAAE;QAC5E,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QAClC,UAAU,CAAC,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IAClC,CAAC,CAAC;IAEF,OAAO,KAAC,cAAc,IAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAAI,CAAC;AAC9F,CAAC,CAAC","sourcesContent":["import type { CheckboxOnChangeData } from \"@fluentui/react-components\";\r\nimport type { ChangeEvent, FunctionComponent } from \"react\";\r\n\r\nimport { Checkbox as FluentCheckbox } from \"@fluentui/react-components\";\r\nimport { useEffect, useState } from \"react\";\r\nimport type { BaseComponentProps } from \"../hoc/propertyLine\";\r\n\r\nexport type CheckboxProps = BaseComponentProps<boolean>;\r\n/**\r\n * This is a primitive fluent checkbox that can both read and write checked state\r\n * @param props\r\n * @returns Checkbox component\r\n */\r\nexport const Checkbox: FunctionComponent<CheckboxProps> = (props) => {\r\n    const [checked, setChecked] = useState(() => props.value ?? false);\r\n\r\n    useEffect(() => {\r\n        if (props.value != undefined) {\r\n            setChecked(props.value); // Update local state when props.checked changes\r\n        }\r\n    }, [props.value]);\r\n\r\n    const onChange = (ev: ChangeEvent<HTMLInputElement>, _: CheckboxOnChangeData) => {\r\n        props.onChange(ev.target.checked);\r\n        setChecked(ev.target.checked);\r\n    };\r\n\r\n    return <FluentCheckbox checked={checked} onChange={onChange} disabled={props.disabled} />;\r\n};\r\n"]}
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/checkbox.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAI5C;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAqC,CAAC,KAAK,EAAE,EAAE;IAChE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,CAAC;IAEnE,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,KAAK,CAAC,KAAK,IAAI,SAAS,EAAE,CAAC;YAC3B,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,gDAAgD;QAC7E,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,MAAM,QAAQ,GAAG,CAAC,EAAiC,EAAE,CAAuB,EAAE,EAAE;QAC5E,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QAClC,UAAU,CAAC,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IAClC,CAAC,CAAC;IAEF,OAAO,KAAC,cAAc,IAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAAI,CAAC;AAC9F,CAAC,CAAC","sourcesContent":["import type { CheckboxOnChangeData } from \"@fluentui/react-components\";\r\nimport type { ChangeEvent, FunctionComponent } from \"react\";\r\n\r\nimport { Checkbox as FluentCheckbox } from \"@fluentui/react-components\";\r\nimport { useEffect, useState } from \"react\";\r\nimport type { BaseComponentProps } from \"../hoc/propertyLines/propertyLine\";\r\n\r\nexport type CheckboxProps = BaseComponentProps<boolean>;\r\n/**\r\n * This is a primitive fluent checkbox that can both read and write checked state\r\n * @param props\r\n * @returns Checkbox component\r\n */\r\nexport const Checkbox: FunctionComponent<CheckboxProps> = (props) => {\r\n    const [checked, setChecked] = useState(() => props.value ?? false);\r\n\r\n    useEffect(() => {\r\n        if (props.value != undefined) {\r\n            setChecked(props.value); // Update local state when props.checked changes\r\n        }\r\n    }, [props.value]);\r\n\r\n    const onChange = (ev: ChangeEvent<HTMLInputElement>, _: CheckboxOnChangeData) => {\r\n        props.onChange(ev.target.checked);\r\n        setChecked(ev.target.checked);\r\n    };\r\n\r\n    return <FluentCheckbox checked={checked} onChange={onChange} disabled={props.disabled} />;\r\n};\r\n"]}

package/fluent/primitives/colorPicker.d.ts

@@ -1,6 +1,6 @@
 import type { FunctionComponent } from "react";
 import { Color3, Color4 } from "@babylonjs/core/Maths/math.color.js";
-import type { BaseComponentProps } from "../hoc/propertyLine.js";
+import type { BaseComponentProps } from "../hoc/propertyLines/propertyLine.js";
 export type ColorPickerProps<C extends Color3 | Color4> = {
     isLinearMode?: boolean;
 } & BaseComponentProps<C>;

package/fluent/primitives/colorPicker.js

@@ -66,7 +66,7 @@ export const ColorPickerPopup = (props) => {
             align: "start",
             overflowBoundary: document.body,
             autoSize: true,
-        }, open: popoverOpen, trapFocus: true, onOpenChange: (_, data) => setPopoverOpen(data.open), children: [_jsx(PopoverTrigger, { disableButtonEnhancement: true, children: _jsx(ColorSwatch, { size: "small", color: color.toHexString(), value: color.toHexString().slice(1) }) }), _jsx(PopoverSurface, { children: _jsxs("div", { className: classes.colorPickerContainer, children: [_jsxs(ColorPicker, { color: rgbaToHsv(color), onColorChange: handleColorPickerChange, children: [_jsx(ColorArea, { inputX: { "aria-label": "Saturation" }, inputY: { "aria-label": "Brightness" } }), _jsx(ColorSlider, { "aria-label": "Hue" }), color instanceof Color4 && _jsx(AlphaSlider, { "aria-label": "Alpha" })] }), _jsxs("div", { className: classes.container, children: [_jsxs("div", { className: classes.row, children: [_jsx("div", { className: classes.previewColor, style: { backgroundColor: color.toHexString() } }), _jsx(InputHexField, { label: "Gamma Hex", value: color, isLinearMode: props.isLinearMode, onChange: handleChange }), _jsx(InputHexField, { label: "Linear Hex", linearHex: true, isLinearMode: props.isLinearMode, value: color, onChange: handleChange })] }), _jsxs("div", { className: classes.row, children: [_jsx(InputRgbField, { label: "Red", color: color, rgbKey: "r", onChange: handleChange }), _jsx(InputRgbField, { label: "Green", color: color, rgbKey: "g", onChange: handleChange }), _jsx(InputRgbField, { label: "Blue", color: color, rgbKey: "b", onChange: handleChange }), _jsx(InputAlphaField, { color: color, onChange: handleChange })] }), _jsxs("div", { className: classes.row, children: [_jsx(InputHsvField, { label: "Hue", color: color, hsvKey: "h", max: 360, onChange: handleChange }), _jsx(InputHsvField, { label: "Saturation", color: color, hsvKey: "s", max: 100, scale: 100, onChange: handleChange }), _jsx(InputHsvField, { label: "Value", color: color, hsvKey: "v", max: 100, scale: 100, onChange: handleChange })] })] })] }) })] }));
+        }, open: popoverOpen, trapFocus: true, onOpenChange: (_, data) => setPopoverOpen(data.open), children: [_jsx(PopoverTrigger, { disableButtonEnhancement: true, children: _jsx(ColorSwatch, { borderColor: tokens.colorNeutralShadowKeyDarker, size: "small", color: color.toHexString(), value: color.toHexString().slice(1) }) }), _jsx(PopoverSurface, { children: _jsxs("div", { className: classes.colorPickerContainer, children: [_jsxs(ColorPicker, { color: rgbaToHsv(color), onColorChange: handleColorPickerChange, children: [_jsx(ColorArea, { inputX: { "aria-label": "Saturation" }, inputY: { "aria-label": "Brightness" } }), _jsx(ColorSlider, { "aria-label": "Hue" }), color instanceof Color4 && _jsx(AlphaSlider, { "aria-label": "Alpha" })] }), _jsxs("div", { className: classes.container, children: [_jsxs("div", { className: classes.row, children: [_jsx("div", { className: classes.previewColor, style: { backgroundColor: color.toHexString() } }), _jsx(InputHexField, { label: "Gamma Hex", value: color, isLinearMode: props.isLinearMode, onChange: handleChange }), _jsx(InputHexField, { label: "Linear Hex", linearHex: true, isLinearMode: props.isLinearMode, value: color, onChange: handleChange })] }), _jsxs("div", { className: classes.row, children: [_jsx(InputRgbField, { label: "Red", color: color, rgbKey: "r", onChange: handleChange }), _jsx(InputRgbField, { label: "Green", color: color, rgbKey: "g", onChange: handleChange }), _jsx(InputRgbField, { label: "Blue", color: color, rgbKey: "b", onChange: handleChange }), _jsx(InputAlphaField, { color: color, onChange: handleChange })] }), _jsxs("div", { className: classes.row, children: [_jsx(InputHsvField, { label: "Hue", color: color, hsvKey: "h", max: 360, onChange: handleChange }), _jsx(InputHsvField, { label: "Saturation", color: color, hsvKey: "s", max: 100, scale: 100, onChange: handleChange }), _jsx(InputHsvField, { label: "Value", color: color, hsvKey: "v", max: 100, scale: 100, onChange: handleChange })] })] })] }) })] }));
 };
 /**
  * Component which displays the passed in color's HEX value, either in linearSpace (if linearHex is true) or in gamma space

package/fluent/primitives/colorPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"colorPicker.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/colorPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable jsdoc/require-returns */\r\n/* eslint-disable @typescript-eslint/naming-convention */\r\nimport { useState, useEffect, useCallback } from \"react\";\r\nimport type { FunctionComponent, ChangeEvent } from \"react\";\r\nimport {\r\n    Input,\r\n    Label,\r\n    SpinButton,\r\n    useId,\r\n    ColorPicker,\r\n    ColorSlider,\r\n    ColorArea,\r\n    AlphaSlider,\r\n    InfoLabel,\r\n    Link,\r\n    makeStyles,\r\n    Popover,\r\n    PopoverSurface,\r\n    PopoverTrigger,\r\n    tokens,\r\n    Body1Strong,\r\n    ColorSwatch,\r\n} from \"@fluentui/react-components\";\r\nimport type { SpinButtonChangeEvent, SpinButtonOnChangeData, ColorPickerProps as FluentColorPickerProps, InputOnChangeData } from \"@fluentui/react-components\";\r\nimport { Color3, Color4 } from \"core/Maths/math.color\";\r\nimport type { BaseComponentProps } from \"../hoc/propertyLine\";\r\n\r\nconst useColorPickerStyles = makeStyles({\r\n    colorPickerContainer: {\r\n        width: \"325px\",\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        gap: tokens.spacingVerticalMNudge, // 10px\r\n        overflow: \"visible\",\r\n    },\r\n    previewColor: {\r\n        width: \"50px\",\r\n        height: \"50px\",\r\n        borderRadius: tokens.borderRadiusMedium,\r\n        border: `${tokens.spacingVerticalXXS} solid ${tokens.colorNeutralShadowKeyLighter}`,\r\n        \"@media (forced-colors: active)\": {\r\n            forcedColorAdjust: \"none\", // ensures elmement maintains color in high constrast mode\r\n        },\r\n    },\r\n    row: {\r\n        display: \"flex\",\r\n        flexDirection: \"row\",\r\n        gap: tokens.spacingVerticalM, // 12px\r\n        alignItems: \"center\",\r\n    },\r\n    colorFieldWrapper: {\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        gap: tokens.spacingVerticalSNudge, // 6px\r\n    },\r\n    input: {\r\n        width: \"80px\",\r\n    },\r\n    spinButton: {\r\n        minWidth: \"60px\",\r\n    },\r\n    container: {\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        gap: tokens.spacingVerticalL, // 16px\r\n    },\r\n});\r\n\r\nexport type ColorPickerProps<C extends Color3 | Color4> = {\r\n    isLinearMode?: boolean;\r\n} & BaseComponentProps<C>;\r\n\r\nexport const ColorPickerPopup: FunctionComponent<ColorPickerProps<Color3 | Color4>> = (props) => {\r\n    const classes = useColorPickerStyles();\r\n    const [color, setColor] = useState(props.value);\r\n\r\n    const [popoverOpen, setPopoverOpen] = useState(false);\r\n\r\n    useEffect(() => {\r\n        setColor(props.value); // Ensures the trigger color updates when props.value changes\r\n    }, [props.value]);\r\n\r\n    const handleColorPickerChange: FluentColorPickerProps[\"onColorChange\"] = (_, data) => {\r\n        let color: Color3 | Color4 = Color3.FromHSV(data.color.h, data.color.s, data.color.v);\r\n        if (props.value instanceof Color4) {\r\n            color = Color4.FromColor3(color, data.color.a ?? 1);\r\n        }\r\n        handleChange(color);\r\n    };\r\n\r\n    const handleChange = (newColor: Color3 | Color4) => {\r\n        setColor(newColor);\r\n        props.onChange(newColor); // Ensures the parent is notified when color changes from within colorPicker\r\n    };\r\n\r\n    return (\r\n        <Popover\r\n            positioning={{\r\n                align: \"start\",\r\n                overflowBoundary: document.body,\r\n                autoSize: true,\r\n            }}\r\n            open={popoverOpen}\r\n            trapFocus\r\n            onOpenChange={(_, data) => setPopoverOpen(data.open)}\r\n        >\r\n            <PopoverTrigger disableButtonEnhancement>\r\n                <ColorSwatch size=\"small\" color={color.toHexString()} value={color.toHexString().slice(1)} />\r\n            </PopoverTrigger>\r\n\r\n            <PopoverSurface>\r\n                <div className={classes.colorPickerContainer}>\r\n                    <ColorPicker color={rgbaToHsv(color)} onColorChange={handleColorPickerChange}>\r\n                        <ColorArea inputX={{ \"aria-label\": \"Saturation\" }} inputY={{ \"aria-label\": \"Brightness\" }} />\r\n                        <ColorSlider aria-label=\"Hue\" />\r\n                        {color instanceof Color4 && <AlphaSlider aria-label=\"Alpha\" />}\r\n                    </ColorPicker>\r\n                    <div className={classes.container}>\r\n                        {/* Top Row: Preview, Gamma Hex, Linear Hex */}\r\n                        <div className={classes.row}>\r\n                            <div className={classes.previewColor} style={{ backgroundColor: color.toHexString() }} />\r\n                            <InputHexField label=\"Gamma Hex\" value={color} isLinearMode={props.isLinearMode} onChange={handleChange} />\r\n                            <InputHexField label=\"Linear Hex\" linearHex={true} isLinearMode={props.isLinearMode} value={color} onChange={handleChange} />\r\n                        </div>\r\n\r\n                        {/* Middle Row: Red, Green, Blue, Alpha */}\r\n                        <div className={classes.row}>\r\n                            <InputRgbField label=\"Red\" color={color} rgbKey=\"r\" onChange={handleChange} />\r\n                            <InputRgbField label=\"Green\" color={color} rgbKey=\"g\" onChange={handleChange} />\r\n                            <InputRgbField label=\"Blue\" color={color} rgbKey=\"b\" onChange={handleChange} />\r\n                            <InputAlphaField color={color} onChange={handleChange} />\r\n                        </div>\r\n\r\n                        {/* Bottom Row: Hue, Saturation, Value */}\r\n                        <div className={classes.row}>\r\n                            <InputHsvField label=\"Hue\" color={color} hsvKey=\"h\" max={360} onChange={handleChange} />\r\n                            <InputHsvField label=\"Saturation\" color={color} hsvKey=\"s\" max={100} scale={100} onChange={handleChange} />\r\n                            <InputHsvField label=\"Value\" color={color} hsvKey=\"v\" max={100} scale={100} onChange={handleChange} />\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </PopoverSurface>\r\n        </Popover>\r\n    );\r\n};\r\n\r\ntype HsvKey = \"h\" | \"s\" | \"v\";\r\nexport type InputHexProps = BaseComponentProps<Color3 | Color4> & {\r\n    label?: string;\r\n    linearHex?: boolean;\r\n    isLinearMode?: boolean;\r\n};\r\n/**\r\n * Component which displays the passed in color's HEX value, either in linearSpace (if linearHex is true) or in gamma space\r\n * When the hex color is changed by user, component calculates the new Color3/4 value and calls onChange\r\n *\r\n * Component uses the isLinearMode boolean to display an informative label regarding linear / gamma space\r\n * @param props - The properties for the InputHexField component.\r\n * @returns\r\n */\r\nexport const InputHexField: FunctionComponent<InputHexProps> = (props) => {\r\n    const id = useId(\"hex-input\");\r\n    const styles = useColorPickerStyles();\r\n    const { label, value, onChange, linearHex, isLinearMode } = props;\r\n\r\n    const handleChange = (e: ChangeEvent<HTMLInputElement>, _: InputOnChangeData) => {\r\n        // If linearHint (aka PBR material, ensure the other values are displayed in gamma even if linear hex changes)\r\n        const value = e.target.value;\r\n        if (value != \"\" && /^[0-9A-Fa-f]+$/g.test(value) == false) {\r\n            return;\r\n        }\r\n        onChange(Color3.FromHexString(value).toGammaSpace());\r\n    };\r\n    return (\r\n        <div className={styles.colorFieldWrapper}>\r\n            {props.linearHex ? (\r\n                <InfoLabel\r\n                    htmlFor={id}\r\n                    info={\r\n                        !isLinearMode ? (\r\n                            <> This color picker is attached to an entity whose color is stored in gamma space, so we are showing linear hex in disabled view </>\r\n                        ) : (\r\n                            <>\r\n                                This color picker is attached to an entity whose color is stored in linear space (ex: PBR Material), and Babylon converts the color to gamma space\r\n                                before rendering on screen because the human eye is best at processing colors in gamma space. We thus also want to display the color picker in gamma\r\n                                space so that the color chosen here will match the color seen in your entity.\r\n                                <br />\r\n                                If you want to copy/paste the HEX into your code, you can either use\r\n                                <Body1Strong>Color3.FromHexString(LINEAR_HEX)</Body1Strong>\r\n                                <br />\r\n                                or\r\n                                <br />\r\n                                <Body1Strong>Color3.FromHexString(GAMMA_HEX).toLinearSpace()</Body1Strong>\r\n                                <br />\r\n                                <br />\r\n                                <Link href=\"https://doc.babylonjs.com/preparingArtForBabylon/controllingColorSpace/\"> Read more in our docs! </Link>\r\n                            </>\r\n                        )\r\n                    }\r\n                >\r\n                    {label}\r\n                </InfoLabel>\r\n            ) : (\r\n                <Label htmlFor={id}>{label}</Label>\r\n            )}\r\n            <Input\r\n                disabled={linearHex ? !isLinearMode : false}\r\n                className={styles.input}\r\n                value={linearHex ? value.toLinearSpace().toHexString() : value.toHexString()}\r\n                id={id}\r\n                onChange={handleChange}\r\n            />\r\n        </div>\r\n    );\r\n};\r\n\r\ntype RgbKey = \"r\" | \"g\" | \"b\";\r\ntype InputRgbFieldProps = {\r\n    color: Color3 | Color4;\r\n    label: string;\r\n    rgbKey: RgbKey;\r\n    onChange: (color: Color3 | Color4) => void;\r\n};\r\n\r\nconst InputRgbField: FunctionComponent<InputRgbFieldProps> = (props) => {\r\n    const { color, onChange, label, rgbKey } = props;\r\n    const id = useId(`${label.toLowerCase()}-input`);\r\n    const classes = useColorPickerStyles();\r\n\r\n    const handleChange = useCallback(\r\n        (_: SpinButtonChangeEvent, data: SpinButtonOnChangeData) => {\r\n            const val = data.value ?? parseFloat(data.displayValue ?? \"\");\r\n\r\n            if (val === null || Number.isNaN(val) || !NUMBER_REGEX.test(val.toString())) {\r\n                return;\r\n            }\r\n\r\n            const newColor = color.clone();\r\n            newColor[rgbKey] = val / 255.0; // Convert to 0-1 range\r\n            onChange(newColor);\r\n        },\r\n        [color]\r\n    );\r\n\r\n    return (\r\n        <div className={classes.colorFieldWrapper}>\r\n            <Label htmlFor={id}>{label}</Label>\r\n            <SpinButton className={classes.spinButton} min={0} max={255} value={color[rgbKey] * 255.0} step={1} id={id} onChange={handleChange} name={rgbKey} />\r\n        </div>\r\n    );\r\n};\r\n\r\ntype InputHsvFieldProps = {\r\n    color: Color3 | Color4;\r\n    label: string;\r\n    hsvKey: HsvKey;\r\n    onChange: (color: Color3 | Color4) => void;\r\n    max: number;\r\n    scale?: number;\r\n};\r\n\r\n/**\r\n * In the HSV (Hue, Saturation, Value) color model, Hue (H) ranges from 0 to 360 degrees, representing the color's position on the color wheel.\r\n * Saturation (S) ranges from 0 to 100%, indicating the intensity or purity of the color, with 0 being shades of gray and 100 being a fully saturated color.\r\n * Value (V) ranges from 0 to 100%, representing the brightness of the color, with 0 being black and 100 being the brightest.\r\n * @param props - The properties for the InputHsvField component.\r\n */\r\nexport const InputHsvField: FunctionComponent<InputHsvFieldProps> = (props) => {\r\n    const { color, label, hsvKey, max, scale = 1 } = props;\r\n\r\n    const id = useId(`${label.toLowerCase()}-input`);\r\n    const classes = useColorPickerStyles();\r\n\r\n    const handleChange = useCallback(\r\n        (_: SpinButtonChangeEvent, data: SpinButtonOnChangeData) => {\r\n            const val = data.value ?? parseFloat(data.displayValue ?? \"\");\r\n\r\n            if (val === null || Number.isNaN(val) || !NUMBER_REGEX.test(val.toString())) {\r\n                return;\r\n            }\r\n\r\n            // Convert current color to HSV, update the new hsv value, then call onChange prop\r\n            const hsv = rgbaToHsv(color);\r\n            hsv[hsvKey] = val / scale;\r\n            let newColor: Color3 | Color4 = Color3.FromHSV(hsv.h, hsv.s, hsv.v);\r\n            if (color instanceof Color4) {\r\n                newColor = Color4.FromColor3(newColor, color.a ?? 1);\r\n            }\r\n            props.onChange(newColor);\r\n        },\r\n        [color]\r\n    );\r\n\r\n    return (\r\n        <div className={classes.colorFieldWrapper}>\r\n            <Label htmlFor={id}>{label}</Label>\r\n            <SpinButton className={classes.spinButton} min={0} max={max} value={rgbaToHsv(color)[hsvKey] * scale} step={1} id={id} onChange={handleChange} name={hsvKey} />\r\n        </div>\r\n    );\r\n};\r\n\r\ntype InputAlphaProps = {\r\n    color: Color3 | Color4;\r\n    onChange: (color: Color4) => void;\r\n};\r\n\r\n/**\r\n * Displays the alpha value of a color, either in the disabled state (if color is Color3) or as a spin button (if color is Color4).\r\n * @param props\r\n * @returns\r\n */\r\nconst InputAlphaField: FunctionComponent<InputAlphaProps> = (props) => {\r\n    const classes = useColorPickerStyles();\r\n    const id = useId(\"alpha-input\");\r\n    const { color } = props;\r\n\r\n    const onChange = (_: SpinButtonChangeEvent, data: SpinButtonOnChangeData) => {\r\n        const value = data.value ?? parseFloat(data.displayValue ?? \"\");\r\n\r\n        if (Number.isNaN(value) || value < 0 || value > 1) {\r\n            return;\r\n        }\r\n\r\n        if (color instanceof Color4) {\r\n            const newColor = color.clone();\r\n            newColor.a = value;\r\n            return newColor;\r\n        } else {\r\n            return Color4.FromColor3(color, value);\r\n        }\r\n    };\r\n\r\n    return (\r\n        <div className={classes.colorFieldWrapper}>\r\n            <div className={classes.row}>\r\n                <Label htmlFor={id}>Alpha</Label>\r\n                {color instanceof Color3 && (\r\n                    <InfoLabel\r\n                        htmlFor={id}\r\n                        info={\r\n                            <>\r\n                                Because this color picker is representing a Color3, we do not permit modifying alpha from the color picker. You can however modify the material's\r\n                                alpha property directly, either in code via material.alpha OR via inspector's transparency section.\r\n                            </>\r\n                        }\r\n                    ></InfoLabel>\r\n                )}\r\n            </div>\r\n            <SpinButton\r\n                disabled={color instanceof Color3}\r\n                min={0}\r\n                max={1}\r\n                className={classes.spinButton}\r\n                value={color instanceof Color3 ? 1 : color.a}\r\n                step={0.01}\r\n                onChange={onChange}\r\n                id={id}\r\n            />\r\n        </div>\r\n    );\r\n};\r\n\r\nconst NUMBER_REGEX = /^\\d+$/;\r\n\r\nfunction rgbaToHsv(color: { r: number; g: number; b: number; a?: number }): { h: number; s: number; v: number; a?: number } {\r\n    const c = new Color3(color.r, color.g, color.b);\r\n    const hsv = c.toHSV();\r\n    return { h: hsv.r, s: hsv.g, v: hsv.b, a: color.a };\r\n}\r\n"]}
+{"version":3,"file":"colorPicker.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/colorPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable jsdoc/require-returns */\r\n/* eslint-disable @typescript-eslint/naming-convention */\r\nimport { useState, useEffect, useCallback } from \"react\";\r\nimport type { FunctionComponent, ChangeEvent } from \"react\";\r\nimport {\r\n    Input,\r\n    Label,\r\n    SpinButton,\r\n    useId,\r\n    ColorPicker,\r\n    ColorSlider,\r\n    ColorArea,\r\n    AlphaSlider,\r\n    InfoLabel,\r\n    Link,\r\n    makeStyles,\r\n    Popover,\r\n    PopoverSurface,\r\n    PopoverTrigger,\r\n    tokens,\r\n    Body1Strong,\r\n    ColorSwatch,\r\n} from \"@fluentui/react-components\";\r\nimport type { SpinButtonChangeEvent, SpinButtonOnChangeData, ColorPickerProps as FluentColorPickerProps, InputOnChangeData } from \"@fluentui/react-components\";\r\nimport { Color3, Color4 } from \"core/Maths/math.color\";\r\nimport type { BaseComponentProps } from \"../hoc/propertyLines/propertyLine\";\r\n\r\nconst useColorPickerStyles = makeStyles({\r\n    colorPickerContainer: {\r\n        width: \"325px\",\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        gap: tokens.spacingVerticalMNudge, // 10px\r\n        overflow: \"visible\",\r\n    },\r\n    previewColor: {\r\n        width: \"50px\",\r\n        height: \"50px\",\r\n        borderRadius: tokens.borderRadiusMedium,\r\n        border: `${tokens.spacingVerticalXXS} solid ${tokens.colorNeutralShadowKeyLighter}`,\r\n        \"@media (forced-colors: active)\": {\r\n            forcedColorAdjust: \"none\", // ensures elmement maintains color in high constrast mode\r\n        },\r\n    },\r\n    row: {\r\n        display: \"flex\",\r\n        flexDirection: \"row\",\r\n        gap: tokens.spacingVerticalM, // 12px\r\n        alignItems: \"center\",\r\n    },\r\n    colorFieldWrapper: {\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        gap: tokens.spacingVerticalSNudge, // 6px\r\n    },\r\n    input: {\r\n        width: \"80px\",\r\n    },\r\n    spinButton: {\r\n        minWidth: \"60px\",\r\n    },\r\n    container: {\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        gap: tokens.spacingVerticalL, // 16px\r\n    },\r\n});\r\n\r\nexport type ColorPickerProps<C extends Color3 | Color4> = {\r\n    isLinearMode?: boolean;\r\n} & BaseComponentProps<C>;\r\n\r\nexport const ColorPickerPopup: FunctionComponent<ColorPickerProps<Color3 | Color4>> = (props) => {\r\n    const classes = useColorPickerStyles();\r\n    const [color, setColor] = useState(props.value);\r\n\r\n    const [popoverOpen, setPopoverOpen] = useState(false);\r\n\r\n    useEffect(() => {\r\n        setColor(props.value); // Ensures the trigger color updates when props.value changes\r\n    }, [props.value]);\r\n\r\n    const handleColorPickerChange: FluentColorPickerProps[\"onColorChange\"] = (_, data) => {\r\n        let color: Color3 | Color4 = Color3.FromHSV(data.color.h, data.color.s, data.color.v);\r\n        if (props.value instanceof Color4) {\r\n            color = Color4.FromColor3(color, data.color.a ?? 1);\r\n        }\r\n        handleChange(color);\r\n    };\r\n\r\n    const handleChange = (newColor: Color3 | Color4) => {\r\n        setColor(newColor);\r\n        props.onChange(newColor); // Ensures the parent is notified when color changes from within colorPicker\r\n    };\r\n\r\n    return (\r\n        <Popover\r\n            positioning={{\r\n                align: \"start\",\r\n                overflowBoundary: document.body,\r\n                autoSize: true,\r\n            }}\r\n            open={popoverOpen}\r\n            trapFocus\r\n            onOpenChange={(_, data) => setPopoverOpen(data.open)}\r\n        >\r\n            <PopoverTrigger disableButtonEnhancement>\r\n                <ColorSwatch borderColor={tokens.colorNeutralShadowKeyDarker} size=\"small\" color={color.toHexString()} value={color.toHexString().slice(1)} />\r\n            </PopoverTrigger>\r\n\r\n            <PopoverSurface>\r\n                <div className={classes.colorPickerContainer}>\r\n                    <ColorPicker color={rgbaToHsv(color)} onColorChange={handleColorPickerChange}>\r\n                        <ColorArea inputX={{ \"aria-label\": \"Saturation\" }} inputY={{ \"aria-label\": \"Brightness\" }} />\r\n                        <ColorSlider aria-label=\"Hue\" />\r\n                        {color instanceof Color4 && <AlphaSlider aria-label=\"Alpha\" />}\r\n                    </ColorPicker>\r\n                    <div className={classes.container}>\r\n                        {/* Top Row: Preview, Gamma Hex, Linear Hex */}\r\n                        <div className={classes.row}>\r\n                            <div className={classes.previewColor} style={{ backgroundColor: color.toHexString() }} />\r\n                            <InputHexField label=\"Gamma Hex\" value={color} isLinearMode={props.isLinearMode} onChange={handleChange} />\r\n                            <InputHexField label=\"Linear Hex\" linearHex={true} isLinearMode={props.isLinearMode} value={color} onChange={handleChange} />\r\n                        </div>\r\n\r\n                        {/* Middle Row: Red, Green, Blue, Alpha */}\r\n                        <div className={classes.row}>\r\n                            <InputRgbField label=\"Red\" color={color} rgbKey=\"r\" onChange={handleChange} />\r\n                            <InputRgbField label=\"Green\" color={color} rgbKey=\"g\" onChange={handleChange} />\r\n                            <InputRgbField label=\"Blue\" color={color} rgbKey=\"b\" onChange={handleChange} />\r\n                            <InputAlphaField color={color} onChange={handleChange} />\r\n                        </div>\r\n\r\n                        {/* Bottom Row: Hue, Saturation, Value */}\r\n                        <div className={classes.row}>\r\n                            <InputHsvField label=\"Hue\" color={color} hsvKey=\"h\" max={360} onChange={handleChange} />\r\n                            <InputHsvField label=\"Saturation\" color={color} hsvKey=\"s\" max={100} scale={100} onChange={handleChange} />\r\n                            <InputHsvField label=\"Value\" color={color} hsvKey=\"v\" max={100} scale={100} onChange={handleChange} />\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </PopoverSurface>\r\n        </Popover>\r\n    );\r\n};\r\n\r\ntype HsvKey = \"h\" | \"s\" | \"v\";\r\nexport type InputHexProps = BaseComponentProps<Color3 | Color4> & {\r\n    label?: string;\r\n    linearHex?: boolean;\r\n    isLinearMode?: boolean;\r\n};\r\n/**\r\n * Component which displays the passed in color's HEX value, either in linearSpace (if linearHex is true) or in gamma space\r\n * When the hex color is changed by user, component calculates the new Color3/4 value and calls onChange\r\n *\r\n * Component uses the isLinearMode boolean to display an informative label regarding linear / gamma space\r\n * @param props - The properties for the InputHexField component.\r\n * @returns\r\n */\r\nexport const InputHexField: FunctionComponent<InputHexProps> = (props) => {\r\n    const id = useId(\"hex-input\");\r\n    const styles = useColorPickerStyles();\r\n    const { label, value, onChange, linearHex, isLinearMode } = props;\r\n\r\n    const handleChange = (e: ChangeEvent<HTMLInputElement>, _: InputOnChangeData) => {\r\n        // If linearHint (aka PBR material, ensure the other values are displayed in gamma even if linear hex changes)\r\n        const value = e.target.value;\r\n        if (value != \"\" && /^[0-9A-Fa-f]+$/g.test(value) == false) {\r\n            return;\r\n        }\r\n        onChange(Color3.FromHexString(value).toGammaSpace());\r\n    };\r\n    return (\r\n        <div className={styles.colorFieldWrapper}>\r\n            {props.linearHex ? (\r\n                <InfoLabel\r\n                    htmlFor={id}\r\n                    info={\r\n                        !isLinearMode ? (\r\n                            <> This color picker is attached to an entity whose color is stored in gamma space, so we are showing linear hex in disabled view </>\r\n                        ) : (\r\n                            <>\r\n                                This color picker is attached to an entity whose color is stored in linear space (ex: PBR Material), and Babylon converts the color to gamma space\r\n                                before rendering on screen because the human eye is best at processing colors in gamma space. We thus also want to display the color picker in gamma\r\n                                space so that the color chosen here will match the color seen in your entity.\r\n                                <br />\r\n                                If you want to copy/paste the HEX into your code, you can either use\r\n                                <Body1Strong>Color3.FromHexString(LINEAR_HEX)</Body1Strong>\r\n                                <br />\r\n                                or\r\n                                <br />\r\n                                <Body1Strong>Color3.FromHexString(GAMMA_HEX).toLinearSpace()</Body1Strong>\r\n                                <br />\r\n                                <br />\r\n                                <Link href=\"https://doc.babylonjs.com/preparingArtForBabylon/controllingColorSpace/\"> Read more in our docs! </Link>\r\n                            </>\r\n                        )\r\n                    }\r\n                >\r\n                    {label}\r\n                </InfoLabel>\r\n            ) : (\r\n                <Label htmlFor={id}>{label}</Label>\r\n            )}\r\n            <Input\r\n                disabled={linearHex ? !isLinearMode : false}\r\n                className={styles.input}\r\n                value={linearHex ? value.toLinearSpace().toHexString() : value.toHexString()}\r\n                id={id}\r\n                onChange={handleChange}\r\n            />\r\n        </div>\r\n    );\r\n};\r\n\r\ntype RgbKey = \"r\" | \"g\" | \"b\";\r\ntype InputRgbFieldProps = {\r\n    color: Color3 | Color4;\r\n    label: string;\r\n    rgbKey: RgbKey;\r\n    onChange: (color: Color3 | Color4) => void;\r\n};\r\n\r\nconst InputRgbField: FunctionComponent<InputRgbFieldProps> = (props) => {\r\n    const { color, onChange, label, rgbKey } = props;\r\n    const id = useId(`${label.toLowerCase()}-input`);\r\n    const classes = useColorPickerStyles();\r\n\r\n    const handleChange = useCallback(\r\n        (_: SpinButtonChangeEvent, data: SpinButtonOnChangeData) => {\r\n            const val = data.value ?? parseFloat(data.displayValue ?? \"\");\r\n\r\n            if (val === null || Number.isNaN(val) || !NUMBER_REGEX.test(val.toString())) {\r\n                return;\r\n            }\r\n\r\n            const newColor = color.clone();\r\n            newColor[rgbKey] = val / 255.0; // Convert to 0-1 range\r\n            onChange(newColor);\r\n        },\r\n        [color]\r\n    );\r\n\r\n    return (\r\n        <div className={classes.colorFieldWrapper}>\r\n            <Label htmlFor={id}>{label}</Label>\r\n            <SpinButton className={classes.spinButton} min={0} max={255} value={color[rgbKey] * 255.0} step={1} id={id} onChange={handleChange} name={rgbKey} />\r\n        </div>\r\n    );\r\n};\r\n\r\ntype InputHsvFieldProps = {\r\n    color: Color3 | Color4;\r\n    label: string;\r\n    hsvKey: HsvKey;\r\n    onChange: (color: Color3 | Color4) => void;\r\n    max: number;\r\n    scale?: number;\r\n};\r\n\r\n/**\r\n * In the HSV (Hue, Saturation, Value) color model, Hue (H) ranges from 0 to 360 degrees, representing the color's position on the color wheel.\r\n * Saturation (S) ranges from 0 to 100%, indicating the intensity or purity of the color, with 0 being shades of gray and 100 being a fully saturated color.\r\n * Value (V) ranges from 0 to 100%, representing the brightness of the color, with 0 being black and 100 being the brightest.\r\n * @param props - The properties for the InputHsvField component.\r\n */\r\nexport const InputHsvField: FunctionComponent<InputHsvFieldProps> = (props) => {\r\n    const { color, label, hsvKey, max, scale = 1 } = props;\r\n\r\n    const id = useId(`${label.toLowerCase()}-input`);\r\n    const classes = useColorPickerStyles();\r\n\r\n    const handleChange = useCallback(\r\n        (_: SpinButtonChangeEvent, data: SpinButtonOnChangeData) => {\r\n            const val = data.value ?? parseFloat(data.displayValue ?? \"\");\r\n\r\n            if (val === null || Number.isNaN(val) || !NUMBER_REGEX.test(val.toString())) {\r\n                return;\r\n            }\r\n\r\n            // Convert current color to HSV, update the new hsv value, then call onChange prop\r\n            const hsv = rgbaToHsv(color);\r\n            hsv[hsvKey] = val / scale;\r\n            let newColor: Color3 | Color4 = Color3.FromHSV(hsv.h, hsv.s, hsv.v);\r\n            if (color instanceof Color4) {\r\n                newColor = Color4.FromColor3(newColor, color.a ?? 1);\r\n            }\r\n            props.onChange(newColor);\r\n        },\r\n        [color]\r\n    );\r\n\r\n    return (\r\n        <div className={classes.colorFieldWrapper}>\r\n            <Label htmlFor={id}>{label}</Label>\r\n            <SpinButton className={classes.spinButton} min={0} max={max} value={rgbaToHsv(color)[hsvKey] * scale} step={1} id={id} onChange={handleChange} name={hsvKey} />\r\n        </div>\r\n    );\r\n};\r\n\r\ntype InputAlphaProps = {\r\n    color: Color3 | Color4;\r\n    onChange: (color: Color4) => void;\r\n};\r\n\r\n/**\r\n * Displays the alpha value of a color, either in the disabled state (if color is Color3) or as a spin button (if color is Color4).\r\n * @param props\r\n * @returns\r\n */\r\nconst InputAlphaField: FunctionComponent<InputAlphaProps> = (props) => {\r\n    const classes = useColorPickerStyles();\r\n    const id = useId(\"alpha-input\");\r\n    const { color } = props;\r\n\r\n    const onChange = (_: SpinButtonChangeEvent, data: SpinButtonOnChangeData) => {\r\n        const value = data.value ?? parseFloat(data.displayValue ?? \"\");\r\n\r\n        if (Number.isNaN(value) || value < 0 || value > 1) {\r\n            return;\r\n        }\r\n\r\n        if (color instanceof Color4) {\r\n            const newColor = color.clone();\r\n            newColor.a = value;\r\n            return newColor;\r\n        } else {\r\n            return Color4.FromColor3(color, value);\r\n        }\r\n    };\r\n\r\n    return (\r\n        <div className={classes.colorFieldWrapper}>\r\n            <div className={classes.row}>\r\n                <Label htmlFor={id}>Alpha</Label>\r\n                {color instanceof Color3 && (\r\n                    <InfoLabel\r\n                        htmlFor={id}\r\n                        info={\r\n                            <>\r\n                                Because this color picker is representing a Color3, we do not permit modifying alpha from the color picker. You can however modify the material's\r\n                                alpha property directly, either in code via material.alpha OR via inspector's transparency section.\r\n                            </>\r\n                        }\r\n                    ></InfoLabel>\r\n                )}\r\n            </div>\r\n            <SpinButton\r\n                disabled={color instanceof Color3}\r\n                min={0}\r\n                max={1}\r\n                className={classes.spinButton}\r\n                value={color instanceof Color3 ? 1 : color.a}\r\n                step={0.01}\r\n                onChange={onChange}\r\n                id={id}\r\n            />\r\n        </div>\r\n    );\r\n};\r\n\r\nconst NUMBER_REGEX = /^\\d+$/;\r\n\r\nfunction rgbaToHsv(color: { r: number; g: number; b: number; a?: number }): { h: number; s: number; v: number; a?: number } {\r\n    const c = new Color3(color.r, color.g, color.b);\r\n    const hsv = c.toHSV();\r\n    return { h: hsv.r, s: hsv.g, v: hsv.b, a: color.a };\r\n}\r\n"]}

package/fluent/primitives/draggable.d.ts

@@ -0,0 +1,8 @@
+export type DraggableLineProps = {
+    format: string;
+    data: string;
+    tooltip: string;
+    label: string;
+    onDelete?: () => void;
+};
+export declare const DraggableLine: React.FunctionComponent<DraggableLineProps>;

package/fluent/primitives/draggable.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { makeStyles, tokens } from "@fluentui/react-components";
+import { DeleteFilled } from "@fluentui/react-icons";
+import { LineContainer } from "../hoc/propertyLines/propertyLine.js";
+const useDraggableStyles = makeStyles({
+    draggable: {
+        display: "inline-flex",
+        alignItems: "center",
+        columnGap: tokens.spacingHorizontalS,
+        cursor: "grab",
+        textAlign: "center",
+        boxSizing: "border-box",
+        borderBottom: "black",
+        margin: `${tokens.spacingVerticalXS} 0px`,
+        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        ":hover": {
+            backgroundColor: tokens.colorBrandBackground2Hover,
+        },
+    },
+    icon: {
+        pointerEvents: "auto", // re‑enable interaction
+        display: "flex",
+        alignItems: "center",
+    },
+});
+export const DraggableLine = (props) => {
+    const classes = useDraggableStyles();
+    return (_jsx("div", { className: classes.draggable, title: props.tooltip, draggable: true, onDragStart: (event) => {
+            event.dataTransfer.setData(props.format, props.data);
+        }, children: _jsxs(LineContainer, { children: [props.label, props.onDelete && _jsx(DeleteFilled, { className: classes.icon, onClick: props.onDelete })] }) }));
+};
+//# sourceMappingURL=draggable.js.map

package/fluent/primitives/draggable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"draggable.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/draggable.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAUlE,MAAM,kBAAkB,GAAG,UAAU,CAAC;IAClC,SAAS,EAAE;QACP,OAAO,EAAE,aAAa;QACtB,UAAU,EAAE,QAAQ;QACpB,SAAS,EAAE,MAAM,CAAC,kBAAkB;QACpC,MAAM,EAAE,MAAM;QACd,SAAS,EAAE,QAAQ;QACnB,SAAS,EAAE,YAAY;QACvB,YAAY,EAAE,OAAO;QACrB,MAAM,EAAE,GAAG,MAAM,CAAC,iBAAiB,MAAM;QACzC,MAAM,EAAE,GAAG,MAAM,CAAC,eAAe,UAAU,MAAM,CAAC,mBAAmB,EAAE;QAEvE,gEAAgE;QAChE,QAAQ,EAAE;YACN,eAAe,EAAE,MAAM,CAAC,0BAA0B;SACrD;KACJ;IACD,IAAI,EAAE;QACF,aAAa,EAAE,MAAM,EAAE,wBAAwB;QAC/C,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;KACvB;CACJ,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,aAAa,GAAgD,CAAC,KAAK,EAAE,EAAE;IAChF,MAAM,OAAO,GAAG,kBAAkB,EAAE,CAAC;IACrC,OAAO,CACH,cACI,SAAS,EAAE,OAAO,CAAC,SAAS,EAC5B,KAAK,EAAE,KAAK,CAAC,OAAO,EACpB,SAAS,EAAE,IAAI,EACf,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE;YACnB,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;QACzD,CAAC,YAED,MAAC,aAAa,eACT,KAAK,CAAC,KAAK,EACX,KAAK,CAAC,QAAQ,IAAI,KAAC,YAAY,IAAC,SAAS,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,QAAQ,GAAI,IACzE,GACd,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { makeStyles, tokens } from \"@fluentui/react-components\";\r\nimport { DeleteFilled } from \"@fluentui/react-icons\";\r\nimport { LineContainer } from \"../hoc/propertyLines/propertyLine\";\r\n\r\nexport type DraggableLineProps = {\r\n    format: string;\r\n    data: string;\r\n    tooltip: string;\r\n    label: string;\r\n    onDelete?: () => void;\r\n};\r\n\r\nconst useDraggableStyles = makeStyles({\r\n    draggable: {\r\n        display: \"inline-flex\",\r\n        alignItems: \"center\",\r\n        columnGap: tokens.spacingHorizontalS,\r\n        cursor: \"grab\",\r\n        textAlign: \"center\",\r\n        boxSizing: \"border-box\",\r\n        borderBottom: \"black\",\r\n        margin: `${tokens.spacingVerticalXS} 0px`,\r\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\r\n\r\n        // eslint-disable-next-line @typescript-eslint/naming-convention\r\n        \":hover\": {\r\n            backgroundColor: tokens.colorBrandBackground2Hover,\r\n        },\r\n    },\r\n    icon: {\r\n        pointerEvents: \"auto\", // re‑enable interaction\r\n        display: \"flex\",\r\n        alignItems: \"center\",\r\n    },\r\n});\r\n\r\nexport const DraggableLine: React.FunctionComponent<DraggableLineProps> = (props) => {\r\n    const classes = useDraggableStyles();\r\n    return (\r\n        <div\r\n            className={classes.draggable}\r\n            title={props.tooltip}\r\n            draggable={true}\r\n            onDragStart={(event) => {\r\n                event.dataTransfer.setData(props.format, props.data);\r\n            }}\r\n        >\r\n            <LineContainer>\r\n                {props.label}\r\n                {props.onDelete && <DeleteFilled className={classes.icon} onClick={props.onDelete} />}\r\n            </LineContainer>\r\n        </div>\r\n    );\r\n};\r\n"]}

package/fluent/primitives/dropdown.d.ts

@@ -1,5 +1,5 @@
 import type { FunctionComponent } from "react";
-import type { BaseComponentProps } from "../hoc/propertyLine.js";
+import type { BaseComponentProps } from "../hoc/propertyLines/propertyLine.js";
 import type { Nullable } from "@babylonjs/core/types.js";
 type DropdownOptionValue = string | number;
 export type AcceptedDropdownValue = Nullable<DropdownOptionValue> | undefined;

package/fluent/primitives/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/dropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC5F,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAKrD,MAAM,iBAAiB,GAAG,UAAU,CAAC;IACjC,cAAc,EAAE;QACZ,SAAS,EAAE,OAAO;QAClB,QAAQ,EAAE,MAAM;KACnB;IACD,WAAW,EAAE,EAAE;CAClB,CAAC,CAAC;AAqBH;;;;;GAKG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA4D,CAAC,KAAK,EAAE,EAAE;IACvF,MAAM,OAAO,GAAG,iBAAiB,EAAE,CAAC;IACpC,mIAAmI;IACnI,MAAM,OAAO,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,CAAC,gBAAgB,EAAE,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,EAC5H,CAAC,KAAK,CAAC,aAAa,EAAE,KAAK,CAAC,OAAO,CAAC,CACvC,CAAC;IACF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAC1G,SAAS,CAAC,GAAG,EAAE;QACX,aAAa,CAAC,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAC/E,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,OAAO,CACH,KAAC,cAAc,IACX,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,OAAO,CAAC,cAAc,EACjC,cAAc,EAAE,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE;YAC1B,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC;YAC5F,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;gBACtB,aAAa,CAAC,KAAK,CAAC,CAAC;gBACrB,MAAM,OAAO,GAAG,KAAK,CAAC,aAAa,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;gBAClE,KAAK,KAAK,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;YACxF,CAAC;QACL,CAAC,EACD,eAAe,EAAE,CAAC,UAAU,CAAC,QAAQ,EAAE,CAAC,EACxC,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,UAAU,CAAC,EAAE,KAAK,YAExD,OAAO,CAAC,GAAG,CAAC,CAAC,MAAsB,EAAE,EAAE,CAAC,CACrC,KAAC,MAAM,IAAC,SAAS,EAAE,OAAO,CAAC,WAAW,EAAqB,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,QAAQ,EAAE,KAAK,YACrG,MAAM,CAAC,KAAK,IAD4B,MAAM,CAAC,KAAK,CAEhD,CACZ,CAAC,GACW,CACpB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { Dropdown as FluentDropdown, makeStyles, Option } from \"@fluentui/react-components\";\r\nimport { useEffect, useMemo, useState } from \"react\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport type { BaseComponentProps } from \"../hoc/propertyLine\";\r\nimport type { Nullable } from \"core/types\";\r\n\r\nconst useDropdownStyles = makeStyles({\r\n    dropdownOption: {\r\n        textAlign: \"right\",\r\n        minWidth: \"40px\",\r\n    },\r\n    optionsLine: {},\r\n});\r\n\r\ntype DropdownOptionValue = string | number;\r\nexport type AcceptedDropdownValue = Nullable<DropdownOptionValue> | undefined;\r\nexport type DropdownOption = {\r\n    /**\r\n     * Defines the visible part of the option\r\n     */\r\n    label: string;\r\n    /**\r\n     * Defines the value part of the option\r\n     */\r\n    value: DropdownOptionValue;\r\n};\r\n\r\nexport type DropdownProps<V extends AcceptedDropdownValue> = BaseComponentProps<V> & {\r\n    options: readonly DropdownOption[];\r\n\r\n    includeNullAs?: \"null\" | \"undefined\"; // If supplied, adds an option with label 'Not Defined' and later sets value either null or undefined\r\n};\r\n\r\n/**\r\n * Renders a fluent UI dropdown component for the options passed in, and an additional 'Not Defined' option if null is set to true\r\n * This component can handle both null and undefined values\r\n * @param props\r\n * @returns dropdown component\r\n */\r\nexport const Dropdown: FunctionComponent<DropdownProps<AcceptedDropdownValue>> = (props) => {\r\n    const classes = useDropdownStyles();\r\n    // This component can handle both null and undefined values, so '==' null is intentionally used throughout to check for both cases.\r\n    const options = useMemo(\r\n        () => (props.includeNullAs ? [{ label: \"<Not defined>\", value: Number.MAX_SAFE_INTEGER }, ...props.options] : props.options),\r\n        [props.includeNullAs, props.options]\r\n    );\r\n    const [defaultVal, setDefaultVal] = useState(props.value == null ? Number.MAX_SAFE_INTEGER : props.value);\r\n    useEffect(() => {\r\n        setDefaultVal(props.value == null ? Number.MAX_SAFE_INTEGER : props.value);\r\n    }, [props.value]);\r\n\r\n    return (\r\n        <FluentDropdown\r\n            size=\"small\"\r\n            className={classes.dropdownOption}\r\n            onOptionSelect={(evt, data) => {\r\n                const value = typeof props.value === \"number\" ? Number(data.optionValue) : data.optionValue;\r\n                if (value !== undefined) {\r\n                    setDefaultVal(value);\r\n                    const nullVal = props.includeNullAs === \"null\" ? null : undefined;\r\n                    value === Number.MAX_SAFE_INTEGER ? props.onChange(nullVal) : props.onChange(value);\r\n                }\r\n            }}\r\n            selectedOptions={[defaultVal.toString()]}\r\n            value={options.find((o) => o.value === defaultVal)?.label}\r\n        >\r\n            {options.map((option: DropdownOption) => (\r\n                <Option className={classes.optionsLine} key={option.label} value={option.value.toString()} disabled={false}>\r\n                    {option.label}\r\n                </Option>\r\n            ))}\r\n        </FluentDropdown>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/dropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC5F,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAKrD,MAAM,iBAAiB,GAAG,UAAU,CAAC;IACjC,cAAc,EAAE;QACZ,SAAS,EAAE,OAAO;QAClB,QAAQ,EAAE,MAAM;KACnB;IACD,WAAW,EAAE,EAAE;CAClB,CAAC,CAAC;AAqBH;;;;;GAKG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA4D,CAAC,KAAK,EAAE,EAAE;IACvF,MAAM,OAAO,GAAG,iBAAiB,EAAE,CAAC;IACpC,mIAAmI;IACnI,MAAM,OAAO,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,CAAC,gBAAgB,EAAE,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,EAC5H,CAAC,KAAK,CAAC,aAAa,EAAE,KAAK,CAAC,OAAO,CAAC,CACvC,CAAC;IACF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAC1G,SAAS,CAAC,GAAG,EAAE;QACX,aAAa,CAAC,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAC/E,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,OAAO,CACH,KAAC,cAAc,IACX,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,OAAO,CAAC,cAAc,EACjC,cAAc,EAAE,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE;YAC1B,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC;YAC5F,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;gBACtB,aAAa,CAAC,KAAK,CAAC,CAAC;gBACrB,MAAM,OAAO,GAAG,KAAK,CAAC,aAAa,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;gBAClE,KAAK,KAAK,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;YACxF,CAAC;QACL,CAAC,EACD,eAAe,EAAE,CAAC,UAAU,CAAC,QAAQ,EAAE,CAAC,EACxC,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,UAAU,CAAC,EAAE,KAAK,YAExD,OAAO,CAAC,GAAG,CAAC,CAAC,MAAsB,EAAE,EAAE,CAAC,CACrC,KAAC,MAAM,IAAC,SAAS,EAAE,OAAO,CAAC,WAAW,EAAqB,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,QAAQ,EAAE,KAAK,YACrG,MAAM,CAAC,KAAK,IAD4B,MAAM,CAAC,KAAK,CAEhD,CACZ,CAAC,GACW,CACpB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { Dropdown as FluentDropdown, makeStyles, Option } from \"@fluentui/react-components\";\r\nimport { useEffect, useMemo, useState } from \"react\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport type { BaseComponentProps } from \"../hoc/propertyLines/propertyLine\";\r\nimport type { Nullable } from \"core/types\";\r\n\r\nconst useDropdownStyles = makeStyles({\r\n    dropdownOption: {\r\n        textAlign: \"right\",\r\n        minWidth: \"40px\",\r\n    },\r\n    optionsLine: {},\r\n});\r\n\r\ntype DropdownOptionValue = string | number;\r\nexport type AcceptedDropdownValue = Nullable<DropdownOptionValue> | undefined;\r\nexport type DropdownOption = {\r\n    /**\r\n     * Defines the visible part of the option\r\n     */\r\n    label: string;\r\n    /**\r\n     * Defines the value part of the option\r\n     */\r\n    value: DropdownOptionValue;\r\n};\r\n\r\nexport type DropdownProps<V extends AcceptedDropdownValue> = BaseComponentProps<V> & {\r\n    options: readonly DropdownOption[];\r\n\r\n    includeNullAs?: \"null\" | \"undefined\"; // If supplied, adds an option with label 'Not Defined' and later sets value either null or undefined\r\n};\r\n\r\n/**\r\n * Renders a fluent UI dropdown component for the options passed in, and an additional 'Not Defined' option if null is set to true\r\n * This component can handle both null and undefined values\r\n * @param props\r\n * @returns dropdown component\r\n */\r\nexport const Dropdown: FunctionComponent<DropdownProps<AcceptedDropdownValue>> = (props) => {\r\n    const classes = useDropdownStyles();\r\n    // This component can handle both null and undefined values, so '==' null is intentionally used throughout to check for both cases.\r\n    const options = useMemo(\r\n        () => (props.includeNullAs ? [{ label: \"<Not defined>\", value: Number.MAX_SAFE_INTEGER }, ...props.options] : props.options),\r\n        [props.includeNullAs, props.options]\r\n    );\r\n    const [defaultVal, setDefaultVal] = useState(props.value == null ? Number.MAX_SAFE_INTEGER : props.value);\r\n    useEffect(() => {\r\n        setDefaultVal(props.value == null ? Number.MAX_SAFE_INTEGER : props.value);\r\n    }, [props.value]);\r\n\r\n    return (\r\n        <FluentDropdown\r\n            size=\"small\"\r\n            className={classes.dropdownOption}\r\n            onOptionSelect={(evt, data) => {\r\n                const value = typeof props.value === \"number\" ? Number(data.optionValue) : data.optionValue;\r\n                if (value !== undefined) {\r\n                    setDefaultVal(value);\r\n                    const nullVal = props.includeNullAs === \"null\" ? null : undefined;\r\n                    value === Number.MAX_SAFE_INTEGER ? props.onChange(nullVal) : props.onChange(value);\r\n                }\r\n            }}\r\n            selectedOptions={[defaultVal.toString()]}\r\n            value={options.find((o) => o.value === defaultVal)?.label}\r\n        >\r\n            {options.map((option: DropdownOption) => (\r\n                <Option className={classes.optionsLine} key={option.label} value={option.value.toString()} disabled={false}>\r\n                    {option.label}\r\n                </Option>\r\n            ))}\r\n        </FluentDropdown>\r\n    );\r\n};\r\n"]}

package/fluent/primitives/gradient.d.ts

@@ -0,0 +1,28 @@
+import type { FunctionComponent } from "react";
+import type { BaseComponentProps } from "../hoc/propertyLines/propertyLine.js";
+import { Color3Gradient, ColorGradient as Color4Gradient, FactorGradient } from "@babylonjs/core/Misc/gradients.js";
+import { GradientBlockColorStep } from "@babylonjs/core/Materials/Node/Blocks/gradientBlock.js";
+/**
+ * Component wrapper for FactorGradient that provides slider inputs for factor1, factor2, and gradient step
+ * @param props - Component props containing FactorGradient value and change handler
+ * @returns A React component
+ */
+export declare const FactorGradientComponent: FunctionComponent<BaseComponentProps<FactorGradient>>;
+/**
+ * Component wrapper for Color3Gradient that provides color picker and gradient step slider
+ * @param props - Component props containing Color3Gradient value and change handler
+ * @returns A React component
+ */
+export declare const Color3GradientComponent: FunctionComponent<BaseComponentProps<Color3Gradient>>;
+/**
+ * Component wrapper for Color4Gradient that provides color pickers for color1, color2, and gradient step slider
+ * @param props - Component props containing Color4Gradient value and change handler
+ * @returns A React component
+ */
+export declare const Color4GradientComponent: FunctionComponent<BaseComponentProps<Color4Gradient>>;
+/**
+ * Component wrapper for GradientBlockColorStep that provides color picker and step slider
+ * @param props - Component props containing GradientBlockColorStep value and change handler
+ * @returns A React component
+ */
+export declare const ColorStepGradientComponent: FunctionComponent<BaseComponentProps<GradientBlockColorStep>>;

package/fluent/primitives/gradient.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { makeStyles, tokens } from "@fluentui/react-components";
+import { SyncedSliderInput } from "./syncedSlider.js";
+import { Color3, Color4 } from "@babylonjs/core/Maths/math.color.js";
+import { ColorPickerPopup } from "./colorPicker.js";
+import { Color3Gradient, ColorGradient as Color4Gradient, FactorGradient } from "@babylonjs/core/Misc/gradients.js";
+import { GradientBlockColorStep } from "@babylonjs/core/Materials/Node/Blocks/gradientBlock.js";
+const useGradientStyles = makeStyles({
+    container: {
+        display: "flex",
+        alignItems: "center",
+        gap: tokens.spacingHorizontalS,
+        width: "100%",
+    },
+    // Wrapper for each slider to control its size
+    valueWrapper: {
+        flex: "0 1 auto", // Don't grow, can shrink, size based on content
+        alignContent: "center",
+        minWidth: "80px", // Minimum width to keep usable
+        maxWidth: "100px", // Maximum width to prevent them from getting too wide
+    },
+    // Wrapper for color pickers - much smaller since they're just swatches
+    colorWrapper: {
+        alignContent: "center",
+        // No flex properties - just take natural size
+    },
+    // Wrapper for the step slider to take remaining space
+    stepSliderWrapper: {
+        flex: "1 0 auto", // Can grow, don't shrink, size based on content
+        minWidth: "100px",
+    },
+});
+/**
+ * Gradient component that displays 1 or 2 color or number inputs next to a slider
+ * @param props - Component props containing gradient value and change handlers
+ * @returns A React component
+ */
+const Gradient = (props) => {
+    const [gradient, setGradient] = useState(props.value);
+    const classes = useGradientStyles();
+    useEffect(() => {
+        setGradient(props.value); // Re-render if props.value changes
+    }, [props.value]);
+    const gradientChange = (newGradient) => {
+        setGradient(newGradient);
+        props.onChange(newGradient);
+    };
+    return (_jsxs("div", { id: "gradientContainer", className: classes.container, children: [_jsx("div", { className: gradient.value1 instanceof Color3 || gradient.value1 instanceof Color4 ? classes.colorWrapper : classes.valueWrapper, children: gradient.value1 instanceof Color3 || gradient.value1 instanceof Color4 ? (_jsx(ColorPickerPopup, { value: gradient.value1, onChange: (color) => gradientChange({ ...gradient, value1: color }) })) : (_jsx(SyncedSliderInput, { step: 0.01, value: gradient.value1, onChange: (val) => gradientChange({ ...gradient, value1: val }) })) }), gradient.value2 !== undefined && (_jsx("div", { className: gradient.value2 instanceof Color3 || gradient.value2 instanceof Color4 ? classes.colorWrapper : classes.valueWrapper, children: gradient.value2 instanceof Color3 || gradient.value2 instanceof Color4 ? (_jsx(ColorPickerPopup, { value: gradient.value2, onChange: (color) => gradientChange({ ...gradient, value2: color }) })) : (_jsx(SyncedSliderInput, { step: 0.01, value: gradient.value2, onChange: (val) => gradientChange({ ...gradient, value2: val }) })) })), _jsx("div", { className: classes.stepSliderWrapper, children: _jsx(SyncedSliderInput, { notifyOnlyOnRelease: true, min: 0, max: 1, step: 0.01, value: gradient.step, onChange: (val) => gradientChange({ ...gradient, step: val }) }) })] }));
+};
+const FactorGradientCast = Gradient;
+const Color3GradientCast = Gradient;
+const Color4GradientCast = Gradient;
+/**
+ * Component wrapper for FactorGradient that provides slider inputs for factor1, factor2, and gradient step
+ * @param props - Component props containing FactorGradient value and change handler
+ * @returns A React component
+ */
+export const FactorGradientComponent = (props) => {
+    return (_jsx(FactorGradientCast, { ...props, value: { value1: props.value.factor1, value2: props.value.factor2, step: props.value.gradient }, onChange: (gradient) => props.onChange(new FactorGradient(gradient.step, gradient.value1, gradient.value2)) }));
+};
+/**
+ * Component wrapper for Color3Gradient that provides color picker and gradient step slider
+ * @param props - Component props containing Color3Gradient value and change handler
+ * @returns A React component
+ */
+export const Color3GradientComponent = (props) => {
+    return (_jsx(Color3GradientCast, { ...props, value: { value1: props.value.color, step: props.value.gradient }, onChange: (gradient) => props.onChange(new Color3Gradient(gradient.step, gradient.value1)) }));
+};
+/**
+ * Component wrapper for Color4Gradient that provides color pickers for color1, color2, and gradient step slider
+ * @param props - Component props containing Color4Gradient value and change handler
+ * @returns A React component
+ */
+export const Color4GradientComponent = (props) => {
+    return (_jsx(Color4GradientCast, { ...props, value: { value1: props.value.color1, value2: props.value.color2, step: props.value.gradient }, onChange: (gradient) => props.onChange(new Color4Gradient(gradient.step, gradient.value1, gradient.value2)) }));
+};
+/**
+ * Component wrapper for GradientBlockColorStep that provides color picker and step slider
+ * @param props - Component props containing GradientBlockColorStep value and change handler
+ * @returns A React component
+ */
+export const ColorStepGradientComponent = (props) => {
+    return (_jsx(Color3GradientCast, { ...props, value: { value1: props.value.color, step: props.value.step }, onChange: (gradient) => props.onChange(new GradientBlockColorStep(gradient.step, gradient.value1)) }));
+};
+//# sourceMappingURL=gradient.js.map

package/fluent/primitives/gradient.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gradient.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/gradient.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FunctionComponent } from \"react\";\r\nimport { useEffect, useState } from \"react\";\r\nimport { makeStyles, tokens } from \"@fluentui/react-components\";\r\n\r\nimport { SyncedSliderInput } from \"./syncedSlider\";\r\nimport { Color3, Color4 } from \"core/Maths/math.color\";\r\nimport { ColorPickerPopup } from \"./colorPicker\";\r\nimport type { BaseComponentProps } from \"../hoc/propertyLines/propertyLine\";\r\nimport { Color3Gradient, ColorGradient as Color4Gradient, FactorGradient } from \"core/Misc/gradients\";\r\nimport { GradientBlockColorStep } from \"core/Materials/Node/Blocks/gradientBlock\";\r\n\r\nconst useGradientStyles = makeStyles({\r\n    container: {\r\n        display: \"flex\",\r\n        alignItems: \"center\",\r\n        gap: tokens.spacingHorizontalS,\r\n        width: \"100%\",\r\n    },\r\n    // Wrapper for each slider to control its size\r\n    valueWrapper: {\r\n        flex: \"0 1 auto\", // Don't grow, can shrink, size based on content\r\n        alignContent: \"center\",\r\n        minWidth: \"80px\", // Minimum width to keep usable\r\n        maxWidth: \"100px\", // Maximum width to prevent them from getting too wide\r\n    },\r\n    // Wrapper for color pickers - much smaller since they're just swatches\r\n    colorWrapper: {\r\n        alignContent: \"center\",\r\n        // No flex properties - just take natural size\r\n    },\r\n    // Wrapper for the step slider to take remaining space\r\n    stepSliderWrapper: {\r\n        flex: \"1 0 auto\", // Can grow, don't shrink, size based on content\r\n        minWidth: \"100px\",\r\n    },\r\n});\r\n\r\ntype GradientProps<T extends number | Color3 | Color4> = {\r\n    value1: T;\r\n    value2?: T;\r\n    step: number;\r\n};\r\n\r\n/**\r\n * Gradient component that displays 1 or 2 color or number inputs next to a slider\r\n * @param props - Component props containing gradient value and change handlers\r\n * @returns A React component\r\n */\r\nconst Gradient: FunctionComponent<BaseComponentProps<GradientProps<number | Color3 | Color4>>> = (props) => {\r\n    const [gradient, setGradient] = useState(props.value);\r\n    const classes = useGradientStyles();\r\n\r\n    useEffect(() => {\r\n        setGradient(props.value); // Re-render if props.value changes\r\n    }, [props.value]);\r\n\r\n    const gradientChange = (newGradient: GradientProps<number | Color3 | Color4>) => {\r\n        setGradient(newGradient);\r\n        props.onChange(newGradient);\r\n    };\r\n    return (\r\n        <div id=\"gradientContainer\" className={classes.container}>\r\n            <div className={gradient.value1 instanceof Color3 || gradient.value1 instanceof Color4 ? classes.colorWrapper : classes.valueWrapper}>\r\n                {gradient.value1 instanceof Color3 || gradient.value1 instanceof Color4 ? (\r\n                    <ColorPickerPopup value={gradient.value1} onChange={(color) => gradientChange({ ...gradient, value1: color })} />\r\n                ) : (\r\n                    <SyncedSliderInput step={0.01} value={gradient.value1} onChange={(val) => gradientChange({ ...gradient, value1: val })} />\r\n                )}\r\n            </div>\r\n            {gradient.value2 !== undefined && (\r\n                <div className={gradient.value2 instanceof Color3 || gradient.value2 instanceof Color4 ? classes.colorWrapper : classes.valueWrapper}>\r\n                    {gradient.value2 instanceof Color3 || gradient.value2 instanceof Color4 ? (\r\n                        <ColorPickerPopup value={gradient.value2} onChange={(color) => gradientChange({ ...gradient, value2: color })} />\r\n                    ) : (\r\n                        <SyncedSliderInput step={0.01} value={gradient.value2} onChange={(val) => gradientChange({ ...gradient, value2: val })} />\r\n                    )}\r\n                </div>\r\n            )}\r\n\r\n            <div className={classes.stepSliderWrapper}>\r\n                <SyncedSliderInput notifyOnlyOnRelease={true} min={0} max={1} step={0.01} value={gradient.step} onChange={(val) => gradientChange({ ...gradient, step: val })} />\r\n            </div>\r\n        </div>\r\n    );\r\n};\r\n\r\nconst FactorGradientCast = Gradient as FunctionComponent<BaseComponentProps<GradientProps<number>>>;\r\nconst Color3GradientCast = Gradient as FunctionComponent<BaseComponentProps<GradientProps<Color3>>>;\r\nconst Color4GradientCast = Gradient as FunctionComponent<BaseComponentProps<GradientProps<Color4>>>;\r\n\r\n/**\r\n * Component wrapper for FactorGradient that provides slider inputs for factor1, factor2, and gradient step\r\n * @param props - Component props containing FactorGradient value and change handler\r\n * @returns A React component\r\n */\r\nexport const FactorGradientComponent: FunctionComponent<BaseComponentProps<FactorGradient>> = (props) => {\r\n    return (\r\n        <FactorGradientCast\r\n            {...props}\r\n            value={{ value1: props.value.factor1, value2: props.value.factor2, step: props.value.gradient }}\r\n            onChange={(gradient) => props.onChange(new FactorGradient(gradient.step, gradient.value1, gradient.value2))}\r\n        />\r\n    );\r\n};\r\n/**\r\n * Component wrapper for Color3Gradient that provides color picker and gradient step slider\r\n * @param props - Component props containing Color3Gradient value and change handler\r\n * @returns A React component\r\n */\r\nexport const Color3GradientComponent: FunctionComponent<BaseComponentProps<Color3Gradient>> = (props) => {\r\n    return (\r\n        <Color3GradientCast\r\n            {...props}\r\n            value={{ value1: props.value.color, step: props.value.gradient }}\r\n            onChange={(gradient) => props.onChange(new Color3Gradient(gradient.step, gradient.value1))}\r\n        />\r\n    );\r\n};\r\n/**\r\n * Component wrapper for Color4Gradient that provides color pickers for color1, color2, and gradient step slider\r\n * @param props - Component props containing Color4Gradient value and change handler\r\n * @returns A React component\r\n */\r\nexport const Color4GradientComponent: FunctionComponent<BaseComponentProps<Color4Gradient>> = (props) => {\r\n    return (\r\n        <Color4GradientCast\r\n            {...props}\r\n            value={{ value1: props.value.color1, value2: props.value.color2, step: props.value.gradient }}\r\n            onChange={(gradient) => props.onChange(new Color4Gradient(gradient.step, gradient.value1, gradient.value2))}\r\n        />\r\n    );\r\n};\r\n/**\r\n * Component wrapper for GradientBlockColorStep that provides color picker and step slider\r\n * @param props - Component props containing GradientBlockColorStep value and change handler\r\n * @returns A React component\r\n */\r\nexport const ColorStepGradientComponent: FunctionComponent<BaseComponentProps<GradientBlockColorStep>> = (props) => {\r\n    return (\r\n        <Color3GradientCast\r\n            {...props}\r\n            value={{ value1: props.value.color, step: props.value.step }}\r\n            onChange={(gradient) => props.onChange(new GradientBlockColorStep(gradient.step, gradient.value1))}\r\n        />\r\n    );\r\n};\r\n"]}

package/fluent/primitives/input.d.ts

@@ -1,14 +1,10 @@
 import type { FunctionComponent } from "react";
-import type { BaseComponentProps } from "../hoc/propertyLine.js";
+import type { BaseComponentProps } from "../hoc/propertyLines/propertyLine.js";
 export type InputProps<T extends string | number> = BaseComponentProps<T> & {
     step?: number;
     placeholder?: string;
     min?: number;
     max?: number;
 };
-/**
- * This is an input text box that stops propagation of change events and sets its width based on the type of input (text or number)
- * @param props
- * @returns
- */
-export declare const Input: FunctionComponent<InputProps<string | number>>;
+export declare const NumberInput: FunctionComponent<InputProps<number>>;
+export declare const TextInput: FunctionComponent<InputProps<string>>;