@yogiswara/honcho-editor-ui 2.10.11 → 2.10.12

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 (2) hide show
  1. package/dist/components/editor/HSliderColorMobile.js +25 -125
  2. 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,37 +47,12 @@ 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': {
@@ -91,37 +66,12 @@ export default function HSliderColorMobile(props) {
91
66
  '& .MuiSlider-thumb': {
92
67
  boxShadow: 'none',
93
68
  }
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: {
69
+ }, 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: {
70
+ ...typography.bodyMedium, // Use your standard typography
71
+ color: colors.surface,
72
+ width: "40px", // Keep the fixed width for alignment
73
+ textAlign: "right", // Keep the text alignment
74
+ }, children: formatValue(props.tintScore) })] }), _jsx(Slider, { ref: tintSliderRef, sx: {
125
75
  width: "100%",
126
76
  color: colors.surface,
127
77
  '& .MuiSlider-rail': {
@@ -135,37 +85,12 @@ export default function HSliderColorMobile(props) {
135
85
  '& .MuiSlider-thumb': {
136
86
  boxShadow: 'none',
137
87
  }
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: {
88
+ }, 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: {
89
+ ...typography.bodyMedium, // Use your standard typography
90
+ color: colors.surface,
91
+ width: "40px", // Keep the fixed width for alignment
92
+ textAlign: "right", // Keep the text alignment
93
+ }, children: formatValue(props.vibranceScore) })] }), _jsx(Slider, { ref: vibranceSliderRef, sx: {
169
94
  width: "100%",
170
95
  color: colors.surface,
171
96
  '& .MuiSlider-rail': {
@@ -179,37 +104,12 @@ export default function HSliderColorMobile(props) {
179
104
  '& .MuiSlider-thumb': {
180
105
  boxShadow: 'none',
181
106
  }
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: {
107
+ }, 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: {
108
+ ...typography.bodyMedium, // Use your standard typography
109
+ color: colors.surface,
110
+ width: "40px", // Keep the fixed width for alignment
111
+ textAlign: "right", // Keep the text alignment
112
+ }, children: formatValue(props.saturationScore) })] }), _jsx(Slider, { ref: saturationSliderRef, sx: {
213
113
  width: "100%",
214
114
  color: colors.surface,
215
115
  '& .MuiSlider-rail': {
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.12",
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",