@yogiswara/honcho-editor-ui 2.8.10 → 2.9.1

package/dist/color.d.ts

@@ -0,0 +1,9 @@
+export declare const neutral: {
+    white: string;
+    10: string;
+    25: string;
+    50: string;
+    75: string;
+    100: string;
+    200: string;
+};

package/dist/color.js

@@ -0,0 +1,9 @@
+export const neutral = {
+    white: "#FFFFFF",
+    10: "#F9F9F9",
+    25: "#DBDBDB",
+    50: "#8D8D8D",
+    75: "#575757",
+    100: "#0A0A1C",
+    200: "#000000",
+};

package/dist/components/editor/GalleryAlbum/AlbumImageGallery.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { PhotoData } from "../../../hooks/editor/useHonchoEditorBulk";
+interface ImageGalleryProps {
+    imageCollection: PhotoData[];
+    onToggleSelect: (photo: PhotoData) => void;
+}
+export declare const AlbumImageGallery: React.FC<ImageGalleryProps>;
+export {};

package/dist/components/editor/GalleryAlbum/AlbumImageGallery.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Stack } from "@mui/material";
+import Masonry, { ResponsiveMasonry } from "react-responsive-masonry";
+import GalleryImageItem from "./ImageItem";
+export const AlbumImageGallery = (props) => {
+    const { imageCollection, onToggleSelect } = props;
+    return (_jsx(Stack, { sx: { width: '100%', maxHeight: '100%', overflowY: 'auto' }, children: _jsx(ResponsiveMasonry, { columnsCountBreakPoints: { 750: 2, 900: 4 }, children: _jsx(Masonry, { children: imageCollection.map((photo, index) => {
+                    // This guard clause is still important for runtime safety.
+                    if (!photo.key || !photo.src) {
+                        console.warn("Skipping item without a key or src:", photo);
+                        return null;
+                    }
+                    // NEW: Create a new object that matches the 'PhotoProps' interface.
+                    // This explicitly tells TypeScript that all required fields are present.
+                    const imageItemPhotoProps = {
+                        key: photo.key,
+                        src: photo.src,
+                        width: photo.width,
+                        height: photo.height,
+                        alt: photo.alt,
+                        // We pass the original photo object in the generic 'photo' property
+                        // in case ImageItem needs it for other operations.
+                        photo: photo,
+                    };
+                    return (_jsx(Box, { sx: { m: 0.5 }, children: _jsx(GalleryImageItem, { margin: "0px", index: index, direction: "column", onToggleSelect: () => { onToggleSelect(photo); }, data: photo }) }, photo.key));
+                }) }) }) }));
+};

package/dist/components/editor/GalleryAlbum/ImageItem.d.ts

@@ -0,0 +1,10 @@
+import { PhotoData } from "../../../hooks/editor/useHonchoEditorBulk";
+interface Props {
+    margin?: any;
+    index: number;
+    data: PhotoData;
+    direction: "row" | "column";
+    onToggleSelect: () => void;
+}
+declare const GalleryImageItem: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default GalleryImageItem;

