@yogiswara/honcho-editor-ui 2.7.12 → 2.7.14

package/dist/components/editor/HAccordionColorAdjustment.js

@@ -1,31 +0,0 @@
-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 HAccordionColor from "./HAccordionColor";
-import HAccordionLight from "./HAccordionLight";
-import HAccordionDetails from "./HAccordionDetails";
-import useHonchoTypography from "../../themes/honchoTheme";
-import useColors from '../../themes/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, isBatchMode: props.isBatchMode, onDragStart: props.onDragStart, onDragEnd: props.onDragEnd }) })] }), _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, isBatchMode: props.isBatchMode, onDragStart: props.onDragStart, onDragEnd: props.onDragEnd }) })] }), _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, { ClarityScore: props.clarityScore, SharpnessScore: props.sharpnessScore, onClarityChange: props.setClarityScore, onSharpnessChange: props.setSharpnessScore, isBatchMode: props.isBatchMode, onDragStart: props.onDragStart, onDragEnd: props.onDragEnd }) })] })] }) }));
-}

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

@@ -1,12 +0,0 @@
-import { AdjustmentState } from '../../hooks/editor/type';
-interface Props {
-    ClarityScore: number;
-    SharpnessScore: number;
-    onClarityChange: (field: keyof AdjustmentState, value: number) => void;
-    onSharpnessChange: (field: keyof AdjustmentState, value: number) => void;
-    onDragStart: () => void;
-    onDragEnd: () => void;
-    isBatchMode: boolean;
-}
-export default function HAccordionDetails(props: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/editor/HAccordionDetails.js

@@ -1,157 +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 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", 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, (val) => props.onClarityChange("clarityScore", val)), 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("clarityScore", newValue), onDoubleClick: () => props.onClarityChange("clarityScore", 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: "sharpness-input", 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, (val) => props.onSharpnessChange("sharpnessScore", 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",
-                                        },
-                                        '& .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("sharpnessScore", newValue), onDoubleClick: () => props.onSharpnessChange("sharpnessScore", 0), onMouseDown: () => {
-                                if (!props.isBatchMode) {
-                                    props.onDragStart();
-                                }
-                            }, onMouseUp: () => {
-                                props.onDragEnd();
-                            }, onTouchStart: () => {
-                                if (!props.isBatchMode) {
-                                    props.onDragStart();
-                                }
-                            }, onTouchEnd: () => {
-                                props.onDragEnd();
-                            } })] })] }) }));
-}

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

@@ -1,20 +0,0 @@
-import { AdjustmentState } from '../../hooks/editor/type';
-interface Props {
-    ExposureScore: number;
-    ContrastScore: number;
-    HighlightsScore: number;
-    ShadowsScore: number;
-    WhitesScore: number;
-    BlacksScore: number;
-    isBatchMode: boolean;
-    onExposureChange: (field: keyof AdjustmentState, value: number) => void;
-    onContrastChange: (field: keyof AdjustmentState, value: number) => void;
-    onHighlightsChange: (field: keyof AdjustmentState, value: number) => void;
-    onShadowsChange: (field: keyof AdjustmentState, value: number) => void;
-    onWhitesChange: (field: keyof AdjustmentState, value: number) => void;
-    onBlacksChange: (field: keyof AdjustmentState, value: number) => void;
-    onDragStart: () => void;
-    onDragEnd: () => void;
-}
-export default function HAccordionLight(props: Props): import("react/jsx-runtime").JSX.Element;
-export {};