@yogiswara/honcho-editor-ui 3.4.17 → 3.5.1

package/dist/components/editor/HDialogCopy.js

@@ -24,7 +24,7 @@ export function HDialogCopy(props) {
         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(0deg)' : 'rotate(180deg)' } }) })] })] }), _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(0deg)' : 'rotate(180deg)' } }) })] })] }), _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 }) })] }) })] }), _jsx(Button, { onClick: props.onCopyEdit, sx: { ...typography.labelMedium, mt: '20px', height: '40px', color: colors.surface, backgroundColor: colors.onSurface, borderRadius: '100px', textTransform: 'none' }, children: "Copy" })] }));
+    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(0deg)' : 'rotate(180deg)' } }) })] })] }), _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(0deg)' : 'rotate(180deg)' } }) })] })] }), _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(0deg)' : 'rotate(180deg)' } }) })] })] }), _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: "details.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: "details.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: {
@@ -76,5 +76,5 @@ export function HDialogPreset(propsPreset) {
         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: [_jsx(Stack, { direction: "column", alignItems: "flex-start", children: _jsx(Typography, { variant: "inherit", color: "initial", children: propsPreset.descriptionOnCopy }) }), _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) => propsPreset.onParentChange(e, propsPreset.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: () => propsPreset.onToggleExpand('color'), size: "small", sx: { pt: "3px" }, children: _jsx(ExpandMoreIcon, { sx: { colors: colors.background, transition: 'transform 0.3s', transform: propsPreset.expanded.color ? 'rotate(0deg)' : 'rotate(180deg)' } }) })] })] }), _jsx(Collapse, { in: propsPreset.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: propsPreset.colorChecks.temperature, onChange: (e) => propsPreset.onChildChange(e, propsPreset.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: propsPreset.colorChecks.tint, onChange: (e) => propsPreset.onChildChange(e, propsPreset.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: propsPreset.colorChecks.vibrance, onChange: (e) => propsPreset.onChildChange(e, propsPreset.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: propsPreset.colorChecks.saturation, onChange: (e) => propsPreset.onChildChange(e, propsPreset.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) => propsPreset.onParentChange(e, propsPreset.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: () => propsPreset.onToggleExpand('light'), size: "small", sx: { pt: "3px" }, children: _jsx(ExpandMoreIcon, { sx: { transition: 'transform 0.3s', transform: propsPreset.expanded.light ? 'rotate(0deg)' : 'rotate(180deg)' } }) })] })] }), _jsx(Collapse, { in: propsPreset.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: propsPreset.lightChecks.exposure, onChange: (e) => propsPreset.onChildChange(e, propsPreset.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: propsPreset.lightChecks.contrast, onChange: (e) => propsPreset.onChildChange(e, propsPreset.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: propsPreset.lightChecks.highlights, onChange: (e) => propsPreset.onChildChange(e, propsPreset.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: propsPreset.lightChecks.shadows, onChange: (e) => propsPreset.onChildChange(e, propsPreset.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: propsPreset.lightChecks.whites, onChange: (e) => propsPreset.onChildChange(e, propsPreset.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: propsPreset.lightChecks.blacks, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setLightChecks), sx: checkboxStyle }) })] }) })] })] }));