package/dist/components/editor/GalleryAlbum/ImageItem.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Box, CardMedia, useTheme } from "@mui/material";
+import { neutral } from "../../../color";
+const initialAdjustments = {
+    temperature: 0, tint: 0, saturation: 0, vibrance: 0, exposure: 0, contrast: 0,
+    highlights: 0, shadows: 0, whites: 0, blacks: 0, clarity: 0, sharpness: 0,
+};
+const imgStyle = {
+    transition: "transform .135s cubic-bezier(0.0,0.0,0.2,1),opacity linear .15s",
+    width: "100%",
+    // objectFit: "contain",
+    //height: "100%",
+};
+const selectedImgStyle = {
+    borderRadius: "8px",
+    transform: "translateZ(0px) scale3d(1, 1, 1)",
+    // transition: "transform .135s cubic-bezier(0.0,0.0,0.2,1),opacity linear .15s"
+};
+const GalleryImageItem = (props) => {
+    const { margin, data } = props;
+    const theme = useTheme();
+    const imageData = data;
+    const commonStyle = useMemo(() => {
+        return {
+            backgroundColor: neutral.white,
+            overflow: "hidden",
+            position: "relative",
+            width: "100%",
+            aspectRatio: `${imageData.width}/${imageData.height}`,
+        };
+    }, [props.direction, imageData]);
+    const imageSx = useMemo(() => {
+        const baseStyles = imageData.isSelected ? {
+            ...imgStyle,
+            ...selectedImgStyle,
+            aspectRatio: `${imageData.width}/${imageData.height}`,
+        } : {
+            ...imgStyle,
+        };
+        return {
+            ...baseStyles,
+            opacity: 1, // Previously depended on isProcessingComplete
+            transition: 'opacity 0.3s ease-in-out',
+        };
+    }, [props.data.isSelected, imageData.width, imageData.height]);
+    const boxNotSelected = useMemo(() => ({
+        margin,
+        // height: photo.height,
+        ...commonStyle,
+        transition: ".3s",
+        // "&:hover": { padding: "12px", backgroundColor: "primary.light1" },
+        "&:-webkit-transition": { transition: ".3s" },
+        "&:hover > .checkbox": { display: "block" },
+        cursor: "pointer",
+        backgroundColor: "transparent",
+    }), [margin, commonStyle]);
+    const boxSelected = useMemo(() => ({
+        margin,
+        // height: photo.height,
+        ...commonStyle,
+        cursor: "pointer",
+        transition: ".3s",
+        "&:-webkit-transition": { transition: ".3s" },
+        padding: { xs: "13px 12px", sm: "21.31px 25.56px 21.32px 27.68px" },
+    }), [
+        margin,
+        commonStyle,
+        theme.palette.light,
+    ]);
+    const boxOuterSx = useMemo(() => {
+        if (props.data.isSelected) {
+            return { ...boxSelected };
+        }
+        else {
+            return { ...boxNotSelected };
+        }
+    }, [imageData.height, imageData.width, commonStyle, boxSelected, boxNotSelected, margin]);
+    return (_jsx(Box, { id: "Box_image", sx: boxOuterSx, className: "image", children: _jsx(CardMedia, { id: "card_media", component: "img", className: "image", loading: "lazy", alt: imageData.alt ?? "Image", sx: imageSx, src: imageData.src, width: "100%", onClick: props.onToggleSelect }) }, imageData.key));
+};
+export default GalleryImageItem;

