@yogiswara/honcho-editor-ui 2.7.13 → 2.7.14

package/dist/components/editor/HDialogBox.js

@@ -1,51 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Dialog, DialogContent, IconButton, Stack, Typography, } from "@mui/material";
-import useHonchoTypography from "../../themes/honchoTheme";
-import useColors from '../../themes/colors';
-import { CloseOutlined } from "@mui/icons-material";
-export function HBaseDialog(props) {
-    const colors = useColors();
-    const typography = useHonchoTypography();
-    return (_jsxs(Dialog, { disableScrollLock: true, open: props.open, onClose: props.onClose, "aria-labelledby": "responsive-dialog-title", PaperProps: {
-            sx: {
-                borderRadius: "28px",
-                width: { xs: "328px", sm: "456px", md: "456px" },
-                // maxWidth: { xs: 328, sm: "456px", md: "456px" },
-                //maxHeight: 306,
-                // margin: { xs: 0, sm: "auto" },
-            },
-        }, children: [_jsx(DialogContent, { sx: { pb: "16px", mb: "0px" }, children: _jsxs(Stack, { direction: "column", children: [_jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [_jsx(Typography, {}), _jsx(Typography, { color: colors.onSurface, sx: { ...typography.titleMedium }, children: props.title }), _jsx(CloseButton, { onClick: props.onClose })] }), _jsx(Typography, { variant: "bodyMedium", color: colors.onSurface, children: props.description })] }) }), props.action && (_jsx(DialogContent, { sx: { pt: "0px", mt: "0px" }, children: _jsx(Stack, { alignItems: "center", width: "100%", children: props.action }) }))] }));
-}
-export function HDialogForPreset(props) {
-    const colors = useColors();
-    const typography = useHonchoTypography();
-    return (_jsx(Dialog, { disableScrollLock: true, open: props.open, onClose: props.onClose, "aria-labelledby": "responsive-dialog-title", PaperProps: {
-            sx: {
-                borderRadius: "28px",
-                maxWidth: { xs: 328, sm: "456px", md: "456px" },
-                //maxHeight: 306,
-                margin: { xs: 0, sm: "auto" },
-            },
-        }, children: _jsx(DialogContent, { sx: { padding: { xs: "24px 24px 0 24px", sm: "24 24px 0 24px" } }, children: _jsxs(Stack, { spacing: 0, direction: "column", children: [_jsx(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", children: _jsx(Typography, { color: colors.onSurface, sx: { ...typography.labelLarge }, children: props.title }) }), _jsxs(Stack, { direction: "column", sx: { pt: "12px" }, children: [_jsx(Stack, { sx: { pt: "20px", pb: "20px" }, children: props.action }), _jsxs(Stack, { children: [_jsx(Typography, { variant: "bodyMedium", color: colors.onSurface, children: props.description }), props.actionAdjust] })] })] }) }) }));
-}
-export function PositiveButton(props) {
-    const colors = useColors();
-    return (_jsx(Button, { variant: "text", sx: {
-            ":hover": {
-                backgroundColor: "transparent",
-            },
-        }, onClick: props.onClick, children: _jsx(Typography, { variant: "buttonMedium", color: colors.onSurface, children: props.text }) }));
-}
-export function NegativeButton(props) {
-    const colors = useColors();
-    return (_jsx(Button, { variant: "text", sx: {
-            borderRadius: 100,
-            color: colors.error,
-            ":hover": {
-                backgroundColor: "transparent",
-            },
-        }, disabled: false, onClick: props.onClick, children: props.text }));
-}
-function CloseButton(props) {
-    return (_jsx(IconButton, { onClick: props.onClick, children: _jsx(CloseOutlined, { htmlColor: "black" }) }));
-}

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

@@ -1,40 +0,0 @@
-import React from "react";
-type CheckState = {
-    [key: string]: boolean;
-};
-interface Props {
-    colorChecks: CheckState;
-    lightChecks: CheckState;
-    detailsChecks: CheckState;
-    expanded: {
-        color: boolean;
-        light: boolean;
-        details: boolean;
-    };
-    onCopyEdit: () => void;
-    onParentChange: (event: React.ChangeEvent<HTMLInputElement>, setter: React.Dispatch<React.SetStateAction<any>>) => void;
-    onChildChange: (event: React.ChangeEvent<HTMLInputElement>, setter: React.Dispatch<React.SetStateAction<any>>) => void;
-    onToggleExpand: (section: 'color' | 'light' | 'details') => void;
-    setColorChecks: React.Dispatch<React.SetStateAction<any>>;
-    setLightChecks: React.Dispatch<React.SetStateAction<any>>;
-    setDetailsChecks: React.Dispatch<React.SetStateAction<any>>;
-}
-export declare function HDialogCopy(props: Props): import("react/jsx-runtime").JSX.Element;
-interface PropsPreset {
-    colorChecks: CheckState;
-    lightChecks: CheckState;
-    detailsChecks: CheckState;
-    expanded: {
-        color: boolean;
-        light: boolean;
-        details: boolean;
-    };
-    onParentChange: (event: React.ChangeEvent<HTMLInputElement>, setter: React.Dispatch<React.SetStateAction<any>>) => void;
-    onChildChange: (event: React.ChangeEvent<HTMLInputElement>, setter: React.Dispatch<React.SetStateAction<any>>) => void;
-    onToggleExpand: (section: 'color' | 'light' | 'details') => void;
-    setColorChecks: React.Dispatch<React.SetStateAction<any>>;
-    setLightChecks: React.Dispatch<React.SetStateAction<any>>;
-    setDetailsChecks: React.Dispatch<React.SetStateAction<any>>;
-}
-export declare function HDialogPreset(props: PropsPreset): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/editor/HDialogCopy.js

@@ -1,80 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Stack, Typography, Checkbox, Collapse, FormControlLabel, IconButton } from "@mui/material";
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import useHonchoTypography from "../../themes/honchoTheme";
-import useColors from '../../themes/colors';
-export function HDialogCopy(props) {
-    const colors = useColors();
-    const typography = useHonchoTypography();
-    // --- Derived state is now calculated from props ---
-    const colorValues = Object.values(props.colorChecks);
-    const colorCheckedCount = colorValues.filter(Boolean).length;
-    const isColorParentChecked = colorCheckedCount === colorValues.length;
-    const isColorParentIndeterminate = colorCheckedCount > 0 && !isColorParentChecked;
-    const lightValues = Object.values(props.lightChecks);
-    const lightCheckedCount = lightValues.filter(Boolean).length;
-    const isLightParentChecked = lightCheckedCount === lightValues.length;
-    const isLightParentIndeterminate = lightCheckedCount > 0 && !isLightParentChecked;
-    const detailsValues = Object.values(props.detailsChecks);
-    const detailsCheckedCount = detailsValues.filter(Boolean).length;
-    const isDetailsParentChecked = detailsCheckedCount === detailsValues.length;
-    const isDetailsParentIndeterminate = detailsCheckedCount > 0 && !isDetailsParentChecked;
-    const checkboxStyle = {
-        // pt: "5px",
-        color: colors.onSurface,
-        '&.Mui-checked, &.Mui-indeterminate': { color: colors.onSurface },
-    };
-    return (_jsxs(Stack, { direction: "column", spacing: 1, sx: { padding: 0, margin: 0, width: '100%' }, children: [_jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Color" }), control: _jsx(Checkbox, { color: "default", icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), indeterminateIcon: _jsx(RoundedSquareIndeterminateIcon, { color: colors.onSurface }), checked: isColorParentChecked, indeterminate: isColorParentIndeterminate, onChange: (e) => props.onParentChange(e, props.setColorChecks), sx: checkboxStyle }) }), _jsxs(Stack, { direction: "row", alignItems: "center", children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface }, children: `${colorCheckedCount}/${colorValues.length}` }), _jsx(IconButton, { onClick: () => props.onToggleExpand('color'), size: "small", sx: { pt: "3px" }, children: _jsx(ExpandMoreIcon, { sx: { colors: colors.background, transition: 'transform 0.3s', transform: props.expanded.color ? 'rotate(180deg)' : 'rotate(0deg)' } }) })] })] }), _jsx(Collapse, { in: props.expanded.color, timeout: "auto", unmountOnExit: true, children: _jsxs(Stack, { direction: "column", sx: { ml: 2, pl: 1.5 }, children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Temperature" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "temperature", checked: props.colorChecks.temperature, onChange: (e) => props.onChildChange(e, props.setColorChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Tint" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "tint", checked: props.colorChecks.tint, onChange: (e) => props.onChildChange(e, props.setColorChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Vibrance" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "vibrance", checked: props.colorChecks.vibrance, onChange: (e) => props.onChildChange(e, props.setColorChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Saturation" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "saturation", checked: props.colorChecks.saturation, onChange: (e) => props.onChildChange(e, props.setColorChecks), sx: checkboxStyle }) })] }) })] }), _jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Light" }), control: _jsx(Checkbox, { color: "default", icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), indeterminateIcon: _jsx(RoundedSquareIndeterminateIcon, { color: colors.onSurface }), checked: isLightParentChecked, indeterminate: isLightParentIndeterminate, onChange: (e) => props.onParentChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsxs(Stack, { direction: "row", alignItems: "center", children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface }, children: `${lightCheckedCount}/${lightValues.length}` }), _jsx(IconButton, { onClick: () => props.onToggleExpand('light'), size: "small", sx: { pt: "3px" }, children: _jsx(ExpandMoreIcon, { sx: { transition: 'transform 0.3s', transform: props.expanded.light ? 'rotate(180deg)' : 'rotate(0deg)' } }) })] })] }), _jsx(Collapse, { in: props.expanded.light, timeout: "auto", unmountOnExit: true, children: _jsxs(Stack, { direction: "column", sx: { ml: 2, pl: 1.5 }, children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Exposure" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "exposure", checked: props.lightChecks.exposure, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Contrast" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "contrast", checked: props.lightChecks.contrast, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Highlights" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "highlights", checked: props.lightChecks.highlights, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Shadows" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "shadows", checked: props.lightChecks.shadows, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Whites" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "whites", checked: props.lightChecks.whites, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Blacks" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "blacks", checked: props.lightChecks.blacks, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) })] }) })] }), _jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Details" }), control: _jsx(Checkbox, { color: "default", icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), indeterminateIcon: _jsx(RoundedSquareIndeterminateIcon, { color: colors.onSurface }), checked: isDetailsParentChecked, indeterminate: isDetailsParentIndeterminate, onChange: (e) => props.onParentChange(e, props.setDetailsChecks), sx: checkboxStyle }) }), _jsxs(Stack, { direction: "row", alignItems: "center", children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface }, children: `${detailsCheckedCount}/${detailsValues.length}` }), _jsx(IconButton, { onClick: () => props.onToggleExpand('details'), size: "small", sx: { pt: "3px" }, children: _jsx(ExpandMoreIcon, { sx: { transition: 'transform 0.3s', transform: props.expanded.details ? 'rotate(180deg)' : 'rotate(0deg)' } }) })] })] }), _jsx(Collapse, { in: props.expanded.details, timeout: "auto", unmountOnExit: true, children: _jsxs(Stack, { direction: "column", sx: { ml: 2, pl: 1.5 }, children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Clarity" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "clarity", checked: props.detailsChecks.clarity, onChange: (e) => props.onChildChange(e, props.setDetailsChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Sharpness" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "sharpness", checked: props.detailsChecks.sharpness, onChange: (e) => props.onChildChange(e, props.setDetailsChecks), sx: checkboxStyle }) })] }) })] }), _jsx(Button, { onClick: props.onCopyEdit, sx: { ...typography.labelMedium, mt: '20px', height: '40px', color: colors.surface, backgroundColor: colors.onSurface, borderRadius: '100px', textTransform: 'none' }, children: "Copy" })] }));
-}
-// A component for the UNCHECKED box
-const RoundedSquareIcon = ({ color }) => (_jsx("div", { style: {
-        width: 18,
-        height: 18,
-        border: `2px solid ${color}`, // Example color for the border
-        borderRadius: '5px',
-        backgroundColor: 'transparent',
-    } }));
-// A component for the CHECKED box
-const RoundedSquareCheckedIcon = ({ color }) => (_jsx("div", { style: {
-        width: 18,
-        height: 18,
-        border: `2px solid ${color}`, // Example color for the border
-        backgroundColor: `${color}`,
-        borderRadius: '5px',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-    }, children: _jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "#FFFFFF", strokeWidth: "3", children: _jsx("path", { d: "M20 6L9 17L4 12" }) }) }));
-const RoundedSquareIndeterminateIcon = ({ color }) => (_jsx("div", { style: {
-        // These styles MUST match your checked icon's container
-        width: 18,
-        height: 18,
-        border: `2px solid ${color}`,
-        backgroundColor: `${color}`,
-        borderRadius: '5px',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-    }, children: _jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "#FFFFFF", strokeWidth: "3", children: _jsx("path", { d: "M5 12L19 12" }) }) }));
-export function HDialogPreset(props) {
-    const colors = useColors();
-    const typography = useHonchoTypography();
-    // --- Derived state is now calculated from props ---
-    const colorValues = Object.values(props.colorChecks);
-    const colorCheckedCount = colorValues.filter(Boolean).length;
-    const isColorParentChecked = colorCheckedCount === colorValues.length;
-    const isColorParentIndeterminate = colorCheckedCount > 0 && !isColorParentChecked;
-    const lightValues = Object.values(props.lightChecks);
-    const lightCheckedCount = lightValues.filter(Boolean).length;
-    const isLightParentChecked = lightCheckedCount === lightValues.length;
-    const isLightParentIndeterminate = lightCheckedCount > 0 && !isLightParentChecked;
-    const detailsValues = Object.values(props.detailsChecks);
-    const detailsCheckedCount = detailsValues.filter(Boolean).length;
-    const isDetailsParentChecked = detailsCheckedCount === detailsValues.length;
-    const isDetailsParentIndeterminate = detailsCheckedCount > 0 && !isDetailsParentChecked;
-    const checkboxStyle = {
-        color: colors.onSurface,
-        '&.Mui-checked, &.Mui-indeterminate': { color: colors.onSurface },
-    };
-    return (_jsxs(Stack, { direction: "column", spacing: 1, sx: { padding: 0, margin: 0, width: '100%' }, children: [_jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Color" }), control: _jsx(Checkbox, { color: "default", icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), indeterminateIcon: _jsx(RoundedSquareIndeterminateIcon, { color: colors.onSurface }), checked: isColorParentChecked, indeterminate: isColorParentIndeterminate, onChange: (e) => props.onParentChange(e, props.setColorChecks), sx: checkboxStyle }) }), _jsxs(Stack, { direction: "row", alignItems: "center", children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface }, children: `${colorCheckedCount}/${colorValues.length}` }), _jsx(IconButton, { onClick: () => props.onToggleExpand('color'), size: "small", sx: { pt: "3px" }, children: _jsx(ExpandMoreIcon, { sx: { colors: colors.background, transition: 'transform 0.3s', transform: props.expanded.color ? 'rotate(180deg)' : 'rotate(0deg)' } }) })] })] }), _jsx(Collapse, { in: props.expanded.color, timeout: "auto", unmountOnExit: true, children: _jsxs(Stack, { direction: "column", sx: { ml: 2, pl: 1.5 }, children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Temperature" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "temperature", checked: props.colorChecks.temperature, onChange: (e) => props.onChildChange(e, props.setColorChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Tint" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "tint", checked: props.colorChecks.tint, onChange: (e) => props.onChildChange(e, props.setColorChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Vibrance" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "vibrance", checked: props.colorChecks.vibrance, onChange: (e) => props.onChildChange(e, props.setColorChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Saturation" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "saturation", checked: props.colorChecks.saturation, onChange: (e) => props.onChildChange(e, props.setColorChecks), sx: checkboxStyle }) })] }) })] }), _jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Light" }), control: _jsx(Checkbox, { color: "default", icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), indeterminateIcon: _jsx(RoundedSquareIndeterminateIcon, { color: colors.onSurface }), checked: isLightParentChecked, indeterminate: isLightParentIndeterminate, onChange: (e) => props.onParentChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsxs(Stack, { direction: "row", alignItems: "center", children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface }, children: `${lightCheckedCount}/${lightValues.length}` }), _jsx(IconButton, { onClick: () => props.onToggleExpand('light'), size: "small", sx: { pt: "3px" }, children: _jsx(ExpandMoreIcon, { sx: { transition: 'transform 0.3s', transform: props.expanded.light ? 'rotate(180deg)' : 'rotate(0deg)' } }) })] })] }), _jsx(Collapse, { in: props.expanded.light, timeout: "auto", unmountOnExit: true, children: _jsxs(Stack, { direction: "column", sx: { ml: 2, pl: 1.5 }, children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Exposure" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "exposure", checked: props.lightChecks.exposure, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Contrast" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "contrast", checked: props.lightChecks.contrast, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Highlights" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "highlights", checked: props.lightChecks.highlights, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Shadows" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "shadows", checked: props.lightChecks.shadows, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Whites" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "whites", checked: props.lightChecks.whites, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Blacks" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "blacks", checked: props.lightChecks.blacks, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) })] }) })] }), _jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Details" }), control: _jsx(Checkbox, { color: "default", icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), indeterminateIcon: _jsx(RoundedSquareIndeterminateIcon, { color: colors.onSurface }), checked: isDetailsParentChecked, indeterminate: isDetailsParentIndeterminate, onChange: (e) => props.onParentChange(e, props.setDetailsChecks), sx: checkboxStyle }) }), _jsxs(Stack, { direction: "row", alignItems: "center", children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface }, children: `${detailsCheckedCount}/${detailsValues.length}` }), _jsx(IconButton, { onClick: () => props.onToggleExpand('details'), size: "small", sx: { pt: "3px" }, children: _jsx(ExpandMoreIcon, { sx: { transition: 'transform 0.3s', transform: props.expanded.details ? 'rotate(180deg)' : 'rotate(0deg)' } }) })] })] }), _jsx(Collapse, { in: props.expanded.details, timeout: "auto", unmountOnExit: true, children: _jsxs(Stack, { direction: "column", sx: { ml: 2, pl: 1.5 }, children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Clarity" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "clarity", checked: props.detailsChecks.clarity, onChange: (e) => props.onChildChange(e, props.setDetailsChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Sharpness" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "sharpness", checked: props.detailsChecks.sharpness, onChange: (e) => props.onChildChange(e, props.setDetailsChecks), sx: checkboxStyle }) })] }) })] })] }));
-}

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

