@yogiswara/honcho-editor-ui 1.0.0

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 "@/honchoTheme";
+import useColors from "@/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,12 @@
+interface Props {
+    TempScore: number;
+    TintScore: number;
+    SaturationScore: number;
+    VibranceScore: number;
+    onTempChange: (value: number) => void;
+    onTintChange: (value: number) => void;
+    onSaturationChange: (value: number) => void;
+    onVibranceChange: (value: number) => void;
+}
+export default function HAccordionColor(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/editor/HAccordionColor.js

@@ -0,0 +1,234 @@
+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 "@/honchoTheme";
+import useColors from "@/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(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, props.onTempChange), 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(newValue), onDoubleClick: () => props.onTempChange(0) })] }), _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(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, props.onTintChange), 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(newValue), onDoubleClick: () => props.onTintChange(0) })] }), _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(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, props.onVibranceChange), 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(newValue), onDoubleClick: () => props.onVibranceChange(0) })] }), _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(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, props.onSaturationChange), 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(newValue), onDoubleClick: () => props.onSaturationChange(0) })] })] }) }));
+}

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

@@ -0,0 +1,31 @@
+import React from "react";
+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: (value: number) => void;
+    setTintScore: (value: number) => void;
+    setExposureScore: (value: number) => void;
+    setVibranceScore: (value: number) => void;
+    setSaturationScore: (value: number) => void;
+    setHighlightsScore: (value: number) => void;
+    setShadowsScore: (value: number) => void;
+    setWhitesScore: (value: number) => void;
+    setBlacksScore: (value: number) => void;
+    setContrastScore: (value: number) => void;
+    setClarityScore: (value: number) => void;
+    setSharpnessScore: (value: number) => void;
+    onPanelChange: (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => void;
+}
+export default function HAccordionColorAdjustment(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/editor/HAccordionColorAdjustment.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Accordion, AccordionDetails, AccordionSummary, CardMedia, Stack, Typography } from "@mui/material";
+import useHonchoTypography from "@/honchoTheme";
+import HAccordionColor from "./HAccordionColor";
+import HAccordionLight from "./HAccordionLight";
+import HAccordionDetails from "./HAccordionDetails";
+import useColors from "@/colors";
+export default function HAccordionColorAdjustment(props) {
+    const typography = useHonchoTypography();
+    const colors = useColors();
+    const accordionStyle = {
+        backgroundColor: colors.onBackground,
+        color: colors.surface,
+        '& .MuiAccordionSummary-root': {
+            backgroundColor: colors.onBackground,
+            color: colors.surface,
+        },
+        '& .MuiAccordionDetails-root': {
+            backgroundColor: colors.onBackground,
+            color: colors.surface,
+        },
+        '& .MuiTypography-root': {
+            color: colors.surface,
+        },
+        '& .MuiSvgIcon-root': {
+            color: colors.surface,
+        }
+    };
+    const isPanelExpanded = (panelName) => props.expandedPanels.includes(panelName);
+    return (_jsx(_Fragment, { children: _jsxs(Stack, { direction: "column", sx: { accordionStyle }, children: [_jsxs(Accordion, { sx: accordionStyle, expanded: isPanelExpanded('whiteBalance'), onChange: props.onPanelChange('whiteBalance'), disableGutters: true, children: [_jsx(AccordionSummary, { sx: { pr: 0 }, children: _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { width: '100%' }, children: [_jsx(Typography, { sx: { ...typography.titleMedium }, children: "Color" }), _jsx(CardMedia, { component: "img", image: isPanelExpanded('whiteBalance') ? "/v1/svg/expanded-editor.svg" : "/v1/svg/expand-editor.svg", sx: { width: "11.67px", height: "5.83px" } })] }) }), _jsx(AccordionDetails, { sx: { pr: "4px" }, children: _jsx(HAccordionColor, { TempScore: props.tempScore, TintScore: props.tintScore, VibranceScore: props.vibranceScore, SaturationScore: props.saturationScore, onTempChange: props.setTempScore, onTintChange: props.setTintScore, onVibranceChange: props.setVibranceScore, onSaturationChange: props.setSaturationScore }) })] }), _jsxs(Accordion, { sx: accordionStyle, expanded: isPanelExpanded('light'), onChange: props.onPanelChange('light'), disableGutters: true, children: [_jsx(AccordionSummary, { sx: { pr: 0 }, children: _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { width: '100%' }, children: [_jsx(Typography, { sx: { ...typography.titleMedium }, children: "Light" }), _jsx(CardMedia, { component: "img", image: isPanelExpanded('light') ? "/v1/svg/expanded-editor.svg" : "/v1/svg/expand-editor.svg", sx: { width: "11.67px", height: "5.83px" } })] }) }), _jsx(AccordionDetails, { sx: { pr: "4px" }, children: _jsx(HAccordionLight, { ExposureScore: props.exposureScore, ContrastScore: props.contrastScore, HighlightsScore: props.HighlightsScore, ShadowsScore: props.shadowsScore, WhitesScore: props.whitesScore, BlacksScore: props.blacksScore, onExposureChange: props.setExposureScore, onContrastChange: props.setContrastScore, onHighlightsChange: props.setHighlightsScore, onShadowsChange: props.setShadowsScore, onWhitesChange: props.setWhitesScore, onBlacksChange: props.setBlacksScore }) })] }), _jsxs(Accordion, { sx: accordionStyle, expanded: isPanelExpanded('details'), onChange: props.onPanelChange('details'), disableGutters: true, children: [_jsx(AccordionSummary, { sx: { pr: 0 }, children: _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { width: '100%' }, children: [_jsx(Typography, { sx: { ...typography.titleMedium }, children: "Details" }), _jsx(CardMedia, { component: "img", image: isPanelExpanded('details') ? "/v1/svg/expanded-editor.svg" : "/v1/svg/expand-editor.svg", sx: { width: "11.67px", height: "5.83px" } })] }) }), _jsx(AccordionDetails, { sx: { pr: "4px" }, children: _jsx(HAccordionDetails
+                            // ContrastScore = {props.contrastScore}
+                            , { 
+                                // ContrastScore = {props.contrastScore}
+                                ClarityScore: props.clarityScore, SharpnessScore: props.sharpnessScore, 
+                                // onContrastChange={props.setContrastScore}
+                                onClarityChange: props.setClarityScore, onSharpnessChange: props.setSharpnessScore }) })] })] }) }));
+}

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