package/dist/components/editor/HAccordionAspectRatio.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    activeRatio: string;
+    activeSquareRatio: string;
+    activeWideRatio: string;
+    angelChange: number;
+    widthPX: number;
+    heightPX: number;
+    onRatioSelect: (ratio: string) => void;
+    onAngleChange: (angle: number) => void;
+    onWidthChange: (value: number) => void;
+    onHeightChange: (value: number) => void;
+}
+export default function HAccordionAspectRatio(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/editor/HAccordionAspectRatio.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { Accordion, AccordionDetails, AccordionSummary, Button, Stack, Slider, Typography, CardMedia, IconButton, TextField } from "@mui/material";
+import useHonchoTypography from "../../themes/honchoTheme";
+import useColors from '../../themes/colors';
+export default function HAccordionAspectRatio(props) {
+    const typography = useHonchoTypography();
+    const colors = useColors();
+    const [isCustomExpanded, setIsCustomExpanded] = useState(false);
+    const handleCustomAccordionChange = (event, isExpanded) => {
+        setIsCustomExpanded(isExpanded);
+        if (isExpanded) {
+            props.onRatioSelect('original');
+        }
+    };
+    const handleAngleSliderChange = (_event, newValue) => {
+        props.onAngleChange(newValue);
+    };
+    const textFieldSx = {
+        width: "80px",
+        padding: "4px",
+        borderRadius: "4px",
+        alignItems: "center",
+        border: `1px solid ${colors.outlineVariant}`,
+        textAlign: "center",
+        '& .MuiFilledInput-root': {
+            backgroundColor: 'transparent',
+            border: 'none',
+            '&:before': {
+                borderBottom: 'none',
+            },
+            '&:after': {
+                borderBottom: 'none',
+            },
+            '&:hover:not(.Mui-disabled):before': {
+                borderBottom: 'none',
+            },
+            '&.Mui-focused:after': {
+                borderBottom: 'none',
+            },
+        },
+        '& .MuiFilledInput-input': {
+            textAlign: 'center',
+            padding: 0,
+            color: colors.surface,
+        }
+    };
+    const customAccordionStyle = {
+        backgroundColor: 'transparent',
+        boxShadow: 'none',
+        margin: '0px',
+        '&.MuiAccordion-root:before': {
+            display: 'none',
+        },
+        '& .MuiAccordionSummary-root': {
+            minHeight: '22px',
+            padding: '0px',
+            '& .MuiAccordionSummary-content': {
+                margin: '0px',
+                justifyContent: 'flex-start',
+            },
+        },
+        '& .MuiAccordionDetails-root': {
+            padding: '8px 0px 0px 0px',
+        },
+        '&.MuiAccordion-root.Mui-expanded': {
+            margin: '0px',
+        },
+    };
+    return (_jsx(_Fragment, { children: _jsxs(Stack, { direction: "column", spacing: 2, sx: { p: 2, color: colors.surface }, children: [_jsxs(Stack, { direction: "row", spacing: 2, justifyContent: "start", alignItems: "center", children: [_jsx(IconButton, { "aria-label": "potrait", onClick: () => props.onRatioSelect('potrait'), children: _jsx(CardMedia, { component: "img", image: props.activeRatio === 'potrait' ? "/v1/svg/aspect-ratio-potrait-activate-editor.svg" : "/v1/svg/aspect-ratio-potrait-inactive-editor.svg", sx: { width: "14px", height: "20px" } }) }), _jsx(IconButton, { "aria-label": "wide", onClick: () => props.onRatioSelect('wide'), children: _jsx(CardMedia, { component: "img", image: props.activeRatio === 'wide' ? "/v1/svg/aspect-ratio-potrait-activate-editor.svg" : "/v1/svg/aspect-ratio-potrait-inactive-editor.svg", sx: { width: "14px", height: "20px", rotate: "-90deg" } }) })] }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [_jsx(IconButton, { onClick: () => props.onRatioSelect('original'), sx: { justifyContent: 'flex-start', color: props.activeSquareRatio === 'original' ? colors.surface : colors.onSurfaceVariant1, ...typography.bodyMedium }, children: "Original" }), _jsx(CardMedia, { component: "img", image: "v1/svg/check-ratio-editor.svg", sx: { width: "20px", height: "20px" } })] }), _jsx(Button, { onClick: () => props.onRatioSelect('freeform'), sx: { justifyContent: 'flex-start', color: props.activeSquareRatio === 'freeform' ? colors.surface : colors.onSurfaceVariant1, ...typography.bodyMedium }, children: "Freeform" }), _jsxs(Accordion, { expanded: isCustomExpanded, onChange: handleCustomAccordionChange, sx: customAccordionStyle, children: [_jsx(AccordionSummary, { children: _jsx(Typography, { sx: {
+                                    ...typography.bodyMedium,
+                                    color: props.activeSquareRatio === 'custom' ? colors.surface : colors.onSurfaceVariant1,
+                                    width: '100%',
+                                    cursor: 'pointer',
+                                    paddingLeft: '8px'
+                                }, children: "Custom" }) }), _jsx(AccordionDetails, { children: _jsx(Stack, { direction: "row", spacing: 4, justifyContent: "center", alignItems: "center", sx: { paddingLeft: '16px' }, children: _jsxs(Stack, { direction: "row", spacing: 2, justifyContent: "center", alignItems: "center", children: [_jsx(Stack, { direction: "column", spacing: 0.5, children: _jsx(TextField, { hiddenLabel: true, placeholder: "Width", id: "width-px-input", value: props.widthPX === 0 ? '' : props.widthPX, variant: "filled", onChange: (e) => props.onWidthChange(Number(e.target.value)), sx: textFieldSx }) }), _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: " : " }), _jsx(Stack, { direction: "column", spacing: 0.5, children: _jsx(TextField, { hiddenLabel: true, placeholder: "Height", id: "height-px-input", value: props.heightPX === 0 ? '' : props.heightPX, variant: "filled", onChange: (e) => props.onHeightChange(Number(e.target.value)), sx: textFieldSx }) })] }) }) })] }), _jsx(Button, { onClick: () => props.onRatioSelect('1:1'), sx: { justifyContent: 'flex-start', color: props.activeWideRatio === '1:1' ? colors.surface : colors.onSurfaceVariant1, ...typography.bodyMedium }, children: "1:1" }), _jsx(Button, { onClick: () => props.onRatioSelect(props.activeRatio === 'wide' ? '3:2' : '2:3'), sx: { justifyContent: 'flex-start', color: props.activeWideRatio === (props.activeRatio === 'wide' ? '3:2' : '2:3') ? colors.surface : colors.onSurfaceVariant1, ...typography.bodyMedium }, children: props.activeRatio === 'wide' ? '3:2' : '2:3' }), _jsx(Button, { onClick: () => props.onRatioSelect(props.activeRatio === 'wide' ? '16:9' : '9:16'), sx: { justifyContent: 'flex-start', color: props.activeWideRatio === (props.activeRatio === 'wide' ? '16:9' : '9:16') ? colors.surface : colors.onSurfaceVariant1, ...typography.bodyMedium }, children: props.activeRatio === 'wide' ? '16:9' : '9:16' }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { sx: { ...typography.bodyMedium }, children: "Angel:" }), _jsx(TextField, { hiddenLabel: true, id: "filled-hidden-label-small", value: props.angelChange, variant: "filled", onChange: (e) => props.onAngleChange(Number(e.target.value)), sx: {
+                                width: "40px",
+                                alignItems: "center",
+                                textAlign: "center",
+                                '& .MuiFilledInput-root': {
+                                    backgroundColor: 'transparent',
+                                    border: 'none',
+                                    '&:before': {
+                                        borderBottom: 'none',
+                                    },
+                                    '&:after': {
+                                        borderBottom: 'none',
+                                    },
+                                    '&:hover:not(.Mui-disabled):before': {
+                                        borderBottom: 'none',
+                                    },
+                                    '&.Mui-focused:after': {
+                                        borderBottom: 'none',
+                                    },
+                                },
+                                '& .MuiFilledInput-input': {
+                                    textAlign: 'center',
+                                    padding: 0,
+                                    color: colors.surface,
+                                }
+                            } })] }), _jsx(Slider, { sx: { width: "200px", color: colors.surface }, size: "small", value: props.angelChange, step: 1, min: -360, max: 360, onChange: handleAngleSliderChange })] }) }));
+}

