@yogiswara/honcho-editor-ui 1.0.0

package/dist/components/editor/HDialogBox.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Dialog, DialogContent, IconButton, Stack, Typography, } from "@mui/material";
+import useColors from "@/colors";
+import useHonchoTypography from "@/honchoTheme";
+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

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

@@ -0,0 +1,80 @@
+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 useColors from "@/colors";
+import useHonchoTypography from "@/honchoTheme";
+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: "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.labelMedium, color: colors.onSurface }, children: `${colorCheckedCount}/${colorValues.length}` }), _jsx(IconButton, { onClick: () => props.onToggleExpand('color'), size: "small", 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: "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: "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: "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: "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: "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.labelMedium, color: colors.onSurface }, children: `${lightCheckedCount}/${lightValues.length}` }), _jsx(IconButton, { onClick: () => props.onToggleExpand('light'), size: "small", 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: "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: "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: "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: "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: "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: "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: "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.labelMedium, color: colors.onSurface }, children: `${detailsCheckedCount}/${detailsValues.length}` }), _jsx(IconButton, { onClick: () => props.onToggleExpand('details'), size: "small", 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: "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: "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

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

@@ -0,0 +1,24 @@
+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 "@/honchoTheme";
+import useColors from "@/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

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

@@ -0,0 +1,27 @@
+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 "@/honchoTheme";
+import useColors from "@/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: { pr: !isMobile ? "24px" : "6px" }, 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

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

@@ -0,0 +1,26 @@
+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 "@/honchoTheme";
+import useColors from "@/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: '30px',
+                    top: '55px',
+                    width: '320px',
+                    height: 'calc(100vh - 70px)',
+                    zIndex: 1200,
+                    backgroundColor: '#000000',
+                    overflow: 'hidden'
+                }, children: _jsxs(Stack, { direction: "row", sx: { height: '100%' }, 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 16px',
+                                    }, children: props.footer })] }), _jsxs(Stack, { justifyContent: "flex-start", spacing: "15px", sx: {
+                                width: '10px',
+                                flexShrink: 0,
+                                pt: 1,
+                            }, 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

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

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BottomNavigation, BottomNavigationAction, Box, CardMedia, Paper, Stack } from "@mui/material";
+import useColors from "@/colors";
+import useHonchoTypography from "@/honchoTheme";
+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

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

@@ -0,0 +1,29 @@
+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 "@/honchoTheme";
+import useColors from "@/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

@@ -0,0 +1,47 @@
+import React from "react";
+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: (value: number) => void;
+    onTintChange: (value: number) => void;
+    onVibranceChange: (value: number) => void;
+    onSaturationChange: (value: number) => void;
+    onExposureChange: (value: number) => void;
+    onHighlightsChange: (value: number) => void;
+    onShadowsChange: (value: number) => void;
+    onWhitesChange: (value: number) => void;
+    onBlacksChange: (value: number) => void;
+    onContrastChange: (value: number) => void;
+    onClarityChange: (value: number) => void;
+    onSharpnessChange: (value: number) => 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 {};