@@ -1,12 +0,0 @@
-import React from "react";
-interface Props {
-    anchorElZoom: null | HTMLElement;
-    onScale: (event: React.MouseEvent<HTMLElement>) => void;
-    onZoomMenuClose: () => void;
-    zoomLevelText: string;
-    onZoomAction: (zoomLevel: string) => void;
-    onShowOriginal?: () => void;
-    onShowEdited?: () => void;
-}
-export default function HFooter(props: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/editor/HFooter.js

@@ -1,24 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button, Stack, IconButton, CardMedia, MenuItem, ListItemText, Menu } from "@mui/material";
-import useHonchoTypography from "../../themes/honchoTheme";
-import useColors from '../../themes/colors';
-export default function HFooter(props) {
-    const typography = useHonchoTypography();
-    const colors = useColors();
-    const isZoomMenuOpen = Boolean(props.anchorElZoom);
-    return (_jsx(_Fragment, { children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [_jsx(Button, { id: "zoom-button", onClick: props.onScale, "aria-controls": isZoomMenuOpen ? 'zoom-options-menu' : undefined, "aria-haspopup": "true", "aria-expanded": isZoomMenuOpen ? 'true' : undefined, sx: {
-                        color: colors.surface,
-                        fontSize: "14px",
-                        '&.MuiButton-outlined': {
-                            color: colors.surface,
-                        },
-                    }, endIcon: _jsx(CardMedia, { component: "img", image: isZoomMenuOpen ? "/v1/svg/expanded-editor.svg" : "/v1/svg/expand-editor.svg", sx: { width: "11.67px", height: "5.83px" } }), children: props.zoomLevelText }), _jsx(IconButton, { "aria-label": "before-after", onMouseDown: props.onShowOriginal, onMouseUp: props.onShowEdited, onMouseLeave: props.onShowEdited, onTouchStart: props.onShowOriginal, onTouchEnd: props.onShowEdited, sx: { color: colors.outlineVariant }, children: _jsx(CardMedia, { component: "img", title: "before-after", image: "/v1/svg/before-after-editor.svg", sx: { width: "20px", height: "20px" } }) }), _jsxs(Menu, { id: "zoom-options-menu", anchorEl: props.anchorElZoom, open: isZoomMenuOpen, onClose: props.onZoomMenuClose, anchorOrigin: { vertical: 'top', horizontal: 'center' }, transformOrigin: { vertical: 'bottom', horizontal: 'center' }, slotProps: {
-                        paper: {
-                            sx: {
-                                backgroundColor: colors.onBackground,
-                                color: colors.surface,
-                                border: `1px solid ${colors.outlineVariant}`,
-                            },
-                        },
-                    }, children: [_jsx(MenuItem, { onClick: () => props.onZoomAction('in'), children: _jsx(ListItemText, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Zoom in" }) }), _jsx(MenuItem, { onClick: () => props.onZoomAction('out'), children: _jsx(ListItemText, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Zoom out" }) }), _jsx(MenuItem, { onClick: () => props.onZoomAction('fit'), children: _jsx(ListItemText, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Zoom to fit" }) }), _jsx(MenuItem, { onClick: () => props.onZoomAction('50%'), children: _jsx(ListItemText, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Zoom to 50%" }) }), _jsx(MenuItem, { onClick: () => props.onZoomAction('100%'), children: _jsx(ListItemText, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Zoom to 100%" }) }), _jsx(MenuItem, { onClick: () => props.onZoomAction('200%'), children: _jsx(ListItemText, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Zoom to 200%" }) })] })] }) }));
-}

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