package/dist/components/editor/HAccordionColor.d.ts

@@ -0,0 +1,16 @@
+import { AdjustmentState } from '../../hooks/editor/type';
+interface Props {
+    TempScore: number;
+    TintScore: number;
+    SaturationScore: number;
+    VibranceScore: number;
+    isBatchMode: boolean;
+    onTempChange: (field: keyof AdjustmentState, value: number) => void;
+    onTintChange: (field: keyof AdjustmentState, value: number) => void;
+    onSaturationChange: (field: keyof AdjustmentState, value: number) => void;
+    onVibranceChange: (field: keyof AdjustmentState, value: number) => void;
+    onDragStart: () => void;
+    onDragEnd: () => void;
+}
+export default function HAccordionColor(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/editor/HAccordionColor.js

@@ -0,0 +1,282 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Stack, Slider, Typography, TextField } from "@mui/material";
+import useHonchoTypography from "../../themes/honchoTheme";
+import useColors from '../../themes/colors';
+export default function HAccordionColor(props) {
+    const typography = useHonchoTypography();
+    const colors = useColors();
+    const blueScale = '#292bc0'; // Blue color on left
+    const yellowScale = '#dfdc28'; // Yellow color on right
+    const greenScale = '#00ff04';
+    const purpleScale = '#b700ff';
+    // The gradient for the *entire* background of the slider bar
+    const tempGradient = `linear-gradient(to right, ${blueScale} 35%, ${yellowScale} 75%)`;
+    const tintGradient = `linear-gradient(to right, ${greenScale} 20%, ${purpleScale} 75%)`;
+    const spectrumColorsSaturation = ['yellow', 'lime', 'deepskyblue', 'magenta', 'red'];
+    const greyScaleStart = '#000000'; // Black at -100
+    const greyScaleEnd = '#ffffff'; // White at 0 (or a very light grey)
+    const colorStops = spectrumColorsSaturation.map((color, index) => {
+        const position = 50 + (index / (spectrumColorsSaturation.length - 1)) * 50;
+        return `${color} ${position}%`;
+    }).join(', ');
+    // The gradient for the *entire* background of the slider bar
+    const fullTrackGradient = `linear-gradient(to right, ${greyScaleStart} 0%, ${greyScaleEnd} 50%, ${colorStops})`;
+    const focusedInputStyle = {
+        backgroundColor: "#1C1B1FB2",
+        borderRadius: '5px 5px 0px 0px',
+        borderBottom: 'none',
+        pl: '2px',
+    };
+    const formatValue = (value) => {
+        if (value > 0)
+            return `+${value}`;
+        return value.toString();
+    };
+    const handleInputChange = (event, min, max, onChange) => {
+        const value = event.target.value;
+        if (value === '+' || value === '-')
+            return;
+        let numericValue = parseInt(value, 10);
+        if (isNaN(numericValue))
+            numericValue = 0;
+        const clampedValue = Math.max(min, Math.min(max, numericValue));
+        onChange(clampedValue);
+    };
+    return (_jsx(_Fragment, { children: _jsxs(Stack, { children: [_jsxs(Stack, { direction: "column", gap: "4px", sx: { pt: '6px', pb: '2px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "temperature-input", onDoubleClick: () => props.onTempChange("tempScore", 0), sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Temperature" }), _jsx(TextField, { hiddenLabel: true, id: "temperature-input", value: formatValue(props.TempScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onTempChange("tempScore", val)), className: "control-label", sx: {
+                                        width: "40px",
+                                        height: "10px",
+                                        alignItems: "center",
+                                        textAlign: "right",
+                                        display: "flex",
+                                        '& .MuiFilledInput-root': {
+                                            backgroundColor: 'transparent',
+                                            borderRadius: "0px",
+                                            border: 'none',
+                                            '&:before': {
+                                                borderBottom: 'none',
+                                            },
+                                            '&:after': {
+                                                borderBottom: 'none',
+                                            },
+                                            '&:hover:not(.Mui-disabled):before': {
+                                                borderBottom: 'none',
+                                            },
+                                            '&.Mui-focused:after': {
+                                                borderBottom: 'none',
+                                            },
+                                        },
+                                        '& .MuiFilledInput-input': {
+                                            textAlign: 'right',
+                                            padding: 0,
+                                            pr: '4px',
+                                            color: colors.surface,
+                                            fontSize: "14px",
+                                        },
+                                    } })] }), _jsx(Slider, { sx: {
+                                width: "200px",
+                                color: colors.surface,
+                                '& .MuiSlider-rail': {
+                                    background: tempGradient,
+                                    opacity: 1,
+                                },
+                                '& .MuiSlider-track': {
+                                    background: 'transparent',
+                                    border: 'none',
+                                },
+                                '& .MuiSlider-thumb': {
+                                    boxShadow: 'none',
+                                },
+                                '& .MuiSlider-thumb:hover': {
+                                    boxShadow: 'none',
+                                },
+                            }, size: "small", value: props.TempScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onTempChange("tempScore", newValue), onDoubleClick: () => props.onTempChange("tempScore", 0), onMouseDown: () => {
+                                if (!props.isBatchMode) {
+                                    props.onDragStart();
+                                }
+                            }, onMouseUp: () => {
+                                props.onDragEnd();
+                            }, onTouchStart: () => {
+                                if (!props.isBatchMode) {
+                                    props.onDragStart();
+                                }
+                            }, onTouchEnd: () => {
+                                props.onDragEnd();
+                            } })] }), _jsxs(Stack, { direction: "column", gap: "3px", sx: { pt: '10px', pb: '0px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "tint-input", onDoubleClick: () => props.onTintChange("tintScore", 0), sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Tint" }), _jsx(TextField, { hiddenLabel: true, id: "tint-input", value: formatValue(props.TintScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onTintChange("tintScore", val)), sx: {
+                                        width: "40px",
+                                        height: "10px",
+                                        alignItems: "center",
+                                        textAlign: "right",
+                                        display: "flex",
+                                        '& .MuiFilledInput-root': {
+                                            backgroundColor: 'transparent',
+                                            borderRadius: "0px",
+                                            border: 'none',
+                                            '&:before': {
+                                                borderBottom: 'none',
+                                            },
+                                            '&:after': {
+                                                borderBottom: 'none',
+                                            },
+                                            '&:hover:not(.Mui-disabled):before': {
+                                                borderBottom: 'none',
+                                            },
+                                            '&.Mui-focused:after': {
+                                                borderBottom: 'none',
+                                            },
+                                        },
+                                        '& .MuiFilledInput-input': {
+                                            textAlign: 'right',
+                                            padding: 0,
+                                            pr: '4px',
+                                            color: colors.surface,
+                                            fontSize: "14px",
+                                        },
+                                    } })] }), _jsx(Slider, { sx: {
+                                width: "200px",
+                                color: colors.surface,
+                                '& .MuiSlider-rail': {
+                                    background: tintGradient,
+                                    opacity: 1,
+                                },
+                                '& .MuiSlider-track': {
+                                    background: 'transparent',
+                                    border: 'none',
+                                },
+                                '& .MuiSlider-thumb': {
+                                    boxShadow: 'none',
+                                },
+                                '& .MuiSlider-thumb:hover': {
+                                    boxShadow: 'none',
+                                },
+                            }, size: "small", value: props.TintScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onTintChange("tintScore", newValue), onDoubleClick: () => props.onTintChange("tintScore", 0), onMouseDown: () => {
+                                if (!props.isBatchMode) {
+                                    props.onDragStart();
+                                }
+                            }, onMouseUp: () => {
+                                props.onDragEnd();
+                            }, onTouchStart: () => {
+                                if (!props.isBatchMode) {
+                                    props.onDragStart();
+                                }
+                            }, onTouchEnd: () => {
+                                props.onDragEnd();
+                            } })] }), _jsxs(Stack, { direction: "column", gap: "3px", sx: { pt: '10px', pb: '0px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "vibrance-input", onDoubleClick: () => props.onVibranceChange("vibranceScore", 0), sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Vibrance" }), _jsx(TextField, { hiddenLabel: true, id: "vibrance-input", value: formatValue(props.VibranceScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onVibranceChange("vibranceScore", val)), sx: {
+                                        width: "40px",
+                                        height: "10px",
+                                        alignItems: "center",
+                                        textAlign: "right",
+                                        display: "flex",
+                                        '& .MuiFilledInput-root': {
+                                            backgroundColor: 'transparent',
+                                            borderRadius: "0px",
+                                            border: 'none',
+                                            '&:before': {
+                                                borderBottom: 'none',
+                                            },
+                                            '&:after': {
+                                                borderBottom: 'none',
+                                            },
+                                            '&:hover:not(.Mui-disabled):before': {
+                                                borderBottom: 'none',
+                                            },
+                                            '&.Mui-focused:after': {
+                                                borderBottom: 'none',
+                                            },
+                                        },
+                                        '& .MuiFilledInput-input': {
+                                            textAlign: 'right',
+                                            padding: 0,
+                                            pr: '4px',
+                                            color: colors.surface,
+                                            fontSize: "14px",
+                                        },
+                                    } })] }), _jsx(Slider, { sx: {
+                                width: "200px",
+                                color: colors.surface,
+                                '& .MuiSlider-rail': {
+                                    background: fullTrackGradient,
+                                    opacity: 1,
+                                },
+                                '& .MuiSlider-track': {
+                                    background: 'transparent',
+                                    border: 'none',
+                                },
+                                '& .MuiSlider-thumb': {
+                                    boxShadow: 'none',
+                                },
+                                '& .MuiSlider-thumb:hover': {
+                                    boxShadow: 'none',
+                                },
+                            }, size: "small", value: props.VibranceScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onVibranceChange("vibranceScore", newValue), onDoubleClick: () => props.onVibranceChange("vibranceScore", 0), onMouseDown: () => {
+                                if (!props.isBatchMode) {
+                                    props.onDragStart();
+                                }
+                            }, onMouseUp: () => {
+                                props.onDragEnd();
+                            }, onTouchStart: () => {
+                                if (!props.isBatchMode) {
+                                    props.onDragStart();
+                                }
+                            }, onTouchEnd: () => {
+                                props.onDragEnd();
+                            } })] }), _jsxs(Stack, { direction: "column", gap: "3px", sx: { pt: '10px', pb: '0px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "saturation-input", onDoubleClick: () => props.onSaturationChange("saturationScore", 0), sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Saturation" }), _jsx(TextField, { hiddenLabel: true, id: "saturation-input", value: formatValue(props.SaturationScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onSaturationChange("saturationScore", val)), sx: {
+                                        width: "40px",
+                                        height: "10px",
+                                        alignItems: "center",
+                                        textAlign: "right",
+                                        display: "flex",
+                                        '& .MuiFilledInput-root': {
+                                            backgroundColor: 'transparent',
+                                            borderRadius: "0px",
+                                            border: 'none',
+                                            '&:before': {
+                                                borderBottom: 'none',
+                                            },
+                                            '&:after': {
+                                                borderBottom: 'none',
+                                            },
+                                            '&:hover:not(.Mui-disabled):before': {
+                                                borderBottom: 'none',
+                                            },
+                                            '&.Mui-focused:after': {
+                                                borderBottom: 'none',
+                                            },
+                                        },
+                                        '& .MuiFilledInput-input': {
+                                            textAlign: 'right',
+                                            padding: 0,
+                                            pr: '4px',
+                                            color: colors.surface,
+                                            fontSize: "14px",
+                                        },
+                                    } })] }), _jsx(Slider, { sx: {
+                                width: "200px",
+                                color: colors.surface,
+                                '& .MuiSlider-rail': {
+                                    background: fullTrackGradient,
+                                    opacity: 1,
+                                },
+                                '& .MuiSlider-track': {
+                                    background: 'transparent',
+                                    border: 'none',
+                                },
+                                '& .': {
+                                    boxShadow: 'none',
+                                },
+                                '& .MuiSlider-thumb:hover': {
+                                    boxShadow: 'none',
+                                },
+                            }, size: "small", value: props.SaturationScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onSaturationChange("saturationScore", newValue), onDoubleClick: () => props.onSaturationChange("saturationScore", 0), onMouseDown: () => {
+                                if (!props.isBatchMode) {
+                                    props.onDragStart();
+                                }
+                            }, onMouseUp: () => {
+                                props.onDragEnd();
+                            }, onTouchStart: () => {
+                                if (!props.isBatchMode) {
+                                    props.onDragStart();
+                                }
+                            }, onTouchEnd: () => {
+                                props.onDragEnd();
+                            } })] })] }) }));
+}

