@yogiswara/honcho-editor-ui 2.7.14 → 2.7.16

package/dist/components/editor/HImageEditorMobile.js

@@ -0,0 +1,92 @@
+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 HTabColorAdjustmentMobile from "./HTabColorAdjustmentMobile";
+import HTabPresetMobile from "./HTabPresetMobile";
+// Data structure for the sub-navigation tabs
+const subTabs = {
+    colorAdjustment: [
+        { value: "color", label: "Color", inactiveIcon: "/v1/svg/new-mobile-coloAdjustment-notpress.svg", activeIcon: "/v1/svg/new-mobile-coloAdjustment-presssvg.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 HImageEditorMobile(props) {
+    const typography = useHonchoTypography();
+    const colors = useColors();
+    const handleChange = (event, newValue) => {
+        props.setActivePanel(newValue);
+    };
+    const currentSubTabs = subTabs[props.activePanel];
+    // Helper function to render the correct content inside the draggable panel
+    const renderPanelContent = () => {
+        switch (props.activePanel) {
+            case 'colorAdjustment':
+                return _jsx(HTabColorAdjustmentMobile, { ...props });
+            case 'preset':
+                return _jsx(HTabPresetMobile, { ...props });
+            default:
+                return null;
+        }
+    };
+    return (_jsx(Paper, { elevation: 0, sx: {
+            id: 'HImageEditorMobile',
+            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: '80vh',
+                        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)' } }) }), _jsx(Box, { ref: props.contentRef, sx: {
+                                paddingX: "8px",
+                                paddingBottom: 3,
+                                height: 'calc(100% - 30px)',
+                                overflowY: 'auto',
+                                scrollbarWidth: 'none',
+                                '&::-webkit-scrollbar': { display: 'none' },
+                            }, children: renderPanelContent() })] })), 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" }, elevation: 3, children: _jsx(Stack, { direction: "row", justifyContent: "center", alignItems: "center", sx: { pt: "0px", pb: "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/HImageEditorMobileLayout.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+interface Props {
+    children: React.ReactNode;
+    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;
+}
+export default function HImageEditorMobileLayout(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/editor/HImageEditorMobileLayout.js

@@ -0,0 +1,58 @@
+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';
+// 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 HImageEditorMobileLayout(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: {
+            id: 'HImageEditorMobileLayout',
+            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)' } }) }), _jsx(Box, { ref: props.contentRef, sx: {
+                                paddingX: "8px", paddingBottom: 3, height: 'calc(100% - 30px)',
+                                overflowY: 'auto', scrollbarWidth: 'none', '&::-webkit-scrollbar': { display: 'none' },
+                            }, children: props.children })] })), currentSubTabs && (_jsx(Paper, { sx: { backgroundColor: colors.onBackground, paddingTop: "10px", 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: "4px", 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: "aspectRatio", sx: { px: '12px', py: '0px', minWidth: 'auto' }, icon: _jsx(CardMedia, { component: "img", image: props.activePanel === 'aspectRatio' ? "/v1/svg/aspect-ratio-inactive-mobile.svg" : "/v1/svg/aspect-ratio-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/HModalEditorDekstop.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+interface Props {
+    modalName: string;
+    modalOpen: boolean;
+    modalTitle: string;
+    modalInformation: string;
+    children: React.ReactNode;
+    action?: React.ReactNode;
+    modalClose: () => void;
+    onConfirm: () => void;
+}
+export default function HModalEditorDekstop(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/editor/HModalEditorDekstop.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Modal, Box, Typography, Button, Stack } from "@mui/material";
+import useHonchoTypography from "../../themes/honchoTheme";
+import useColors from '../../themes/colors';
+// Create modal for any usage coverage
+export default function HModalEditorDekstop(props) {
+    const colors = useColors();
+    const typography = useHonchoTypography();
+    const style = {
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        width: 500,
+        bgcolor: 'background.paper',
+        boxShadow: 24,
+        p: 4,
+        borderRadius: 6,
+        spacing: 6,
+    };
+    return (_jsx(_Fragment, { children: _jsx(Modal, { open: props.modalOpen, onClose: props.modalClose, children: _jsxs(Box, { sx: style, children: [_jsx(Typography, { variant: "h6", color: "initial", children: props.modalTitle }), _jsx(Box, { sx: { mt: 2 }, children: props.children }), _jsx(Typography, { color: "initial", children: props.modalInformation }), _jsx(Stack, { children: props.action }), _jsxs(Stack, { direction: "row", spacing: 2, sx: { mt: 3, justifyContent: 'flex-end' }, children: [_jsx(Button, { sx: { ...typography.labelMedium, color: colors.onSurface, backgroundColor: colors.surface, }, onClick: props.modalClose, children: "Cancel" }), _jsx(Button, { sx: { ...typography.labelMedium, color: colors.onSurface, backgroundColor: colors.surface, }, onClick: props.onConfirm, children: "Save" })] })] }) }) }));
+}

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

@@ -0,0 +1,13 @@
+import React from "react";
+interface Props {
+    modalName: string;
+    modalOpen: boolean;
+    modalTitle: string;
+    modalInformation: string;
+    children: React.ReactNode;
+    action?: React.ReactNode;
+    modalClose: () => void;
+    onConfirm: () => void;
+}
+export default function HModalMobile(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/editor/HModalMobile.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Modal, Box, Typography, Button, Stack, IconButton, CardMedia } from "@mui/material";
+import useColors from '../../themes/colors';
+export default function HModalMobile(props) {
+    const colors = useColors();
+    return (_jsx(_Fragment, { children: _jsx(Modal, { open: props.modalOpen, onClose: props.modalClose, children: _jsxs(Stack, { direction: "column", spacing: 2, height: "100%", sx: { p: "10px", backgroundColor: colors.surface }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [_jsxs(Stack, { direction: "row", justifyContent: "flex-start", alignItems: "center", spacing: 1, children: [_jsx(IconButton, { "aria-label": "close", onClick: props.modalClose, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/exit-button-modal-mobile.svg" }) }), _jsx(Typography, { variant: "h6", color: "initial", children: props.modalTitle })] }), _jsx(Button, { onClick: props.onConfirm, children: "Save" })] }), _jsx(Typography, { variant: "inherit", color: "initial", children: props.modalInformation }), _jsx(Box, { sx: { mt: 2 }, children: props.children }), _jsx(Stack, { sx: { px: "2px" }, children: props.action })] }) }) }));
+}

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

@@ -0,0 +1,7 @@
+interface Props {
+    isLoading: boolean;
+    onCancel: () => void;
+    onSubmit: () => void;
+}
+declare function HPresetDeleteDialog(props: Props): import("react/jsx-runtime").JSX.Element;
+export default HPresetDeleteDialog;

package/dist/components/editor/HPresetDelete.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ModalDialog from "../modal/HModalDialog";
+function HPresetDeleteDialog(props) {
+    return (_jsx(ModalDialog, { isOpen: true, title: "Delete preset?", description: "The preset will be permanently removed.", isLoading: props.isLoading, onCancel: props.onCancel, submitLabel: "Delete", onSubmit: props.onSubmit }));
+}
+;
+export default HPresetDeleteDialog;

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

@@ -0,0 +1,9 @@
+interface Props {
+    anchorEl: null | HTMLElement;
+    isOpen: boolean;
+    onClose: () => void;
+    onRename: () => void;
+    onDelete: () => void;
+}
+export default function HPresetOptionsMenu(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/editor/HPresetOptionMenu.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Menu, MenuItem, ListItemText, CardMedia, Stack } from "@mui/material";
+import useHonchoTypography from "../../themes/honchoTheme";
+import useColors from '../../themes/colors';
+export default function HPresetOptionsMenu(props) {
+    const typography = useHonchoTypography();
+    const colors = useColors();
+    return (_jsxs(Menu, { id: "preset-options-menu", anchorEl: props.anchorEl, open: props.isOpen, onClose: props.onClose, transformOrigin: { horizontal: 'right', vertical: 'top' }, anchorOrigin: { horizontal: 'right', vertical: 'bottom' }, slotProps: {
+            paper: {
+                sx: {
+                    backgroundColor: colors.onBackground,
+                    color: colors.surface,
+                    border: `1px solid ${colors.onSurfaceVariant1}`,
+                    '& .MuiMenuItem-root:hover': {
+                        backgroundColor: 'rgba(255, 255, 255, 0.08)',
+                    },
+                },
+            },
+        }, children: [_jsx(MenuItem, { onClick: props.onRename, children: _jsxs(Stack, { direction: "row", spacing: "10px", children: [_jsx(CardMedia, { component: "img", image: "/v1/svg/rename-menu-button.svg", sx: { width: '20px', height: '20px' } }), _jsx(ListItemText, { sx: { ...typography.bodyMedium }, children: "Rename" })] }) }), _jsx(MenuItem, { onClick: props.onDelete, children: _jsxs(Stack, { direction: "row", spacing: "10px", children: [_jsx(CardMedia, { component: "img", image: "/v1/svg/delete-menu-button.svg", sx: { width: '20px', height: '20px' } }), _jsx(ListItemText, { sx: { ...typography.bodyMedium, color: colors.error }, children: "Delete" })] }) })] }));
+}

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

@@ -0,0 +1,16 @@
+import { AdjustmentState } from '../../hooks/editor/type';
+interface Props {
+    tempScore: number;
+    tintScore: number;
+    saturationScore: number;
+    vibranceScore: number;
+    isBatchMode: boolean;
+    onTempChange: (field: keyof AdjustmentState, value: number) => void;
+    onTintChange: (field: keyof AdjustmentState, value: number) => void;
+    onVibranceChange: (field: keyof AdjustmentState, value: number) => void;
+    onSaturationChange: (field: keyof AdjustmentState, value: number) => void;
+    onDragStart: () => void;
+    onDragEnd: () => void;
+}
+export default function HSliderColorMobile(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/editor/HSliderColorMobile.js

@@ -0,0 +1,270 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Stack, Slider, Typography, TextField } from "@mui/material";
+import useHonchoTypography from "../../themes/honchoTheme";
+import useColors from '../../themes/colors';
+export default function HSliderColorMobile(props) {
+    const typography = useHonchoTypography();
+    const colors = useColors();
+    const blueScale = '#292bc0'; // Blue color on left
+    const yellowScale = '#dfdc28'; // Yellow color on right
+    const greenScale = '#00ff04';
+    const purpleScale = '#b700ff';
+    // The gradient for the *entire* background of the slider bar
+    const tempGradient = `linear-gradient(to right, ${blueScale} 35%, ${yellowScale} 75%)`;
+    const tintGradient = `linear-gradient(to right, ${greenScale} 20%, ${purpleScale} 75%)`;
+    const saturationColors = ['yellow', 'lime', 'deepskyblue', 'magenta', 'red'];
+    const greyScaleStart = '#000000'; // Black at -100
+    const greyScaleEnd = '#ffffff'; // White at 0 (or a very light grey)
+    const colorStops = saturationColors.map((color, index) => {
+        const position = 50 + (index / (saturationColors.length - 1)) * 50;
+        return `${color} ${position}%`;
+    }).join(', ');
+    // The gradient for the *entire* background of the slider bar
+    const fullTrackGradient = `linear-gradient(to right, ${greyScaleStart} 0%, ${greyScaleEnd} 50%, ${colorStops})`;
+    const focusedInputStyle = {
+        backgroundColor: "#1C1B1FB2",
+        borderRadius: '5px 5px 0px 0px',
+        borderBottom: 'none',
+        pl: '2px',
+    };
+    const formatValue = (value) => {
+        if (value > 0)
+            return `+${value}`;
+        return value.toString();
+    };
+    const handleInputChange = (event, min, max, onChange) => {
+        const value = event.target.value;
+        if (value === '+' || value === '-')
+            return;
+        let numericValue = parseInt(value, 10);
+        if (isNaN(numericValue))
+            numericValue = 0;
+        const clampedValue = Math.max(min, Math.min(max, numericValue));
+        onChange(clampedValue);
+    };
+    return (_jsx(_Fragment, { children: _jsxs(Stack, { spacing: 0, direction: "column", sx: { width: '100%', paddingX: 1, m: "0px" }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Temperature" }), _jsx(TextField, { hiddenLabel: true, id: "temperature-input", value: formatValue(props.tempScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onTempChange("tempScore", val)), sx: {
+                                width: "40px",
+                                alignItems: "center",
+                                textAlign: "right",
+                                pr: "4px",
+                                display: "flex",
+                                '& .MuiFilledInput-root': {
+                                    backgroundColor: 'transparent',
+                                    borderRadius: "0px",
+                                    border: 'none',
+                                    '&:before': {
+                                        borderBottom: 'none',
+                                    },
+                                    '&:after': {
+                                        borderBottom: 'none',
+                                    },
+                                    '&:hover:not(.Mui-disabled):before': {
+                                        borderBottom: 'none',
+                                    },
+                                    '&.Mui-focused:after': {
+                                        borderBottom: 'none',
+                                    },
+                                },
+                                '& .MuiFilledInput-input': {
+                                    textAlign: 'right',
+                                    padding: 0,
+                                    pr: '4px',
+                                    color: colors.surface,
+                                    fontSize: "14px",
+                                },
+                            } })] }), _jsx(Slider, { sx: {
+                        width: "100%",
+                        color: colors.surface,
+                        '& .MuiSlider-rail': {
+                            background: tempGradient,
+                            opacity: 1,
+                        },
+                        '& .MuiSlider-track': {
+                            background: 'transparent',
+                            border: 'none',
+                        },
+                        '& .MuiSlider-thumb': {
+                            boxShadow: 'none',
+                        }
+                    }, size: "small", value: props.tempScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onTempChange("tempScore", newValue), onDoubleClick: () => props.onTempChange("tempScore", 0), onMouseDown: () => {
+                        if (!props.isBatchMode) {
+                            props.onDragStart();
+                        }
+                    }, onMouseUp: () => {
+                        props.onDragEnd();
+                    }, onTouchStart: () => {
+                        if (!props.isBatchMode) {
+                            props.onDragStart();
+                        }
+                    }, onTouchEnd: () => {
+                        props.onDragEnd();
+                    } }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Tint" }), _jsx(TextField, { hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.tintScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onTintChange("tintScore", val)), sx: {
+                                width: "40px",
+                                alignItems: "center",
+                                textAlign: "right",
+                                pr: "4px",
+                                display: "flex",
+                                '& .MuiFilledInput-root': {
+                                    backgroundColor: 'transparent',
+                                    borderRadius: "0px",
+                                    border: 'none',
+                                    '&:before': {
+                                        borderBottom: 'none',
+                                    },
+                                    '&:after': {
+                                        borderBottom: 'none',
+                                    },
+                                    '&:hover:not(.Mui-disabled):before': {
+                                        borderBottom: 'none',
+                                    },
+                                    '&.Mui-focused:after': {
+                                        borderBottom: 'none',
+                                    },
+                                },
+                                '& .MuiFilledInput-input': {
+                                    textAlign: 'right',
+                                    padding: 0,
+                                    pr: '4px',
+                                    color: colors.surface,
+                                    fontSize: "14px",
+                                },
+                            } })] }), _jsx(Slider, { sx: {
+                        width: "100%",
+                        color: colors.surface,
+                        '& .MuiSlider-rail': {
+                            background: tintGradient,
+                            opacity: 1,
+                        },
+                        '& .MuiSlider-track': {
+                            background: 'transparent',
+                            border: 'none',
+                        },
+                        '& .MuiSlider-thumb': {
+                            boxShadow: 'none',
+                        }
+                    }, size: "small", value: props.tintScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onTintChange("tintScore", newValue), onDoubleClick: () => props.onTintChange("tintScore", 0), onMouseDown: () => {
+                        if (!props.isBatchMode) {
+                            props.onDragStart();
+                        }
+                    }, onMouseUp: () => {
+                        props.onDragEnd();
+                    }, onTouchStart: () => {
+                        if (!props.isBatchMode) {
+                            props.onDragStart();
+                        }
+                    }, onTouchEnd: () => {
+                        props.onDragEnd();
+                    } }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Vibrance" }), _jsx(TextField, { hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.vibranceScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onVibranceChange("vibranceScore", val)), sx: {
+                                width: "40px",
+                                alignItems: "center",
+                                textAlign: "right",
+                                pr: "4px",
+                                display: "flex",
+                                '& .MuiFilledInput-root': {
+                                    backgroundColor: 'transparent',
+                                    borderRadius: "0px",
+                                    border: 'none',
+                                    '&:before': {
+                                        borderBottom: 'none',
+                                    },
+                                    '&:after': {
+                                        borderBottom: 'none',
+                                    },
+                                    '&:hover:not(.Mui-disabled):before': {
+                                        borderBottom: 'none',
+                                    },
+                                    '&.Mui-focused:after': {
+                                        borderBottom: 'none',
+                                    },
+                                },
+                                '& .MuiFilledInput-input': {
+                                    textAlign: 'right',
+                                    padding: 0,
+                                    pr: '4px',
+                                    color: colors.surface,
+                                    fontSize: "14px",
+                                },
+                            } })] }), _jsx(Slider, { sx: {
+                        width: "100%",
+                        color: colors.surface,
+                        '& .MuiSlider-rail': {
+                            background: fullTrackGradient,
+                            opacity: 1,
+                        },
+                        '& .MuiSlider-track': {
+                            background: 'transparent',
+                            border: 'none',
+                        },
+                        '& .MuiSlider-thumb': {
+                            boxShadow: 'none',
+                        }
+                    }, size: "small", value: props.vibranceScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onVibranceChange("vibranceScore", newValue), onDoubleClick: () => props.onVibranceChange("vibranceScore", 0), onMouseDown: () => {
+                        if (!props.isBatchMode) {
+                            props.onDragStart();
+                        }
+                    }, onMouseUp: () => {
+                        props.onDragEnd();
+                    }, onTouchStart: () => {
+                        if (!props.isBatchMode) {
+                            props.onDragStart();
+                        }
+                    }, onTouchEnd: () => {
+                        props.onDragEnd();
+                    } }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Saturation" }), _jsx(TextField, { hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.saturationScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onSaturationChange("saturationScore", val)), sx: {
+                                width: "40px",
+                                alignItems: "center",
+                                textAlign: "right",
+                                pr: "4px",
+                                display: "flex",
+                                '& .MuiFilledInput-root': {
+                                    backgroundColor: 'transparent',
+                                    borderRadius: "0px",
+                                    border: 'none',
+                                    '&:before': {
+                                        borderBottom: 'none',
+                                    },
+                                    '&:after': {
+                                        borderBottom: 'none',
+                                    },
+                                    '&:hover:not(.Mui-disabled):before': {
+                                        borderBottom: 'none',
+                                    },
+                                    '&.Mui-focused:after': {
+                                        borderBottom: 'none',
+                                    },
+                                },
+                                '& .MuiFilledInput-input': {
+                                    textAlign: 'right',
+                                    padding: 0,
+                                    pr: '4px',
+                                    color: colors.surface,
+                                    fontSize: "14px",
+                                },
+                            } })] }), _jsx(Slider, { sx: {
+                        width: "100%",
+                        color: colors.surface,
+                        '& .MuiSlider-rail': {
+                            background: fullTrackGradient,
+                            opacity: 1,
+                        },
+                        '& .MuiSlider-track': {
+                            background: 'transparent',
+                            border: 'none',
+                        },
+                        '& .MuiSlider-thumb': {
+                            boxShadow: 'none',
+                        }
+                    }, size: "small", value: props.saturationScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onSaturationChange("saturationScore", newValue), onDoubleClick: () => props.onSaturationChange("saturationScore", 0), onMouseDown: () => {
+                        if (!props.isBatchMode) {
+                            props.onDragStart();
+                        }
+                    }, onMouseUp: () => {
+                        props.onDragEnd();
+                    }, onTouchStart: () => {
+                        if (!props.isBatchMode) {
+                            props.onDragStart();
+                        }
+                    }, onTouchEnd: () => {
+                        props.onDragEnd();
+                    } })] }) }));
+}

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

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