@yogiswara/honcho-editor-ui 2.10.11 → 2.10.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/components/editor/HSliderColorMobile.js +37 -125
  2. package/dist/components/editor/HSliderLightMobile.js +55 -241
  3. package/package.json +1 -1
package/dist/components/editor/HSliderColorMobile.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
- import { Stack, Slider, Typography, TextField } from "@mui/material";
2
+ import { Stack, Slider, Typography } from "@mui/material";
3
3
  import useHonchoTypography from "../../themes/honchoTheme";
4
4
  import useColors from '../../themes/colors';
5
5
  import useSliderEvents from "../editor/sliderComponents/useSliderEvents";
@@ -47,181 +47,93 @@ export default function HSliderColorMobile(props) {
47
47
  const clampedValue = Math.max(min, Math.min(max, numericValue));
48
48
  onChange(clampedValue);
49
49
  };
50
- 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 }, onDoubleClick: () => props.onTempChange("tempScore", 0), children: "Temperature" }), _jsx(TextField, { InputProps: { readOnly: true }, hiddenLabel: true, id: "temperature-input", value: formatValue(props.tempScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onTempChange("tempScore", val)), sx: {
51
- width: "40px",
52
- alignItems: "center",
53
- textAlign: "right",
54
- pr: "4px",
55
- display: "flex",
56
- '& .MuiFilledInput-root': {
57
- backgroundColor: 'transparent',
58
- borderRadius: "0px",
59
- border: 'none',
60
- '&:before': {
61
- borderBottom: 'none',
62
- },
63
- '&:after': {
64
- borderBottom: 'none',
65
- },
66
- '&:hover:not(.Mui-disabled):before': {
67
- borderBottom: 'none',
68
- },
69
- '&.Mui-focused:after': {
70
- borderBottom: 'none',
71
- },
72
- },
73
- '& .MuiFilledInput-input': {
74
- textAlign: 'right',
75
- padding: 0,
76
- pr: '4px',
77
- color: colors.surface,
78
- fontSize: "14px",
79
- },
80
- } })] }), _jsx(Slider, { ref: tempSliderRef, sx: {
50
+ 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 }, onDoubleClick: () => props.onTempChange("tempScore", 0), children: "Temperature" }), _jsx(Typography, { sx: {
51
+ ...typography.bodyMedium, // Use your standard typography
52
+ color: colors.surface,
53
+ width: "40px", // Keep the fixed width for alignment
54
+ textAlign: "right", // Keep the text alignment
55
+ }, children: formatValue(props.tempScore) })] }), _jsx(Slider, { ref: tempSliderRef, sx: {
81
56
  width: "100%",
82
57
  color: colors.surface,
83
58
  '& .MuiSlider-rail': {
84
59
  background: tempGradient,
85
60
  opacity: 1,
61
+ pointerEvents: 'none', // Make the rail non-interactive
86
62
  },
87
63
  '& .MuiSlider-track': {
88
64
  background: 'transparent',
89
65
  border: 'none',
66
+ pointerEvents: 'none', // Make the track non-interactive
90
67
  },
91
68
  '& .MuiSlider-thumb': {
92
69
  boxShadow: 'none',
70
+ pointerEvents: 'auto', // IMPORTANT: Re-enable interaction ONLY for the thumb
93
71
  }
94
- }, size: "small", value: props.tempScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onTempChange("tempScore", newValue), onDoubleClick: () => props.onTempChange("tempScore", 0) }), _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 }, onDoubleClick: () => props.onTintChange("tintScore", 0), children: "Tint" }), _jsx(TextField, { InputProps: { readOnly: true }, 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: {
95
- width: "40px",
96
- alignItems: "center",
97
- textAlign: "right",
98
- pr: "4px",
99
- display: "flex",
100
- '& .MuiFilledInput-root': {
101
- backgroundColor: 'transparent',
102
- borderRadius: "0px",
103
- border: 'none',
104
- '&:before': {
105
- borderBottom: 'none',
106
- },
107
- '&:after': {
108
- borderBottom: 'none',
109
- },
110
- '&:hover:not(.Mui-disabled):before': {
111
- borderBottom: 'none',
112
- },
113
- '&.Mui-focused:after': {
114
- borderBottom: 'none',
115
- },
116
- },
117
- '& .MuiFilledInput-input': {
118
- textAlign: 'right',
119
- padding: 0,
120
- pr: '4px',
121
- color: colors.surface,
122
- fontSize: "14px",
123
- },
124
- } })] }), _jsx(Slider, { ref: tintSliderRef, sx: {
72
+ }, size: "small", value: props.tempScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onTempChange("tempScore", newValue), onDoubleClick: () => props.onTempChange("tempScore", 0) }), _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 }, onDoubleClick: () => props.onTintChange("tintScore", 0), children: "Tint" }), _jsx(Typography, { sx: {
73
+ ...typography.bodyMedium, // Use your standard typography
74
+ color: colors.surface,
75
+ width: "40px", // Keep the fixed width for alignment
76
+ textAlign: "right", // Keep the text alignment
77
+ }, children: formatValue(props.tintScore) })] }), _jsx(Slider, { ref: tintSliderRef, sx: {
125
78
  width: "100%",
126
79
  color: colors.surface,
127
80
  '& .MuiSlider-rail': {
128
81
  background: tintGradient,
129
82
  opacity: 1,
83
+ pointerEvents: 'none',
130
84
  },
131
85
  '& .MuiSlider-track': {
132
86
  background: 'transparent',
133
87
  border: 'none',
88
+ pointerEvents: 'none',
134
89
  },
135
90
  '& .MuiSlider-thumb': {
136
91
  boxShadow: 'none',
92
+ pointerEvents: 'auto',
137
93
  }
138
- }, size: "small", value: props.tintScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onTintChange("tintScore", newValue), onDoubleClick: () => props.onTintChange("tintScore", 0) }), _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 }, onDoubleClick: () => props.onVibranceChange("vibranceScore", 0), children: "Vibrance" }), _jsx(TextField, { InputProps: { readOnly: true }, 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: {
139
- width: "40px",
140
- alignItems: "center",
141
- textAlign: "right",
142
- pr: "4px",
143
- display: "flex",
144
- '& .MuiFilledInput-root': {
145
- backgroundColor: 'transparent',
146
- borderRadius: "0px",
147
- border: 'none',
148
- '&:before': {
149
- borderBottom: 'none',
150
- },
151
- '&:after': {
152
- borderBottom: 'none',
153
- },
154
- '&:hover:not(.Mui-disabled):before': {
155
- borderBottom: 'none',
156
- },
157
- '&.Mui-focused:after': {
158
- borderBottom: 'none',
159
- },
160
- },
161
- '& .MuiFilledInput-input': {
162
- textAlign: 'right',
163
- padding: 0,
164
- pr: '4px',
165
- color: colors.surface,
166
- fontSize: "14px",
167
- },
168
- } })] }), _jsx(Slider, { ref: vibranceSliderRef, sx: {
94
+ }, size: "small", value: props.tintScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onTintChange("tintScore", newValue), onDoubleClick: () => props.onTintChange("tintScore", 0) }), _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 }, onDoubleClick: () => props.onVibranceChange("vibranceScore", 0), children: "Vibrance" }), _jsx(Typography, { sx: {
95
+ ...typography.bodyMedium, // Use your standard typography
96
+ color: colors.surface,
97
+ width: "40px", // Keep the fixed width for alignment
98
+ textAlign: "right", // Keep the text alignment
99
+ }, children: formatValue(props.vibranceScore) })] }), _jsx(Slider, { ref: vibranceSliderRef, sx: {
169
100
  width: "100%",
170
101
  color: colors.surface,
171
102
  '& .MuiSlider-rail': {
172
103
  background: fullTrackGradient,
173
104
  opacity: 1,
105
+ pointerEvents: 'none',
174
106
  },
175
107
  '& .MuiSlider-track': {
176
108
  background: 'transparent',
177
109
  border: 'none',
110
+ pointerEvents: 'none',
178
111
  },
179
112
  '& .MuiSlider-thumb': {
180
113
  boxShadow: 'none',
114
+ pointerEvents: 'auto',
181
115
  }
182
- }, size: "small", value: props.vibranceScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onVibranceChange("vibranceScore", newValue), onDoubleClick: () => props.onVibranceChange("vibranceScore", 0) }), _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 }, onDoubleClick: () => props.onSaturationChange("saturationScore", 0), children: "Saturation" }), _jsx(TextField, { InputProps: { readOnly: true }, 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: {
183
- width: "40px",
184
- alignItems: "center",
185
- textAlign: "right",
186
- pr: "4px",
187
- display: "flex",
188
- '& .MuiFilledInput-root': {
189
- backgroundColor: 'transparent',
190
- borderRadius: "0px",
191
- border: 'none',
192
- '&:before': {
193
- borderBottom: 'none',
194
- },
195
- '&:after': {
196
- borderBottom: 'none',
197
- },
198
- '&:hover:not(.Mui-disabled):before': {
199
- borderBottom: 'none',
200
- },
201
- '&.Mui-focused:after': {
202
- borderBottom: 'none',
203
- },
204
- },
205
- '& .MuiFilledInput-input': {
206
- textAlign: 'right',
207
- padding: 0,
208
- pr: '4px',
209
- color: colors.surface,
210
- fontSize: "14px",
211
- },
212
- } })] }), _jsx(Slider, { ref: saturationSliderRef, sx: {
116
+ }, size: "small", value: props.vibranceScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onVibranceChange("vibranceScore", newValue), onDoubleClick: () => props.onVibranceChange("vibranceScore", 0) }), _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 }, onDoubleClick: () => props.onSaturationChange("saturationScore", 0), children: "Saturation" }), _jsx(Typography, { sx: {
117
+ ...typography.bodyMedium, // Use your standard typography
118
+ color: colors.surface,
119
+ width: "40px", // Keep the fixed width for alignment
120
+ textAlign: "right", // Keep the text alignment
121
+ }, children: formatValue(props.saturationScore) })] }), _jsx(Slider, { ref: saturationSliderRef, sx: {
213
122
  width: "100%",
214
123
  color: colors.surface,
215
124
  '& .MuiSlider-rail': {
216
125
  background: fullTrackGradient,
217
126
  opacity: 1,
127
+ pointerEvents: 'none',
218
128
  },
219
129
  '& .MuiSlider-track': {
220
130
  background: 'transparent',
221
131
  border: 'none',
132
+ pointerEvents: 'none',
222
133
  },
223
134
  '& .MuiSlider-thumb': {
224
135
  boxShadow: 'none',
136
+ pointerEvents: 'auto',
225
137
  }
226
138
  }, size: "small", value: props.saturationScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onSaturationChange("saturationScore", newValue), onDoubleClick: () => props.onSaturationChange("saturationScore", 0) })] }) }));