@@ -1,17 +0,0 @@
-import React from "react";
-interface Props {
-    anchorEl?: null | HTMLElement;
-    valueSelect?: string;
-    isPasteEnabled?: boolean;
-    onBack?: () => void;
-    onUndo?: () => void;
-    onRedo?: () => void;
-    onRevert?: () => void;
-    onCopyEdit?: () => void;
-    onPasteEdit?: () => void;
-    onMenuClick?: (event: React.MouseEvent<HTMLElement>) => void;
-    onMenuClose?: () => void;
-    onSelectButton?: () => void;
-}
-export default function HHeaderEditor(props: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/editor/HHeaderEditor.js

@@ -1,36 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Stack, IconButton, CardMedia, MenuItem, ListItemText, ListItemIcon, Menu, Button, Typography } from "@mui/material";
-import useHonchoTypography from "../../themes/honchoTheme";
-import useColors from '../../themes/colors';
-import useIsMobile from "../../utils/isMobile";
-export default function HHeaderEditor(props) {
-    const typography = useHonchoTypography();
-    const colors = useColors();
-    const open = Boolean(props.anchorEl);
-    const isMobile = useIsMobile();
-    return (_jsx(_Fragment, { children: _jsxs(Stack, { direction: "row", justifyContent: "space-between", width: "100%", sx: {
-                id: 'HHeaderEditor',
-                pr: !isMobile ? "24px" : "6px",
-                position: 'fixed',
-                top: 0,
-                left: 0,
-                right: 0,
-                zIndex: 1300,
-                backgroundColor: 'transparent',
-            }, children: [_jsx(Stack, { direction: "row", justifyContent: "flex-start", sx: { pl: !isMobile ? "0px" : "14px" }, children: _jsx(IconButton, { "aria-label": "back", onClick: props.onBack, sx: {
-                            '&:active': {
-                                transform: 'scale(0.92)',
-                            },
-                            transition: 'transform 0.1s ease-in-out',
-                        }, children: _jsx(CardMedia, { title: "back", src: "svg/Back.svg", component: "img" }) }) }), _jsxs(Stack, { direction: "row", justifyContent: "flex-end", alignItems: "center", sx: { pt: "20px", pb: "12px" }, spacing: 0.1, children: [_jsx(Button, { variant: "text", onClick: props.onSelectButton, sx: { color: colors.outlineVariant }, children: props.valueSelect }), _jsx(IconButton, { "aria-label": "undo", onClick: props.onUndo, sx: { color: colors.outlineVariant }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/undo-editor.svg" }) }), _jsx(IconButton, { "aria-label": "redo", onClick: props.onRedo, sx: { color: colors.outlineVariant }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/redo-editor.svg" }) }), _jsx(IconButton, { "aria-label": "option", onClick: props.onMenuClick, "aria-controls": open ? 'options-menu' : undefined, "aria-haspopup": "true", "aria-expanded": open ? 'true' : undefined, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/dots-editor.svg" }) }), _jsxs(Menu, { id: "options-menu", anchorEl: props.anchorEl, open: open, onClose: props.onMenuClose, transformOrigin: { horizontal: 'right', vertical: 'top' }, anchorOrigin: { horizontal: 'right', vertical: 'bottom' }, slotProps: {
-                                paper: {
-                                    sx: {
-                                        backgroundColor: colors.onBackground,
-                                        color: colors.surface,
-                                        border: `1px solid ${colors.outlineVariant}`,
-                                    },
-                                },
-                            }, children: [_jsxs(MenuItem, { onClick: props.onRevert, children: [_jsx(ListItemIcon, { sx: { minWidth: 0, mr: "0px", px: "0px" }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/revert-editor.svg", sx: { width: "20px", height: "20px" } }) }), _jsx(ListItemText, { children: _jsx(Typography, { sx: { fontSize: "14px", color: colors.surface }, children: "Revert to original" }) })] }), _jsxs(MenuItem, { onClick: props.onCopyEdit, children: [_jsx(ListItemIcon, { sx: { minWidth: 0, mr: "0px", px: "0px" }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/copy-editor.svg", sx: { width: "20px", height: "20px" } }) }), _jsx(ListItemText, { children: _jsx(Typography, { sx: { fontSize: "14px", color: colors.surface }, children: "Copy edits" }) }), !isMobile &&
-                                            _jsx(ListItemIcon, { sx: { marginLeft: 'auto' }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/shortcut-copy-editor.svg", sx: { width: "25px", height: "20px" } }) })] }), _jsxs(MenuItem, { onClick: props.onPasteEdit, disabled: !props.isPasteEnabled, children: [_jsx(ListItemIcon, { sx: { minWidth: 0, mr: "0px", px: "0px" }, children: _jsx(CardMedia, { component: "img", image: !props.isPasteEnabled ? "/v1/svg/paste-editor.svg" : "/v1/svg/paste-white.svg", sx: { width: "20px", height: "20px" } }) }), _jsx(ListItemText, { children: _jsx(Typography, { sx: { fontSize: "14px", color: !props.isPasteEnabled ? colors.onSurfaceVariant1 : colors.surface }, children: "Paste edits" }) }), !isMobile &&
-                                            _jsx(ListItemIcon, { sx: { marginLeft: '30px' }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/shortcut-paste-editor.svg", sx: { width: "25px", height: "20px" } }) })] })] })] })] }) }));
-}

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

@@ -1,15 +0,0 @@
-import React from "react";
-interface Props {
-    activePanel: string;
-    isPanelOpen: boolean;
-    anchorElZoom: null | HTMLElement;
-    children: React.ReactNode;
-    footer: React.ReactNode;
-    setActivePanel: (accordion: string) => void;
-    onScale: (event: React.MouseEvent<HTMLElement>) => void;
-    onBeforeAfter: () => void;
-    onZoomMenuClose: () => void;
-    onZoomAction: (zoomLevel: string) => void;
-}
-export default function HImageEditorBulkDekstop(props: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/editor/HImageEditorBulkDekstop.js

@@ -1,29 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Stack, IconButton, CardMedia, Paper, Slide } from "@mui/material";
-import useHonchoTypography from "../../themes/honchoTheme";
-import useColors from "../../themes/colors";
-export default function HImageEditorBulkDekstop(props) {
-    const typography = useHonchoTypography();
-    const colors = useColors();
-    const isZoomMenuOpen = Boolean(props.anchorElZoom);
-    return (_jsx(_Fragment, { children: _jsx(Slide, { direction: "left", in: props.isPanelOpen, mountOnEnter: true, unmountOnExit: true, children: _jsx(Paper, { elevation: 3, sx: {
-                    position: 'inherit',
-                    right: '40px',
-                    top: '55px',
-                    width: '320px',
-                    height: 'calc(100vh - 70px)',
-                    // pb: '10px',
-                    zIndex: 1200,
-                    backgroundColor: '#000000',
-                    overflow: 'hidden',
-                    // pl: "20px"
-                }, children: _jsxs(Stack, { direction: "row", sx: { height: '100%', pl: "0px" }, children: [_jsxs(Stack, { direction: "column", sx: { width: 'calc(100% - 60px)', height: '95%' }, children: [_jsx(Stack, { sx: { flexGrow: 1, overflowY: 'auto', pl: '0px', pr: '16px', msOverflowStyle: 'none', scrollbarWidth: 'none', '&::-webkit-scrollbar': { display: 'none' } }, children: props.children }), _jsx(Stack, { sx: {
-                                        flexShrink: 0,
-                                        p: '0px 12px',
-                                    }, children: props.footer })] }), _jsxs(Stack, { justifyContent: "flex-start", spacing: "15px", sx: {
-                                width: '10px',
-                                flexShrink: 0,
-                                pt: 1,
-                                pl: "10px",
-                            }, children: [_jsx(IconButton, { onClick: () => props.setActivePanel('colorAdjustment'), children: _jsx(CardMedia, { component: "img", image: props.activePanel === 'colorAdjustment' ? "/v1/svg/color-adjustment-active.svg" : "/v1/svg/color-adjustment-inactive.svg", sx: { width: "20px", height: "20px" } }) }), _jsx(IconButton, { onClick: () => props.setActivePanel('preset'), children: _jsx(CardMedia, { component: "img", image: props.activePanel === 'preset' ? "/v1/svg/watermark-editor-active.svg" : "/v1/svg/watermark-editor-inactive.svg", sx: { width: "20px", height: "20px" } }) })] })] }) }) }) }));
-}

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

@@ -1,72 +0,0 @@
-import React from "react";
-import { SelectChangeEvent } from "@mui/material";
-type Preset = {
-    id: string;
-    name: string;
-};
-interface Props {
-    presets: Preset[];
-    activePanel: string;
-    activeSubPanel: string;
-    setActivePanel: (tab: string) => void;
-    setActiveSubPanel: (subTab: string) => void;
-    panelRef: React.RefObject<HTMLDivElement>;
-    contentRef: React.RefObject<HTMLDivElement | null>;
-    panelHeight: number;
-    handleDragStart: (e: React.MouseEvent | React.TouchEvent) => void;
-    onContentHeightChange: (height: number) => void;
-    onTempDecreaseMax: () => void;
-    onTempDecrease: () => void;
-    onTempIncrease: () => void;
-    onTempIncreaseMax: () => void;
-    onTintDecreaseMax: () => void;
-    onTintDecrease: () => void;
-    onTintIncrease: () => void;
-    onTintIncreaseMax: () => void;
-    onVibranceDecreaseMax: () => void;
-    onVibranceDecrease: () => void;
-    onVibranceIncrease: () => void;
-    onVibranceIncreaseMax: () => void;
-    onSaturationDecreaseMax: () => void;
-    onSaturationDecrease: () => void;
-    onSaturationIncrease: () => void;
-    onSaturationIncreaseMax: () => void;
-    onExposureDecreaseMax: () => void;
-    onExposureDecrease: () => void;
-    onExposureIncrease: () => void;
-    onExposureIncreaseMax: () => void;
-    onContrastDecreaseMax: () => void;
-    onContrastDecrease: () => void;
-    onContrastIncrease: () => void;
-    onContrastIncreaseMax: () => void;
-    onHighlightsDecreaseMax: () => void;
-    onHighlightsDecrease: () => void;
-    onHighlightsIncrease: () => void;
-    onHighlightsIncreaseMax: () => void;
-    onShadowsDecreaseMax: () => void;
-    onShadowsDecrease: () => void;
-    onShadowsIncrease: () => void;
-    onShadowsIncreaseMax: () => void;
-    onWhitesDecreaseMax: () => void;
-    onWhitesDecrease: () => void;
-    onWhitesIncrease: () => void;
-    onWhitesIncreaseMax: () => void;
-    onBlacksDecreaseMax: () => void;
-    onBlacksDecrease: () => void;
-    onBlacksIncrease: () => void;
-    onBlacksIncreaseMax: () => void;
-    onClarityDecreaseMax: () => void;
-    onClarityDecrease: () => void;
-    onClarityIncrease: () => void;
-    onClarityIncreaseMax: () => void;
-    onSharpnessDecreaseMax: () => void;
-    onSharpnessDecrease: () => void;
-    onSharpnessIncrease: () => void;
-    onSharpnessIncreaseMax: () => void;
-    selectedPresetBulk: string;
-    onSelectPresetBulk: (event: SelectChangeEvent<string>) => void;
-    onPresetMenuClickBulk: (event: React.MouseEvent<HTMLElement>, presetId: string) => void;
-    onOpenPresetModalBulk: () => void;
-}
-export default function HImageEditorBulkMobile(props: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/editor/HImageEditorBulkMobile.js

@@ -1,81 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { BottomNavigation, BottomNavigationAction, Box, CardMedia, Paper, Stack } from "@mui/material";
-import useHonchoTypography from "../../themes/honchoTheme";
-import useColors from '../../themes/colors';
-import HBulkColorAdjustmentMobile from "./HBulkColorAdjustmentMobile";
-import HBulkPresetMobile from "./HBulkPresetMobile";
-// Data structure for the sub-navigation tabs
-const subTabs = {
-    colorAdjustment: [
-        { value: "color", label: "Color", inactiveIcon: "/v1/svg/white-balance-inactive-mobile.svg", activeIcon: "/v1/svg/white-balance-active-mobile.svg" },
-        { value: "light", label: "Light", inactiveIcon: "/v1/svg/light-inactive-mobile.svg", activeIcon: "/v1/svg/light-active-mobile.svg" },
-        // { value: "details", label: "Details", inactiveIcon: "/v1/svg/details-inactive-mobile.svg", activeIcon: "/v1/svg/details-active-mobile.svg"},
-    ],
-    aspectRatio: [
-        { value: "portrait", label: "Portrait" },
-        { value: "square", label: "Square" },
-        { value: "wide", label: "Wide" },
-    ],
-    preset: [
-        { value: "Preset", label: "Preset", inactiveIcon: "/v1/svg/preset-inactive-mobile.svg", activeIcon: "/v1/svg/preset-active-mobile.svg" },
-    ],
-};
-export default function HImageEditorBulkMobile(props) {
-    const typography = useHonchoTypography();
-    const colors = useColors();
-    const handleChange = (event, newValue) => {
-        props.setActivePanel(newValue);
-    };
-    const currentSubTabs = subTabs[props.activePanel];
-    return (_jsx(Paper, { elevation: 0, sx: {
-            position: 'fixed',
-            bottom: 0,
-            left: 0,
-            right: 0,
-            zIndex: 1300,
-            backgroundColor: 'transparent',
-        }, children: _jsxs(Stack, { direction: "column", children: [props.activeSubPanel && (_jsxs(Paper, { ref: props.panelRef, elevation: 3, className: "draggable-panel MuiPaper-transition", sx: {
-                        height: `${props.panelHeight}px`,
-                        maxHeight: '60vh',
-                        backgroundColor: 'rgba(40, 40, 40, 0.85)',
-                        overflow: 'hidden',
-                        borderRadius: "0px",
-                        '&.MuiPaper-transition': {
-                            transition: 'height 0.5s ease-in-out',
-                        },
-                    }, children: [_jsx(Box, { onMouseDown: props.handleDragStart, onTouchStart: props.handleDragStart, sx: {
-                                display: 'flex',
-                                justifyContent: 'center',
-                                alignItems: 'center',
-                                pt: '5px',
-                                pb: '12px',
-                                cursor: 'ns-resize',
-                                touchAction: 'none',
-                            }, children: _jsx(Box, { sx: { width: 40, height: 5, borderRadius: '2.5px', backgroundColor: 'rgba(255, 255, 255, 0.5)' } }) }), _jsxs(Box, { ref: props.contentRef, sx: {
-                                paddingX: "8px",
-                                paddingBottom: 3,
-                                height: 'calc(100% - 30px)',
-                                overflowY: 'auto',
-                                scrollbarWidth: 'none',
-                                '&::-webkit-scrollbar': { display: 'none' },
-                            }, children: [props.activePanel === 'colorAdjustment' && _jsx(HBulkColorAdjustmentMobile, { ...props }), props.activePanel === 'preset' && _jsx(HBulkPresetMobile, { ...props })] })] })), currentSubTabs && (_jsx(Paper, { sx: {
-                        backgroundColor: colors.onBackground,
-                        paddingTop: "10px",
-                        pb: "0px",
-                        mb: "0px",
-                        px: "44px",
-                        borderRadius: "0px",
-                    }, elevation: 3, children: _jsx(BottomNavigation, { showLabels: true, sx: { backgroundColor: colors.onBackground, gap: '10px' }, children: currentSubTabs.map((tab) => {
-                            const isActive = props.activeSubPanel === tab.value;
-                            const iconSrc = isActive ? tab.activeIcon : tab.inactiveIcon;
-                            return (_jsx(BottomNavigationAction, { label: tab.label, value: tab.value, onClick: () => props.setActiveSubPanel(isActive ? '' : tab.value), icon: iconSrc && _jsx(CardMedia, { component: "img", image: iconSrc, sx: { width: "20px", height: "20px", mb: "5px" } }), sx: {
-                                    color: isActive ? colors.surface : colors.onSurfaceVariant1,
-                                    minWidth: 'auto',
-                                    p: 0,
-                                    '& .MuiBottomNavigationAction-label': {
-                                        ...typography.labelSmall,
-                                        color: isActive ? colors.surface : colors.onSurfaceVariant1,
-                                    }
-                                } }, tab.value));
-                        }) }) })), _jsx(Paper, { sx: { backgroundColor: colors.onBackground, borderRadius: "0px", pb: "0px", mb: "0px" }, elevation: 3, children: _jsx(Stack, { direction: "row", justifyContent: "center", alignItems: "center", sx: { pt: "0px", mb: "0px", mr: "0px", ml: "0px" }, children: _jsxs(BottomNavigation, { value: props.activePanel, onChange: handleChange, sx: { backgroundColor: colors.onBackground }, children: [_jsx(BottomNavigationAction, { value: "colorAdjustment", sx: { px: '12px', py: '0px', minWidth: 'auto' }, icon: _jsx(CardMedia, { component: "img", image: props.activePanel === 'colorAdjustment' ? "/v1/svg/color-adjustment-active-mobile.svg" : "/v1/svg/color-adjustment-inactive-mobile.svg", sx: { width: "20px", height: "20px" } }) }), _jsx(BottomNavigationAction, { value: "preset", sx: { px: '12px', py: '0px', minWidth: 'auto' }, icon: _jsx(CardMedia, { component: "img", image: props.activePanel === 'preset' ? "/v1/svg/preset-and-watermark-active-mobile.svg" : "/v1/svg/preset-and-watermark-inactive-mobile.svg", sx: { width: "20px", height: "20px" } }) })] }) }) })] }) }));
-}

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

@@ -1,15 +0,0 @@
-import React from "react";
-interface Props {
-    activePanel: string;
-    isPanelOpen: boolean;
-    anchorElZoom: null | HTMLElement;
-    children: React.ReactNode;
-    footer: React.ReactNode;
-    setActivePanel: (accordion: string) => void;
-    onScale: (event: React.MouseEvent<HTMLElement>) => void;
-    onBeforeAfter: () => void;
-    onZoomMenuClose: () => void;
-    onZoomAction: (zoomLevel: string) => void;
-}
-export default function HImageEditorDesktop(props: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/editor/HImageEditorDekstop.js

@@ -1,29 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Stack, IconButton, CardMedia, Paper, Slide } from "@mui/material";
-import useHonchoTypography from "../../themes/honchoTheme";
-import useColors from '../../themes/colors';
-export default function HImageEditorDesktop(props) {
-    const typography = useHonchoTypography();
-    const colors = useColors();
-    const isZoomMenuOpen = Boolean(props.anchorElZoom);
-    return (_jsx(_Fragment, { children: _jsx(Slide, { direction: "left", in: props.isPanelOpen, mountOnEnter: true, unmountOnExit: true, children: _jsx(Stack, { sx: {}, children: _jsx(Paper, { elevation: 3, sx: {
-                        position: 'inherit',
-                        right: '40px',
-                        top: '55px',
-                        width: '320px',
-                        height: 'calc(100vh - 70px)',
-                        // pb: '10px',
-                        zIndex: 1200,
-                        backgroundColor: '#000000',
-                        overflow: 'hidden',
-                        // pl: "20px"
-                    }, children: _jsxs(Stack, { direction: "row", sx: { height: '100%', pl: "10px", }, children: [_jsxs(Stack, { direction: "column", sx: { width: 'calc(100% - 60px)', height: '95%' }, children: [_jsx(Stack, { sx: { flexGrow: 1, overflowY: 'auto', px: 2, msOverflowStyle: 'none', scrollbarWidth: 'none', '&::-webkit-scrollbar': { display: 'none' } }, children: props.children }), _jsx(Stack, { sx: {
-                                            flexShrink: 0,
-                                            p: '0px 25px',
-                                        }, children: props.footer })] }), _jsxs(Stack, { justifyContent: "flex-start", spacing: "15px", sx: {
-                                    width: '10px',
-                                    flexShrink: 0,
-                                    pt: 1,
-                                    pl: "10px",
-                                }, children: [_jsx(IconButton, { onClick: () => props.setActivePanel('colorAdjustment'), children: _jsx(CardMedia, { component: "img", image: props.activePanel === 'colorAdjustment' ? "/v1/svg/color-adjustment-active.svg" : "/v1/svg/color-adjustment-inactive.svg", sx: { width: "20px", height: "20px" } }) }), _jsx(IconButton, { onClick: () => props.setActivePanel('preset'), children: _jsx(CardMedia, { component: "img", image: props.activePanel === 'preset' ? "/v1/svg/watermark-editor-active.svg" : "/v1/svg/watermark-editor-inactive.svg", sx: { width: "20px", height: "20px" } }) })] })] }) }) }) }) }));
-}

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

@@ -1,51 +0,0 @@
-import React from "react";
-import { AdjustmentState } from '../../hooks/editor/type';
-type Preset = {
-    id: string;
-    name: string;
-};
-interface Props {
-    presets: Preset[];
-    activePanel: string;
-    activeSubPanel: string;
-    setActivePanel: (tab: string) => void;
-    setActiveSubPanel: (subTab: string) => void;
-    panelRef: React.RefObject<HTMLDivElement>;
-    contentRef: React.RefObject<HTMLDivElement | null>;
-    panelHeight: number;
-    handleDragStart: (e: React.MouseEvent | React.TouchEvent) => void;
-    onContentHeightChange: (height: number) => void;
-    tempScore: number;
-    tintScore: number;
-    vibranceScore: number;
-    saturationScore: number;
-    exposureScore: number;
-    highlightsScore: number;
-    shadowScore: number;
-    whiteScore: number;
-    blackScore: number;
-    contrastScore: number;
-    clarityScore: number;
-    sharpnessScore: number;
-    onTempChange: (field: keyof AdjustmentState, value: number) => void;
-    onTintChange: (field: keyof AdjustmentState, value: number) => void;
-    onVibranceChange: (field: keyof AdjustmentState, value: number) => void;
-    onSaturationChange: (field: keyof AdjustmentState, value: number) => void;
-    onExposureChange: (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;
-    onContrastChange: (field: keyof AdjustmentState, value: number) => void;
-    onClarityChange: (field: keyof AdjustmentState, value: number) => void;
-    onSharpnessChange: (field: keyof AdjustmentState, value: number) => void;
-    isBatchMode: boolean;
-    onDragStart: () => void;
-    onDragEnd: () => void;
-    selectedPreset: string | null;
-    onSelectPreset: (id: string) => void;
-    onOpenPresetModal: () => void;
-    presetOptionModal: (event: React.MouseEvent<HTMLElement>, presetId: string) => void;
-}
-export default function HImageEditorMobile(props: Props): import("react/jsx-runtime").JSX.Element;
-export {};