package/dist/components/editor/HAccordionColorAdjustment.d.ts

@@ -0,0 +1,35 @@
+import React from "react";
+import { AdjustmentState } from '../../hooks/editor/type';
+interface Props {
+    tempScore: number;
+    tintScore: number;
+    vibranceScore: number;
+    saturationScore: number;
+    exposureScore: number;
+    HighlightsScore: number;
+    shadowsScore: number;
+    whitesScore: number;
+    blacksScore: number;
+    contrastScore: number;
+    clarityScore: number;
+    sharpnessScore: number;
+    expandedPanels: string[];
+    setTempScore: (field: keyof AdjustmentState, value: number) => void;
+    setTintScore: (field: keyof AdjustmentState, value: number) => void;
+    setExposureScore: (field: keyof AdjustmentState, value: number) => void;
+    setVibranceScore: (field: keyof AdjustmentState, value: number) => void;
+    setSaturationScore: (field: keyof AdjustmentState, value: number) => void;
+    setHighlightsScore: (field: keyof AdjustmentState, value: number) => void;
+    setShadowsScore: (field: keyof AdjustmentState, value: number) => void;
+    setWhitesScore: (field: keyof AdjustmentState, value: number) => void;
+    setBlacksScore: (field: keyof AdjustmentState, value: number) => void;
+    setContrastScore: (field: keyof AdjustmentState, value: number) => void;
+    setClarityScore: (field: keyof AdjustmentState, value: number) => void;
+    setSharpnessScore: (field: keyof AdjustmentState, value: number) => void;
+    onPanelChange: (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => void;
+    isBatchMode: boolean;
+    onDragStart: () => void;
+    onDragEnd: () => void;
+}
+export default function HAccordionColorAdjustment(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};