227
139
  }
package/dist/components/editor/HSliderLightMobile.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
- import { Stack, Slider, Typography, TextField } from "@mui/material";
2
+ import { Stack, Slider, Typography } from "@mui/material";
3
3
  import useHonchoTypography from "../../themes/honchoTheme";
4
4
  import useColors from '../../themes/colors';
5
5
  import useSliderEvents from "../editor/sliderComponents/useSliderEvents";
@@ -27,329 +27,143 @@ export default function HSliderLightMobile(props) {
27
27
  const clampedValue = Math.max(min, Math.min(max, numericValue));
28
28
  onChange(clampedValue);
29
29
  };
30
- 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 }, onDoubleClick: () => props.onExposureChange("exposureScore", 0), children: "Exposure" }), _jsx(TextField, { InputProps: { readOnly: true }, hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.exposureScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onExposureChange("exposureScore", val)), sx: {
31
- width: "40px",
32
- alignItems: "center",
33
- textAlign: "right",
34
- pr: "4px",
35
- display: "flex",
36
- '& .MuiFilledInput-root': {
37
- backgroundColor: 'transparent',
38
- borderRadius: "0px",
39
- border: 'none',
40
- '&:before': {
41
- borderBottom: 'none',
42
- },
43
- '&:after': {
44
- borderBottom: 'none',
45
- },
46
- '&:hover:not(.Mui-disabled):before': {
47
- borderBottom: 'none',
48
- },
49
- '&.Mui-focused:after': {
50
- borderBottom: 'none',
51
- },
52
- },
53
- '& .MuiFilledInput-input': {
54
- textAlign: 'right',
55
- padding: 0,
56
- pr: '4px',
57
- color: colors.surface,
58
- fontSize: "14px",
59
- },
60
- '& .Mui-focused': {
61
- '& .MuiFilledInput-input': {
62
- backgroundColor: "#1C1B1FB2",
63
- textAlign: 'right',
64
- borderRadius: '5px 5px 0px 0px',
65
- borderBottom: 'none',
66
- pl: '2px',
67
- }
68
- }
69
- } })] }), _jsx(Slider, { ref: exposureSliderRef, sx: {
30
+ 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 }, onDoubleClick: () => props.onExposureChange("exposureScore", 0), children: "Exposure" }), _jsx(Typography, { sx: {
31
+ ...typography.bodyMedium, // Use your standard typography
32
+ color: colors.surface,
33
+ width: "40px", // Keep the fixed width for alignment
34
+ textAlign: "right", // Keep the text alignment
35
+ }, children: formatValue(props.exposureScore) })] }), _jsx(Slider, { ref: exposureSliderRef, sx: {
70
36
  width: "100%",
71
37
  color: colors.onSurfaceVariant,
72
38
  '& .MuiSlider-rail': {
73
39
  background: colors.onSurfaceVariant,
74
40
  opacity: 1,
41
+ pointerEvents: 'none',
75
42
  },
76
43
  '& .MuiSlider-thumb': {
77
44
  background: colors.surface,
78
45
  boxShadow: 'none',
79
46
  opacity: 1,
47
+ pointerEvents: 'auto',
80
48
  },
81
49
  '& .MuiSlider-thumb:hover': {
82
50
  boxShadow: 'none',
51
+ pointerEvents: 'auto',
83
52
  }
84
- }, size: "small", value: props.exposureScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onExposureChange("exposureScore", newValue), onDoubleClick: () => props.onExposureChange("exposureScore", 0) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Contrast" }), _jsx(TextField, { InputProps: { readOnly: true }, hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.contrastScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onContrastChange("contrastScore", val)), sx: {
85
- width: "40px",
86
- alignItems: "center",
87
- textAlign: "right",
88
- pr: "4px",
89
- display: "flex",
90
- '& .MuiFilledInput-root': {
91
- backgroundColor: 'transparent',
92
- borderRadius: "0px",
93
- border: 'none',
94
- '&:before': {
95
- borderBottom: 'none',
96
- },
97
- '&:after': {
98
- borderBottom: 'none',
99
- },
100
- '&:hover:not(.Mui-disabled):before': {
101
- borderBottom: 'none',
102
- },
103
- '&.Mui-focused:after': {
104
- borderBottom: 'none',
105
- },
106
- },
107
- '& .MuiFilledInput-input': {
108
- textAlign: 'right',
109
- padding: 0,
110
- pr: '4px',
111
- color: colors.surface,
112
- fontSize: "14px",
113
- },
114
- '& .Mui-focused': {
115
- '& .MuiFilledInput-input': {
116
- backgroundColor: "#1C1B1FB2",
117
- textAlign: 'right',
118
- borderRadius: '5px 5px 0px 0px',
119
- borderBottom: 'none',
120
- pl: '2px',
121
- }
122
- }
123
- } })] }), _jsx(Slider, { ref: contrastSliderRef, sx: {
53
+ }, size: "small", value: props.exposureScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onExposureChange("exposureScore", newValue), onDoubleClick: () => props.onExposureChange("exposureScore", 0) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Contrast" }), _jsx(Typography, { sx: {
54
+ ...typography.bodyMedium, // Use your standard typography
55
+ color: colors.surface,
56
+ width: "40px", // Keep the fixed width for alignment
57
+ textAlign: "right", // Keep the text alignment
58
+ }, children: formatValue(props.contrastScore) })] }), _jsx(Slider, { ref: contrastSliderRef, sx: {
124
59
  width: "100%",
125
60
  color: colors.onSurfaceVariant,
126
61
  '& .MuiSlider-rail': {
127
62
  background: colors.onSurfaceVariant,
128
63
  opacity: 1,
64
+ pointerEvents: 'none',
129
65
  },
130
66
  '& .MuiSlider-thumb': {
131
67
  background: colors.surface,
132
68
  boxShadow: 'none',
133
69
  opacity: 1,
70
+ pointerEvents: 'auto',
134
71
  },
135
72
  '& .MuiSlider-thumb:hover': {
136
73
  boxShadow: 'none',
74
+ pointerEvents: 'auto',
137
75
  }
138
- }, size: "small", value: props.contrastScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onContrastChange("contrastScore", newValue), onDoubleClick: () => props.onContrastChange("contrastScore", 0) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onHighlightsChange("highlightsScore", 0), children: "Highlights" }), _jsx(TextField, { InputProps: { readOnly: true }, hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.highlightsScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onHighlightsChange("highlightsScore", val)), sx: {
139
- width: "40px",
140
- alignItems: "center",
141
- textAlign: "right",
142
- pr: "4px",
143
- display: "flex",
144
- '& .MuiFilledInput-root': {
145
- backgroundColor: 'transparent',
146
- borderRadius: "0px",
147
- border: 'none',
148
- '&:before': {
149
- borderBottom: 'none',
150
- },
151
- '&:after': {
152
- borderBottom: 'none',
153
- },
154
- '&:hover:not(.Mui-disabled):before': {
155
- borderBottom: 'none',
156
- },
157
- '&.Mui-focused:after': {
158
- borderBottom: 'none',
159
- },
160
- },
161
- '& .MuiFilledInput-input': {
162
- textAlign: 'right',
163
- padding: 0,
164
- pr: '4px',
165
- color: colors.surface,
166
- fontSize: "14px",
167
- },
168
- '& .Mui-focused': {
169
- '& .MuiFilledInput-input': {
170
- backgroundColor: "#1C1B1FB2",
171
- textAlign: 'right',
172
- borderRadius: '5px 5px 0px 0px',
173
- borderBottom: 'none',
174
- pl: '2px',
175
- }
176
- }
177
- } })] }), _jsx(Slider, { ref: highlightsSliderRef, sx: {
76
+ }, size: "small", value: props.contrastScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onContrastChange("contrastScore", newValue), onDoubleClick: () => props.onContrastChange("contrastScore", 0) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onHighlightsChange("highlightsScore", 0), children: "Highlights" }), _jsx(Typography, { sx: {
77
+ ...typography.bodyMedium, // Use your standard typography
78
+ color: colors.surface,
79
+ width: "40px", // Keep the fixed width for alignment
80
+ textAlign: "right", // Keep the text alignment
81
+ }, children: formatValue(props.highlightsScore) })] }), _jsx(Slider, { ref: highlightsSliderRef, sx: {
178
82
  width: "100%",
179
83
  color: colors.onSurfaceVariant,
180
84
  '& .MuiSlider-rail': {
181
85
  background: colors.onSurfaceVariant,
182
86
  opacity: 1,
87
+ pointerEvents: 'none',
183
88
  },
184
89
  '& .MuiSlider-thumb': {
185
90
  background: colors.surface,
186
91
  boxShadow: 'none',
187
92
  opacity: 1,
93
+ pointerEvents: 'auto',
188
94
  },
189
95
  '& .MuiSlider-thumb:hover': {
190
96
  boxShadow: 'none',
97
+ pointerEvents: 'auto',
191
98
  }
192
- }, size: "small", value: props.highlightsScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onHighlightsChange("highlightsScore", newValue), onDoubleClick: () => props.onHighlightsChange("highlightsScore", 0) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onShadowsChange("shadowsScore", 0), children: "Shadows" }), _jsx(TextField, { InputProps: { readOnly: true }, hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.shadowScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onShadowsChange("shadowsScore", val)), sx: {
193
- width: "40px",
194
- alignItems: "center",
195
- textAlign: "right",
196
- pr: "4px",
197
- display: "flex",
198
- '& .MuiFilledInput-root': {
199
- backgroundColor: 'transparent',
200
- borderRadius: "0px",
201
- border: 'none',
202
- '&:before': {
203
- borderBottom: 'none',
204
- },
205
- '&:after': {
206
- borderBottom: 'none',
207
- },
208
- '&:hover:not(.Mui-disabled):before': {
209
- borderBottom: 'none',
210
- },
211
- '&.Mui-focused:after': {
212
- borderBottom: 'none',
213
- },
214
- },
215
- '& .MuiFilledInput-input': {
216
- textAlign: 'right',
217
- padding: 0,
218
- pr: '4px',
219
- color: colors.surface,
220
- fontSize: "14px",
221
- },
222
- '& .Mui-focused': {
223
- '& .MuiFilledInput-input': {
224
- backgroundColor: "#1C1B1FB2",
225
- textAlign: 'right',
226
- borderRadius: '5px 5px 0px 0px',
227
- borderBottom: 'none',
228
- pl: '2px',
229
- }
230
- }
231
- } })] }), _jsx(Slider, { ref: shadowsSliderRef, sx: {
99
+ }, size: "small", value: props.highlightsScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onHighlightsChange("highlightsScore", newValue), onDoubleClick: () => props.onHighlightsChange("highlightsScore", 0) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onShadowsChange("shadowsScore", 0), children: "Shadows" }), _jsx(Typography, { sx: {
100
+ ...typography.bodyMedium, // Use your standard typography
101
+ color: colors.surface,
102
+ width: "40px", // Keep the fixed width for alignment
103
+ textAlign: "right", // Keep the text alignment
104
+ }, children: formatValue(props.shadowScore) })] }), _jsx(Slider, { ref: shadowsSliderRef, sx: {
232
105
  width: "100%",
233
106
  color: colors.onSurfaceVariant,
234
107
  '& .MuiSlider-rail': {
235
108
  background: colors.onSurfaceVariant,
236
109
  opacity: 1,
110
+ pointerEvents: 'none',
237
111
  },
238
112
  '& .MuiSlider-thumb': {
239
113
  background: colors.surface,
240
114
  boxShadow: 'none',
241
115
  opacity: 1,
116
+ pointerEvents: 'auto',
242
117
  },
243
118
  '& .MuiSlider-thumb:hover': {
244
119
  boxShadow: 'none',
120
+ pointerEvents: 'auto',
245
121
  }
246
- }, size: "small", value: props.shadowScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onShadowsChange("shadowsScore", newValue), onDoubleClick: () => props.onShadowsChange("shadowsScore", 0) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onWhitesChange("whitesScore", 0), children: "Whites" }), _jsx(TextField, { InputProps: { readOnly: true }, hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.whiteScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onWhitesChange("whitesScore", val)), sx: {
247
- width: "40px",
248
- alignItems: "center",
249
- textAlign: "right",
250
- pr: "4px",
251
- display: "flex",
252
- '& .MuiFilledInput-root': {
253
- backgroundColor: 'transparent',
254
- borderRadius: "0px",
255
- border: 'none',
256
- '&:before': {
257
- borderBottom: 'none',
258
- },
259
- '&:after': {
260
- borderBottom: 'none',
261
- },
262
- '&:hover:not(.Mui-disabled):before': {
263
- borderBottom: 'none',
264
- },
265
- '&.Mui-focused:after': {
266
- borderBottom: 'none',
267
- },
268
- },
269
- '& .MuiFilledInput-input': {
270
- textAlign: 'right',
271
- padding: 0,
272
- pr: '4px',
273
- color: colors.surface,
274
- fontSize: "14px",
275
- },
276
- '& .Mui-focused': {
277
- '& .MuiFilledInput-input': {
278
- backgroundColor: "#1C1B1FB2",
279
- textAlign: 'right',
280
- borderRadius: '5px 5px 0px 0px',
281
- borderBottom: 'none',
282
- pl: '2px',
283
- }
284
- }
285
- } })] }), _jsx(Slider, { ref: whitesSliderRef, sx: {
122
+ }, size: "small", value: props.shadowScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onShadowsChange("shadowsScore", newValue), onDoubleClick: () => props.onShadowsChange("shadowsScore", 0) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onWhitesChange("whitesScore", 0), children: "Whites" }), _jsx(Typography, { sx: {
123
+ ...typography.bodyMedium, // Use your standard typography
124
+ color: colors.surface,
125
+ width: "40px", // Keep the fixed width for alignment
126
+ textAlign: "right", // Keep the text alignment
127
+ }, children: formatValue(props.whiteScore) })] }), _jsx(Slider, { ref: whitesSliderRef, sx: {
286
128
  width: "100%",
287
129
  color: colors.onSurfaceVariant,
288
130
  '& .MuiSlider-rail': {
289
131
  background: colors.onSurfaceVariant,
290
132
  opacity: 1,
133
+ pointerEvents: 'none',
291
134
  },
292
135
  '& .MuiSlider-thumb': {
293
136
  background: colors.surface,
294
137
  boxShadow: 'none',
295
138
  opacity: 1,
139
+ pointerEvents: 'auto',
296
140
  },
297
141
  '& .MuiSlider-thumb:hover': {
298
142
  boxShadow: 'none',
143
+ pointerEvents: 'auto',
299
144
  }
300
- }, size: "small", value: props.whiteScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onWhitesChange("whitesScore", newValue), onDoubleClick: () => props.onWhitesChange("whitesScore", 0) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onBlacksChange("blacksScore", 0), children: "Blacks" }), _jsx(TextField, { InputProps: { readOnly: true }, hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.blackScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onBlacksChange("blacksScore", val)), sx: {
301
- width: "40px",
302
- alignItems: "center",
303
- textAlign: "right",
304
- pr: "4px",
305
- display: "flex",
306
- '& .MuiFilledInput-root': {
307
- backgroundColor: 'transparent',
308
- borderRadius: "0px",
309
- border: 'none',
310
- '&:before': {
311
- borderBottom: 'none',
312
- },
313
- '&:after': {
314
- borderBottom: 'none',
315
- },
316
- '&:hover:not(.Mui-disabled):before': {
317
- borderBottom: 'none',
318
- },
319
- '&.Mui-focused:after': {
320
- borderBottom: 'none',
321
- },
322
- },
323
- '& .MuiFilledInput-input': {
324
- textAlign: 'right',
325
- padding: 0,
326
- pr: '4px',
327
- color: colors.surface,
328
- fontSize: "14px",
329
- },
330
- '& .Mui-focused': {
331
- '& .MuiFilledInput-input': {
332
- backgroundColor: "#1C1B1FB2",
333
- textAlign: 'right',
334
- borderRadius: '5px 5px 0px 0px',
335
- borderBottom: 'none',
336
- pl: '2px',
337
- }
338
- },
339
- } })] }), _jsx(Slider, { ref: blacksSliderRef, sx: {
145
+ }, size: "small", value: props.whiteScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onWhitesChange("whitesScore", newValue), onDoubleClick: () => props.onWhitesChange("whitesScore", 0) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onBlacksChange("blacksScore", 0), children: "Blacks" }), _jsx(Typography, { sx: {
146
+ ...typography.bodyMedium, // Use your standard typography
147
+ color: colors.surface,
148
+ width: "40px", // Keep the fixed width for alignment
149
+ textAlign: "right", // Keep the text alignment
150
+ }, children: formatValue(props.blackScore) })] }), _jsx(Slider, { ref: blacksSliderRef, sx: {
340
151
  width: "100%",
341
152
  color: colors.onSurfaceVariant,
342
153
  '& .MuiSlider-rail': {
343
154
  background: colors.onSurfaceVariant,
344
155
  opacity: 1,
156
+ pointerEvents: 'none',
345
157
  },
346
158
  '& .MuiSlider-thumb': {
347
159
  background: colors.surface,
348
160
  boxShadow: 'none',
349
161
  opacity: 1,
162
+ pointerEvents: 'auto',
350
163
  },
351
164
  '& .MuiSlider-thumb:hover': {
352
165
  boxShadow: 'none',
166
+ pointerEvents: 'auto',
353
167
  }
354
168
  }, size: "small", value: props.blackScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onBlacksChange("blacksScore", newValue), onDoubleClick: () => props.onBlacksChange("blacksScore", 0) })] }) }));
355
169
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yogiswara/honcho-editor-ui",
3
- "version": "2.10.11",
3
+ "version": "2.10.13",
4
4
  "description": "A complete UI component library for the Honcho photo editor.",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",