+    return (_jsxs(Stack, { direction: "column", spacing: 1, sx: { padding: 0, margin: 0, width: '100%' }, children: [_jsxs(Stack, { children: [_jsx(Stack, { direction: "column", alignItems: "flex-start", children: _jsx(Typography, { variant: "inherit", color: "initial", children: propsPreset.descriptionOnCopy }) }), _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) => propsPreset.onParentChange(e, propsPreset.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: () => propsPreset.onToggleExpand('color'), size: "small", sx: { pt: "3px" }, children: _jsx(ExpandMoreIcon, { sx: { colors: colors.background, transition: 'transform 0.3s', transform: propsPreset.expanded.color ? 'rotate(0deg)' : 'rotate(180deg)' } }) })] })] }), _jsx(Collapse, { in: propsPreset.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: propsPreset.colorChecks.temperature, onChange: (e) => propsPreset.onChildChange(e, propsPreset.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: propsPreset.colorChecks.tint, onChange: (e) => propsPreset.onChildChange(e, propsPreset.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: propsPreset.colorChecks.vibrance, onChange: (e) => propsPreset.onChildChange(e, propsPreset.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: propsPreset.colorChecks.saturation, onChange: (e) => propsPreset.onChildChange(e, propsPreset.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) => propsPreset.onParentChange(e, propsPreset.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: () => propsPreset.onToggleExpand('light'), size: "small", sx: { pt: "3px" }, children: _jsx(ExpandMoreIcon, { sx: { transition: 'transform 0.3s', transform: propsPreset.expanded.light ? 'rotate(0deg)' : 'rotate(180deg)' } }) })] })] }), _jsx(Collapse, { in: propsPreset.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: propsPreset.lightChecks.exposure, onChange: (e) => propsPreset.onChildChange(e, propsPreset.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: propsPreset.lightChecks.contrast, onChange: (e) => propsPreset.onChildChange(e, propsPreset.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: propsPreset.lightChecks.highlights, onChange: (e) => propsPreset.onChildChange(e, propsPreset.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: propsPreset.lightChecks.shadows, onChange: (e) => propsPreset.onChildChange(e, propsPreset.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: propsPreset.lightChecks.whites, onChange: (e) => propsPreset.onChildChange(e, propsPreset.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: propsPreset.lightChecks.blacks, onChange: (e) => propsPreset.onChildChange(e, propsPreset.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) => propsPreset.onParentChange(e, propsPreset.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: () => propsPreset.onToggleExpand('details'), size: "small", sx: { pt: "3px" }, children: _jsx(ExpandMoreIcon, { sx: { transition: 'transform 0.3s', transform: propsPreset.expanded.details ? 'rotate(0deg)' : 'rotate(180deg)' } }) })] })] }), _jsx(Collapse, { in: propsPreset.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: "details.clarity", checked: propsPreset.detailsChecks.clarity, onChange: (e) => propsPreset.onChildChange(e, propsPreset.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: "details.sharpness", checked: propsPreset.detailsChecks.sharpness, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setDetailsChecks), sx: checkboxStyle }) })] }) })] })] }));
 }

package/dist/components/editor/HImageEditorBulkMobile.js

@@ -9,7 +9,7 @@ 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"},
+        { value: "details", label: "Details", inactiveIcon: "/v1/svg/details-inactive-mobile.svg", activeIcon: "/v1/svg/details-active-mobile.svg" },
     ],
     aspectRatio: [
         { value: "portrait", label: "Portrait" },

package/dist/components/editor/HImageEditorMobile.js

@@ -9,7 +9,7 @@ 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"},
+        { value: "details", label: "Details", inactiveIcon: "/v1/svg/details-inactive-mobile.svg", activeIcon: "/v1/svg/details-active-mobile.svg" },
     ],
     aspectRatio: [
         { value: "portrait", label: "Portrait" },

package/dist/components/editor/HSliderDetailsMobile.js

@@ -1,154 +1,155 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Stack, Slider, Typography, TextField } from "@mui/material";
+import { useEffect, useState } from "react";
+import { Stack, Slider, Typography, Box } from "@mui/material";
 import useHonchoTypography from "../../themes/honchoTheme";
 import useColors from '../../themes/colors';
