@yogiswara/honcho-editor-ui 3.1.0 → 3.1.1

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.
@@ -32,7 +32,7 @@ export default function HSliderLightMobile(props) {
32
32
  color: colors.surface,
33
33
  width: "40px", // Keep the fixed width for alignment
34
34
  textAlign: "right", // Keep the text alignment
35
- }, children: formatValue(props.exposureScore) })] }), _jsx(Slider, { ref: exposureSliderRef, sx: {
35
+ }, children: formatValue(props.exposureScore) })] }), _jsx(Slider, { sx: {
36
36
  width: "100%",
37
37
  color: colors.onSurfaceVariant,
38
38
  '& .MuiSlider-rail': {
@@ -50,12 +50,16 @@ export default function HSliderLightMobile(props) {
50
50
  boxShadow: 'none',
51
51
  pointerEvents: 'auto',
52
52
  }
53
+ }, slotProps: {
54
+ thumb: {
55
+ ref: exposureSliderRef
56
+ }
53
57
  }, 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
58
  ...typography.bodyMedium, // Use your standard typography
55
59
  color: colors.surface,
56
60
  width: "40px", // Keep the fixed width for alignment
57
61
  textAlign: "right", // Keep the text alignment
58
- }, children: formatValue(props.contrastScore) })] }), _jsx(Slider, { ref: contrastSliderRef, sx: {
62
+ }, children: formatValue(props.contrastScore) })] }), _jsx(Slider, { sx: {
59
63
  width: "100%",
60
64
  color: colors.onSurfaceVariant,
61
65
  '& .MuiSlider-rail': {
@@ -73,12 +77,16 @@ export default function HSliderLightMobile(props) {
73
77
  boxShadow: 'none',
74
78
  pointerEvents: 'auto',
75
79
  }
80
+ }, slotProps: {
81
+ thumb: {
82
+ ref: contrastSliderRef
83
+ }
76
84
  }, 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
85
  ...typography.bodyMedium, // Use your standard typography
78
86
  color: colors.surface,
79
87
  width: "40px", // Keep the fixed width for alignment
80
88
  textAlign: "right", // Keep the text alignment
81
- }, children: formatValue(props.highlightsScore) })] }), _jsx(Slider, { ref: highlightsSliderRef, sx: {
89
+ }, children: formatValue(props.highlightsScore) })] }), _jsx(Slider, { sx: {
82
90
  width: "100%",
83
91
  color: colors.onSurfaceVariant,
84
92
  '& .MuiSlider-rail': {
@@ -96,12 +104,16 @@ export default function HSliderLightMobile(props) {
96
104
  boxShadow: 'none',
97
105
  pointerEvents: 'auto',
98
106
  }
107
+ }, slotProps: {
108
+ thumb: {
109
+ ref: highlightsSliderRef
110
+ }
99
111
  }, 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
112
  ...typography.bodyMedium, // Use your standard typography
101
113
  color: colors.surface,
102
114
  width: "40px", // Keep the fixed width for alignment
103
115
  textAlign: "right", // Keep the text alignment
104
- }, children: formatValue(props.shadowScore) })] }), _jsx(Slider, { ref: shadowsSliderRef, sx: {
116
+ }, children: formatValue(props.shadowScore) })] }), _jsx(Slider, { sx: {
105
117
  width: "100%",
106
118
  color: colors.onSurfaceVariant,
107
119
  '& .MuiSlider-rail': {
@@ -119,12 +131,16 @@ export default function HSliderLightMobile(props) {
119
131
  boxShadow: 'none',
120
132
  pointerEvents: 'auto',
121
133
  }
134
+ }, slotProps: {
135
+ thumb: {
136
+ ref: shadowsSliderRef
137
+ }
122
138
  }, 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
139
  ...typography.bodyMedium, // Use your standard typography
124
140
  color: colors.surface,
125
141
  width: "40px", // Keep the fixed width for alignment
126
142
  textAlign: "right", // Keep the text alignment
127
- }, children: formatValue(props.whiteScore) })] }), _jsx(Slider, { ref: whitesSliderRef, sx: {
143
+ }, children: formatValue(props.whiteScore) })] }), _jsx(Slider, { sx: {
128
144
  width: "100%",
129
145
  color: colors.onSurfaceVariant,
130
146
  '& .MuiSlider-rail': {
@@ -142,12 +158,16 @@ export default function HSliderLightMobile(props) {
142
158
  boxShadow: 'none',
143
159
  pointerEvents: 'auto',
144
160
  }
161
+ }, slotProps: {
162
+ thumb: {
163
+ ref: whitesSliderRef
164
+ }
145
165
  }, 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
166
  ...typography.bodyMedium, // Use your standard typography
147
167
  color: colors.surface,
148
168
  width: "40px", // Keep the fixed width for alignment
149
169
  textAlign: "right", // Keep the text alignment
150
- }, children: formatValue(props.blackScore) })] }), _jsx(Slider, { ref: blacksSliderRef, sx: {
170
+ }, children: formatValue(props.blackScore) })] }), _jsx(Slider, { sx: {
151
171
  width: "100%",
152
172
  color: colors.onSurfaceVariant,
153
173
  '& .MuiSlider-rail': {
@@ -165,5 +185,9 @@ export default function HSliderLightMobile(props) {
165
185
  boxShadow: 'none',
166
186
  pointerEvents: 'auto',
167
187
  }
188
+ }, slotProps: {
189
+ thumb: {
190
+ ref: blacksSliderRef
191
+ }
168
192
  }, size: "small", value: props.blackScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onBlacksChange("blacksScore", newValue), onDoubleClick: () => props.onBlacksChange("blacksScore", 0) })] }) }));
169
193
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yogiswara/honcho-editor-ui",
3
- "version": "3.1.0",
3
+ "version": "3.1.1",
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",