@@ -0,0 +1,8 @@
+interface Props {
+    ClarityScore: number;
+    SharpnessScore: number;
+    onClarityChange: (value: number) => void;
+    onSharpnessChange: (value: number) => void;
+}
+export default function HAccordionDetails(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/editor/HAccordionDetails.js

@@ -0,0 +1,133 @@
+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 "@/honchoTheme";
+import useColors from "@/colors";
+export default function HAccordionDetails(props) {
+    const typography = useHonchoTypography();
+    const colors = useColors();
+    const formatValue = (value) => {
+        if (value > 0)
+            return `+${value}`;
+        return value.toString();
+    };
+    const focusedInputStyle = {
+        backgroundColor: "#1C1B1FB2",
+        borderRadius: '5px 5px 0px 0px',
+        borderBottom: 'none',
+        pl: '2px',
+    };
+    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: "clarity-input", onDoubleClick: () => props.onClarityChange(0), sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Clarity" }), _jsx(TextField, { hiddenLabel: true, id: "clarity-input", value: formatValue(props.ClarityScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onClarityChange), sx: {
+                                        width: "40px",
+                                        height: "10px",
+                                        alignItems: "center",
+                                        textAlign: "right",
+                                        display: "flex",
+                                        '& .MuiFilledInput-root': {
+                                            // backgroundColor: 'transparent',
+                                            // border: '',
+                                            '&: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",
+                                        },
+                                        '& .Mui-focused': {
+                                            '& .MuiFilledInput-input': {
+                                                backgroundColor: "#1C1B1FB2",
+                                                textAlign: 'right',
+                                                borderRadius: '5px 5px 0px 0px',
+                                                borderBottom: 'none',
+                                                // pr: '8px',
+                                                pl: '2px',
+                                            }
+                                        }
+                                    } })] }), _jsx(Slider, { sx: {
+                                width: "200px",
+                                color: colors.onSurfaceVariant,
+                                '& .MuiSlider-rail': {
+                                    background: colors.onSurfaceVariant,
+                                    opacity: 1,
+                                },
+                                '& .MuiSlider-thumb': {
+                                    background: colors.surface,
+                                    opacity: 1,
+                                    boxShadow: 'none',
+                                },
+                            }, size: "small", value: props.ClarityScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onClarityChange(newValue), onDoubleClick: () => props.onClarityChange(0) })] }), _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: "sharpness-input", onDoubleClick: () => props.onSharpnessChange(0), sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Sharpness" }), _jsx(TextField, { hiddenLabel: true, id: "sharpness-input", value: formatValue(props.SharpnessScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onSharpnessChange), 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",
+                                        },
+                                        '& .Mui-focused': {
+                                            '& .MuiFilledInput-input': {
+                                                backgroundColor: "#1C1B1FB2",
+                                                textAlign: 'right',
+                                                borderRadius: '5px 5px 0px 0px',
+                                                borderBottom: 'none',
+                                                // pr: '8px',
+                                                pl: '2px',
+                                            }
+                                        }
+                                    } })] }), _jsx(Slider, { sx: {
+                                width: "200px",
+                                color: colors.onSurfaceVariant,
+                                '& .MuiSlider-rail': {
+                                    background: colors.onSurfaceVariant,
+                                    opacity: 1,
+                                },
+                                '& .MuiSlider-thumb': {
+                                    background: colors.surface,
+                                    opacity: 1,
+                                    boxShadow: 'none',
+                                },
+                            }, size: "small", value: props.SharpnessScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onSharpnessChange(newValue), onDoubleClick: () => props.onSharpnessChange(0) })] })] }) }));
+}

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

@@ -0,0 +1,16 @@
+interface Props {
+    ExposureScore: number;
+    ContrastScore: number;
+    HighlightsScore: number;
+    ShadowsScore: number;
+    WhitesScore: number;
+    BlacksScore: number;
+    onContrastChange: (value: number) => void;
+    onExposureChange: (value: number) => void;
+    onHighlightsChange: (value: number) => void;
+    onShadowsChange: (value: number) => void;
+    onWhitesChange: (value: number) => void;
+    onBlacksChange: (value: number) => void;
+}
+export default function HAccordionLight(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};