@yogiswara/honcho-editor-ui 2.7.12 → 2.7.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yogiswara/honcho-editor-ui",
-  "version": "2.7.12",
+  "version": "2.7.14",
   "description": "A complete UI component library for the Honcho photo editor.",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/dist/color.d.ts

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

package/dist/color.js

@@ -1,9 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,28 +0,0 @@
-"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

@@ -1,10 +0,0 @@
-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

@@ -1,81 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,102 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,282 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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 {};