-export default function HSliderDetailsMobile(props) {
-    const typography = useHonchoTypography();
-    const colors = useColors();
-    const formatValue = (value) => {
-        if (value > 0)
-            return `+${value}`;
+import useSliderEvents from "../editor/sliderComponents/useSliderEvents";
+const formatValue = (value) => {
+    if (value > 0)
+        return `+${value}`;
+    if (value < 0)
         return value.toString();
-    };
-    const handleInputChange = (event, min, max, onChange) => {
-        const value = event.target.value;
-        if (value === '+' || value === '-')
+    return "0";
+};
+function useAdjustmentField(propValue, setValue, onDragStart, onDragEnd, isBatchMode) {
+    const [local, setLocal] = useState(formatValue(propValue));
+    const [started, setStarted] = useState(false);
+    // keep sync with external changes
+    useEffect(() => {
+        setLocal(formatValue(propValue));
+    }, [propValue]);
+    const handleChange = (e, min, max) => {
+        const raw = e.target.value;
+        setLocal(raw);
+        if (raw === "" || raw === "+" || raw === "-")
             return;
-        let numericValue = parseInt(value, 10);
-        if (isNaN(numericValue))
-            numericValue = 0;
-        const clampedValue = Math.max(min, Math.min(max, numericValue));
-        onChange(clampedValue);
+        let num = parseInt(raw, 10);
+        if (isNaN(num))
+            return;
+        num = Math.max(min, Math.min(max, num));
+        // start batch on first valid change
+        if (!started && !isBatchMode) {
+            onDragStart();
+            console.log("[MOBILE UI] Starting batch: ", onDragStart);
+            setStarted(true);
+        }
+        setValue(num);
+    };
+    const handleDoubleClick = () => {
+        if (!isBatchMode) {
+            onDragStart();
+        }
+        setLocal("0");
+        setValue(0);
+        if (!isBatchMode) {
+            console.log("[MOBILE UI] ending batch: ", onDragEnd);
+            onDragEnd();
+        }
+    };
+    const handleBlur = (min, max) => {
+        if (local === "" || local === "+" || local === "-") {
+            setLocal("0");
+            setValue(0);
+        }
+        else {
+            let num = parseInt(local, 10);
+            if (isNaN(num))
+                num = 0;
+            num = Math.max(min, Math.min(max, num));
+            setLocal(formatValue(num));
+            setValue(num);
+        }
+        // end batch when user leaves field
+        if (started) {
+            onDragEnd();
+            setStarted(false);
+        }
     };
-    return (_jsx(_Fragment, { children: _jsxs(Stack, { spacing: 0, direction: "column", sx: { width: '100%', paddingX: 1 }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Clarity" }), _jsx(TextField, { hiddenLabel: true, InputProps: { readOnly: true }, id: "filled-hidden-label-small", value: formatValue(props.clarityScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onClarityChange("clarityScore", 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',
-                                    },
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter") {
+            e.target.blur(); // blur the actual input
+            if (started) {
+                onDragEnd();
+                setStarted(false);
+            }
+        }
+    };
+    return { local, handleChange, handleBlur, handleKeyDown, handleDoubleClick };
+}
+export default function HSliderDetailsMobile(props) {
+    const typography = useHonchoTypography();
+    const colors = useColors();
+    const clarityRef = useSliderEvents(props.onDragStart, props.onDragEnd, props.isBatchMode);
+    const sharpnessRef = useSliderEvents(props.onDragStart, props.onDragEnd, props.isBatchMode);
+    const clarityInput = useAdjustmentField(props.clarityScore, (val) => props.onClarityChange("clarityScore", val), props.onDragStart, props.onDragEnd, props.isBatchMode);
+    const sharpnessInput = useAdjustmentField(props.sharpnessScore, (val) => props.onSharpnessChange("sharpnessScore", val), props.onDragStart, props.onDragEnd, props.isBatchMode);
+    return (_jsx(_Fragment, { children: _jsxs(Stack, { spacing: 0, direction: "column", sx: { width: '100%', paddingX: 1, m: "0px", userSelect: 'none' }, onTouchStart: (e) => e.stopPropagation(), children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface, userSelect: 'none' }, onDoubleClick: clarityInput.handleDoubleClick, children: "Clarity" }), _jsx(Typography, { sx: {
+                                ...typography.bodyMedium, // Use your standard typography
+                                color: colors.surface,
+                                width: "40px", // Keep the fixed width for alignment
+                                textAlign: "right", // Keep the text alignment
+                            }, children: formatValue(props.clarityScore) })] }), _jsxs(Box, { sx: { position: 'relative', width: '100%' }, children: [_jsx("div", { style: {
+                                position: 'absolute',
+                                top: "-5px",
+                                bottom: "-5px",
+                                // Offset by 16px to align with the slider's track inside the component
+                                left: 0,
+                                right: 0,
+                                zIndex: 1,
+                                touchAction: 'pan-y', // ✅ 1. Add this to make double-tap reliable on mobile
+                                userSelect: 'none',
+                            } }), _jsx(Slider, { sx: {
+                                width: "100%",
+                                color: colors.onSurfaceVariant,
+                                '& .MuiSlider-rail': {
+                                    background: colors.onSurfaceVariant,
+                                    opacity: 1,
                                 },
-                                '& .MuiFilledInput-input': {
-                                    textAlign: 'right',
-                                    padding: 0,
-                                    pr: '4px',
-                                    color: colors.surface,
-                                    fontSize: "14px",
+                                '& .MuiSlider-thumb': {
+                                    background: colors.surface,
+                                    opacity: 1,
                                 },
-                                '& .Mui-focused': {
-                                    '& .MuiFilledInput-input': {
-                                        backgroundColor: "#1C1B1FB2",
-                                        textAlign: 'right',
-                                        borderRadius: '5px 5px 0px 0px',
-                                        borderBottom: 'none',
-                                        pl: '2px',
-                                    }
+                                '& .MuiSlider-thumb:hover': {
+                                    boxShadow: 'none',
+                                }
+                            }, slotProps: {
+                                thumb: {
+                                    ref: clarityRef,
+                                    onDoubleClick: clarityInput.handleDoubleClick
                                 }
-                            } })] }), _jsx(Slider, { sx: {
-                        width: "100%",
-                        color: colors.onSurfaceVariant,
-                        '& .MuiSlider-rail': {
-                            background: colors.onSurfaceVariant,
-                            opacity: 1,
-                        },
-                        '& .MuiSlider-thumb': {
-                            background: colors.surface,
-                            opacity: 1,
-                        },
-                        '& .MuiSlider-thumb:hover': {
-                            boxShadow: 'none',
-                        }
-                    }, size: "small", value: props.clarityScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onClarityChange("clarityScore", newValue), onDoubleClick: () => props.onClarityChange("clarityScore", 0), onMouseDown: () => {
-                        if (!props.isBatchMode) {
-                            props.onDragStart();
-                        }
-                    }, onMouseUp: () => {
-                        props.onDragEnd();
-                    }, onTouchStart: () => {
-                        if (!props.isBatchMode) {
-                            props.onDragStart();
-                        }
-                    }, onTouchEnd: () => {
-                        props.onDragEnd();
-                    } }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Sharpness" }), _jsx(TextField, { hiddenLabel: true, InputProps: { readOnly: true }, id: "filled-hidden-label-small", value: formatValue(props.sharpnessScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onSharpnessChange("sharpnessScore", 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',
-                                    },
+                            }, size: "small", value: props.clarityScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onClarityChange("clarityScore", newValue) })] }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface, userSelect: 'none' }, onDoubleClick: sharpnessInput.handleDoubleClick, children: "Sharpness" }), _jsx(Typography, { sx: {
+                                ...typography.bodyMedium, // Use your standard typography
+                                color: colors.surface,
+                                width: "40px", // Keep the fixed width for alignment
+                                textAlign: "right", // Keep the text alignment
+                            }, children: formatValue(props.sharpnessScore) })] }), _jsxs(Box, { sx: { position: 'relative', width: '100%' }, children: [_jsx("div", { style: {
+                                position: 'absolute',
+                                top: "-5px",
+                                bottom: "-5px",
+                                // Offset by 16px to align with the slider's track inside the component
+                                left: 0,
+                                right: 0,
+                                zIndex: 1,
+                                touchAction: 'pan-y', // ✅ 1. Add this to make double-tap reliable on mobile
+                                userSelect: 'none',
+                            } }), _jsx(Slider, { sx: {
+                                width: "100%",
+                                color: colors.onSurfaceVariant,
+                                '& .MuiSlider-rail': {
+                                    background: colors.onSurfaceVariant,
+                                    opacity: 1,
                                 },
-                                '& .MuiFilledInput-input': {
-                                    textAlign: 'right',
-                                    padding: 0,
-                                    pr: '4px',
-                                    color: colors.surface,
-                                    fontSize: "14px",
+                                '& .MuiSlider-thumb': {
+                                    background: colors.surface,
+                                    opacity: 1,
                                 },
-                                '& .Mui-focused': {
-                                    '& .MuiFilledInput-input': {
-                                        backgroundColor: "#1C1B1FB2",
-                                        textAlign: 'right',
-                                        borderRadius: '5px 5px 0px 0px',
-                                        borderBottom: 'none',
-                                        pl: '2px',
-                                    }
+                                '& .MuiSlider-thumb:hover': {
+                                    boxShadow: 'none',
+                                }
+                            }, slotProps: {
+                                thumb: {
+                                    ref: sharpnessRef,
+                                    onDoubleClick: sharpnessInput.handleDoubleClick
                                 }
-                            } })] }), _jsx(Slider, { sx: {
-                        width: "100%",
-                        color: colors.onSurfaceVariant,
-                        '& .MuiSlider-rail': {
-                            background: colors.onSurfaceVariant,
-                            opacity: 1,
-                        },
-                        '& .MuiSlider-thumb': {
-                            background: colors.surface,
-                            opacity: 1,
-                        },
-                        '& .MuiSlider-thumb:hover': {
-                            boxShadow: 'none',
-                        }
-                    }, size: "small", value: props.sharpnessScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onSharpnessChange("sharpnessScore", newValue), onDoubleClick: () => props.onSharpnessChange("sharpnessScore", 0), onMouseDown: () => {
-                        if (!props.isBatchMode) {
-                            props.onDragStart();
-                        }
-                    }, onMouseUp: () => {
-                        props.onDragEnd();
-                    }, onTouchStart: () => {
-                        if (!props.isBatchMode) {
-                            props.onDragStart();
-                        }
-                    }, onTouchEnd: () => {
-                        props.onDragEnd();
-                    } })] }) }));
+                            }, size: "small", value: props.clarityScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onSharpnessChange("clarityScore", newValue) })] })] }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yogiswara/honcho-editor-ui",
-  "version": "3.4.17",
+  "version": "3.5.1",
   "description": "A complete UI component library for the Honcho photo editor.",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",