@yogiswara/honcho-editor-ui 2.6.4 → 2.6.6

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 (18) hide show
  1. package/dist/components/editor/HAccordionColor.d.ts +5 -4
  2. package/dist/components/editor/HAccordionColor.js +5 -5
  3. package/dist/components/editor/HAccordionColorAdjustment.d.ts +13 -12
  4. package/dist/components/editor/HAccordionDetails.d.ts +3 -2
  5. package/dist/components/editor/HAccordionDetails.js +3 -3
  6. package/dist/components/editor/HAccordionLight.d.ts +7 -6
  7. package/dist/components/editor/HAccordionLight.js +7 -7
  8. package/dist/components/editor/HImageEditorMobile.d.ts +13 -12
  9. package/dist/components/editor/HSliderColorMobile.d.ts +5 -4
  10. package/dist/components/editor/HSliderColorMobile.js +5 -5
  11. package/dist/components/editor/HSliderDetailsMobile.d.ts +3 -2
  12. package/dist/components/editor/HSliderDetailsMobile.js +3 -3
  13. package/dist/components/editor/HSliderLightMobile.d.ts +7 -6
  14. package/dist/components/editor/HSliderLightMobile.js +7 -7
  15. package/dist/components/editor/HTabColorAdjustmentMobile.d.ts +13 -12
  16. package/dist/index.d.ts +1 -0
  17. package/dist/index.js +1 -0
  18. package/package.json +1 -1
package/dist/components/editor/HAccordionColor.d.ts CHANGED
@@ -1,12 +1,13 @@
1
+ import { AdjustmentState } from '../../hooks/editor/type';
1
2
  interface Props {
2
3
  TempScore: number;
3
4
  TintScore: number;
4
5
  SaturationScore: number;
5
6
  VibranceScore: number;
6
- onTempChange: (value: number) => void;
7
- onTintChange: (value: number) => void;
8
- onSaturationChange: (value: number) => void;
9
- onVibranceChange: (value: number) => void;
7
+ onTempChange: (field: keyof AdjustmentState, value: number) => void;
8
+ onTintChange: (field: keyof AdjustmentState, value: number) => void;
9
+ onSaturationChange: (field: keyof AdjustmentState, value: number) => void;
10
+ onVibranceChange: (field: keyof AdjustmentState, value: number) => void;
10
11
  }
11
12
  export default function HAccordionColor(props: Props): import("react/jsx-runtime").JSX.Element;
12
13
  export {};
package/dist/components/editor/HAccordionColor.js CHANGED
@@ -42,7 +42,7 @@ export default function HAccordionColor(props) {
42
42
  const clampedValue = Math.max(min, Math.min(max, numericValue));
43
43
  onChange(clampedValue);
44
44
  };
45
- return (_jsx(_Fragment, { children: _jsxs(Stack, { children: [_jsxs(Stack, { direction: "column", gap: "4px", sx: { pt: '6px', pb: '2px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "temperature-input", onDoubleClick: () => props.onTempChange(0), sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Temperature" }), _jsx(TextField, { hiddenLabel: true, id: "temperature-input", value: formatValue(props.TempScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onTempChange), className: "control-label", sx: {
45
+ return (_jsx(_Fragment, { children: _jsxs(Stack, { children: [_jsxs(Stack, { direction: "column", gap: "4px", sx: { pt: '6px', pb: '2px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "temperature-input", onDoubleClick: () => props.onTempChange("tempScore", 0), sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Temperature" }), _jsx(TextField, { hiddenLabel: true, id: "temperature-input", value: formatValue(props.TempScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onTempChange("tempScore", val)), className: "control-label", sx: {
46
46
  width: "40px",
47
47
  height: "10px",
48
48
  alignItems: "center",
@@ -89,7 +89,7 @@ export default function HAccordionColor(props) {
89
89
  '& .MuiSlider-thumb:hover': {
90
90
  boxShadow: 'none',
91
91
  },
92
- }, size: "small", value: props.TempScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onTempChange(newValue), onDoubleClick: () => props.onTempChange(0) })] }), _jsxs(Stack, { direction: "column", gap: "3px", sx: { pt: '10px', pb: '0px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "tint-input", onDoubleClick: () => props.onTintChange(0), sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Tint" }), _jsx(TextField, { hiddenLabel: true, id: "tint-input", value: formatValue(props.TintScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onTintChange), sx: {
92
+ }, 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: "column", gap: "3px", sx: { pt: '10px', pb: '0px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "tint-input", onDoubleClick: () => props.onTintChange("tintScore", 0), sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Tint" }), _jsx(TextField, { hiddenLabel: true, id: "tint-input", value: formatValue(props.TintScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onTintChange("tintScore", val)), sx: {
93
93
  width: "40px",
94
94
  height: "10px",
95
95
  alignItems: "center",
@@ -136,7 +136,7 @@ export default function HAccordionColor(props) {
136
136
  '& .MuiSlider-thumb:hover': {
137
137
  boxShadow: 'none',
138
138
  },
139
- }, size: "small", value: props.TintScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onTintChange(newValue), onDoubleClick: () => props.onTintChange(0) })] }), _jsxs(Stack, { direction: "column", gap: "3px", sx: { pt: '10px', pb: '0px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "vibrance-input", onDoubleClick: () => props.onVibranceChange(0), sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Vibrance" }), _jsx(TextField, { hiddenLabel: true, id: "vibrance-input", value: formatValue(props.VibranceScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onVibranceChange), sx: {
139
+ }, 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: "column", gap: "3px", sx: { pt: '10px', pb: '0px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "vibrance-input", onDoubleClick: () => props.onVibranceChange("vibranceScore", 0), sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Vibrance" }), _jsx(TextField, { hiddenLabel: true, id: "vibrance-input", value: formatValue(props.VibranceScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onVibranceChange("vibranceScore", val)), sx: {
140
140
  width: "40px",
141
141
  height: "10px",
142
142
  alignItems: "center",
@@ -183,7 +183,7 @@ export default function HAccordionColor(props) {
183
183
  '& .MuiSlider-thumb:hover': {
184
184
  boxShadow: 'none',
185
185
  },
186
- }, size: "small", value: props.VibranceScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onVibranceChange(newValue), onDoubleClick: () => props.onVibranceChange(0) })] }), _jsxs(Stack, { direction: "column", gap: "3px", sx: { pt: '10px', pb: '0px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "saturation-input", onDoubleClick: () => props.onSaturationChange(0), sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Saturation" }), _jsx(TextField, { hiddenLabel: true, id: "saturation-input", value: formatValue(props.SaturationScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onSaturationChange), sx: {
186
+ }, 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: "column", gap: "3px", sx: { pt: '10px', pb: '0px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "saturation-input", onDoubleClick: () => props.onSaturationChange("saturationScore", 0), sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Saturation" }), _jsx(TextField, { hiddenLabel: true, id: "saturation-input", value: formatValue(props.SaturationScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onSaturationChange("saturationScore", val)), sx: {
187
187
  width: "40px",
188
188
  height: "10px",
189
189
  alignItems: "center",
@@ -230,5 +230,5 @@ export default function HAccordionColor(props) {
230
230
  '& .MuiSlider-thumb:hover': {
231
231
  boxShadow: 'none',
232
232
  },
233
- }, size: "small", value: props.SaturationScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onSaturationChange(newValue), onDoubleClick: () => props.onSaturationChange(0) })] })] }) }));
233
+ }, size: "small", value: props.SaturationScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onSaturationChange("saturationScore", newValue), onDoubleClick: () => props.onSaturationChange("saturationScore", 0) })] })] }) }));
234
234
  }
package/dist/components/editor/HAccordionColorAdjustment.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import React from "react";
2
+ import { AdjustmentState } from '../../hooks/editor/type';
2
3
  interface Props {
3
4
  tempScore: number;
4
5
  tintScore: number;
@@ -13,18 +14,18 @@ interface Props {
13
14
  clarityScore: number;
14
15
  sharpnessScore: number;
15
16
  expandedPanels: string[];
16
- setTempScore: (value: number) => void;
17
- setTintScore: (value: number) => void;
18
- setExposureScore: (value: number) => void;
19
- setVibranceScore: (value: number) => void;
20
- setSaturationScore: (value: number) => void;
21
- setHighlightsScore: (value: number) => void;
22
- setShadowsScore: (value: number) => void;
23
- setWhitesScore: (value: number) => void;
24
- setBlacksScore: (value: number) => void;
25
- setContrastScore: (value: number) => void;
26
- setClarityScore: (value: number) => void;
27
- setSharpnessScore: (value: number) => void;
17
+ setTempScore: (field: keyof AdjustmentState, value: number) => void;
18
+ setTintScore: (field: keyof AdjustmentState, value: number) => void;
19
+ setExposureScore: (field: keyof AdjustmentState, value: number) => void;
20
+ setVibranceScore: (field: keyof AdjustmentState, value: number) => void;
21
+ setSaturationScore: (field: keyof AdjustmentState, value: number) => void;
22
+ setHighlightsScore: (field: keyof AdjustmentState, value: number) => void;
23
+ setShadowsScore: (field: keyof AdjustmentState, value: number) => void;
24
+ setWhitesScore: (field: keyof AdjustmentState, value: number) => void;
25
+ setBlacksScore: (field: keyof AdjustmentState, value: number) => void;
26
+ setContrastScore: (field: keyof AdjustmentState, value: number) => void;
27
+ setClarityScore: (field: keyof AdjustmentState, value: number) => void;
28
+ setSharpnessScore: (field: keyof AdjustmentState, value: number) => void;
28
29
  onPanelChange: (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => void;
29
30
  }
30
31
  export default function HAccordionColorAdjustment(props: Props): import("react/jsx-runtime").JSX.Element;
package/dist/components/editor/HAccordionDetails.d.ts CHANGED
@@ -1,8 +1,9 @@
1
+ import { AdjustmentState } from '../../hooks/editor/type';
1
2
  interface Props {
2
3
  ClarityScore: number;
3
4
  SharpnessScore: number;
4
- onClarityChange: (value: number) => void;
5
- onSharpnessChange: (value: number) => void;
5
+ onClarityChange: (field: keyof AdjustmentState, value: number) => void;
6
+ onSharpnessChange: (field: keyof AdjustmentState, value: number) => void;
6
7
  }
7
8
  export default function HAccordionDetails(props: Props): import("react/jsx-runtime").JSX.Element;
8
9
  export {};
package/dist/components/editor/HAccordionDetails.js CHANGED
@@ -26,7 +26,7 @@ export default function HAccordionDetails(props) {
26
26
  const clampedValue = Math.max(min, Math.min(max, numericValue));
27
27
  onChange(clampedValue);
28
28
  };
29
- return (_jsx(_Fragment, { children: _jsxs(Stack, { children: [_jsxs(Stack, { direction: "column", gap: "4px", sx: { pt: '6px', pb: '2px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle, }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "clarity-input", onDoubleClick: () => props.onClarityChange(0), sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Clarity" }), _jsx(TextField, { hiddenLabel: true, id: "clarity-input", value: formatValue(props.ClarityScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onClarityChange), sx: {
29
+ return (_jsx(_Fragment, { children: _jsxs(Stack, { children: [_jsxs(Stack, { direction: "column", gap: "4px", sx: { pt: '6px', pb: '2px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle, }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "clarity-input", onDoubleClick: () => props.onClarityChange("clarityScore", 0), sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Clarity" }), _jsx(TextField, { hiddenLabel: true, id: "clarity-input", value: formatValue(props.ClarityScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onClarityChange("clarityScore", val)), sx: {
30
30
  width: "40px",
31
31
  height: "10px",
32
32
  alignItems: "center",
@@ -77,7 +77,7 @@ export default function HAccordionDetails(props) {
77
77
  opacity: 1,
78
78
  boxShadow: 'none',
79
79
  },
80
- }, size: "small", value: props.ClarityScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onClarityChange(newValue), onDoubleClick: () => props.onClarityChange(0) })] }), _jsxs(Stack, { direction: "column", gap: "3px", sx: { pt: '10px', pb: '0px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle, }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "sharpness-input", onDoubleClick: () => props.onSharpnessChange(0), sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Sharpness" }), _jsx(TextField, { hiddenLabel: true, id: "sharpness-input", value: formatValue(props.SharpnessScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onSharpnessChange), sx: {
80
+ }, size: "small", value: props.ClarityScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onClarityChange("clarityScore", newValue), onDoubleClick: () => props.onClarityChange("clarityScore", 0) })] }), _jsxs(Stack, { direction: "column", gap: "3px", sx: { pt: '10px', pb: '0px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle, }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "sharpness-input", onDoubleClick: () => props.onSharpnessChange("sharpnessScore", 0), sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Sharpness" }), _jsx(TextField, { hiddenLabel: true, id: "sharpness-input", value: formatValue(props.SharpnessScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onSharpnessChange("sharpnessScore", val)), sx: {
81
81
  width: "40px",
82
82
  height: "10px",
83
83
  alignItems: "center",
@@ -129,5 +129,5 @@ export default function HAccordionDetails(props) {
129
129
  opacity: 1,
130
130
  boxShadow: 'none',
131
131
  },
132
- }, size: "small", value: props.SharpnessScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onSharpnessChange(newValue), onDoubleClick: () => props.onSharpnessChange(0) })] })] }) }));
132
+ }, size: "small", value: props.SharpnessScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onSharpnessChange("sharpnessScore", newValue), onDoubleClick: () => props.onSharpnessChange("sharpnessScore", 0) })] })] }) }));
133
133
  }
package/dist/components/editor/HAccordionLight.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { AdjustmentState } from '../../hooks/editor/type';
1
2
  interface Props {
2
3
  ExposureScore: number;
3
4
  ContrastScore: number;
@@ -5,12 +6,12 @@ interface Props {
5
6
  ShadowsScore: number;
6
7
  WhitesScore: number;
7
8
  BlacksScore: number;
8
- onContrastChange: (value: number) => void;
9
- onExposureChange: (value: number) => void;
10
- onHighlightsChange: (value: number) => void;
11
- onShadowsChange: (value: number) => void;
12
- onWhitesChange: (value: number) => void;
13
- onBlacksChange: (value: number) => void;
9
+ onExposureChange: (field: keyof AdjustmentState, value: number) => void;
10
+ onContrastChange: (field: keyof AdjustmentState, value: number) => void;
11
+ onHighlightsChange: (field: keyof AdjustmentState, value: number) => void;
12
+ onShadowsChange: (field: keyof AdjustmentState, value: number) => void;
13
+ onWhitesChange: (field: keyof AdjustmentState, value: number) => void;
14
+ onBlacksChange: (field: keyof AdjustmentState, value: number) => void;
14
15
  }
15
16
  export default function HAccordionLight(props: Props): import("react/jsx-runtime").JSX.Element;
16
17
  export {};
package/dist/components/editor/HAccordionLight.js CHANGED
@@ -26,7 +26,7 @@ export default function HAccordionLight(props) {
26
26
  const clampedValue = Math.max(min, Math.min(max, numericValue));
27
27
  onChange(clampedValue);
28
28
  };
29
- return (_jsx(_Fragment, { children: _jsxs(Stack, { children: [_jsxs(Stack, { direction: "column", gap: "4px", sx: { pt: '6px', pb: '2px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle, }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "exposure-input", onDoubleClick: () => props.onExposureChange(0), sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Exposure" }), _jsx(TextField, { hiddenLabel: true, id: "exposure-input", value: formatValue(props.ExposureScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onExposureChange), sx: {
29
+ return (_jsx(_Fragment, { children: _jsxs(Stack, { children: [_jsxs(Stack, { direction: "column", gap: "4px", sx: { pt: '6px', pb: '2px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle, }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "exposure-input", onDoubleClick: () => props.onExposureChange("exposureScore", 0), sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Exposure" }), _jsx(TextField, { hiddenLabel: true, id: "exposure-input", value: formatValue(props.ExposureScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onExposureChange("exposureScore", val)), sx: {
30
30
  width: "40px",
31
31
  height: "10px",
32
32
  alignItems: "center",
@@ -78,7 +78,7 @@ export default function HAccordionLight(props) {
78
78
  opacity: 1,
79
79
  boxShadow: 'none',
80
80
  }
81
- }, size: "small", value: props.ExposureScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onExposureChange(newValue), onDoubleClick: () => props.onExposureChange(0) })] }), _jsxs(Stack, { direction: "column", gap: "3px", sx: { pt: '10px', pb: '0px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle, }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "contrast-input", onDoubleClick: () => props.onContrastChange(0), sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Contrast" }), _jsx(TextField, { hiddenLabel: true, id: "contrast-input", value: formatValue(props.ContrastScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onContrastChange), sx: {
81
+ }, 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: "column", gap: "3px", sx: { pt: '10px', pb: '0px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle, }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "contrast-input", onDoubleClick: () => props.onContrastChange("contrastScore", 0), sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Contrast" }), _jsx(TextField, { hiddenLabel: true, id: "contrast-input", value: formatValue(props.ContrastScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onContrastChange("contrastScore", val)), sx: {
82
82
  width: "40px",
83
83
  height: "10px",
84
84
  alignItems: "center",
@@ -130,7 +130,7 @@ export default function HAccordionLight(props) {
130
130
  opacity: 1,
131
131
  boxShadow: 'none',
132
132
  }
133
- }, size: "small", value: props.ContrastScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onContrastChange(newValue), onDoubleClick: () => props.onContrastChange(0) })] }), _jsxs(Stack, { direction: "column", gap: "3px", sx: { pt: '10px', pb: '0px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle, }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "highlights-input", onDoubleClick: () => props.onHighlightsChange(0), sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Highlights" }), _jsx(TextField, { hiddenLabel: true, id: "highlights-input", value: formatValue(props.HighlightsScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onHighlightsChange), sx: {
133
+ }, 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: "column", gap: "3px", sx: { pt: '10px', pb: '0px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle, }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "highlights-input", onDoubleClick: () => props.onHighlightsChange("highlightsScore", 0), sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Highlights" }), _jsx(TextField, { hiddenLabel: true, id: "highlights-input", value: formatValue(props.HighlightsScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onHighlightsChange("highlightsScore", val)), sx: {
134
134
  width: "40px",
135
135
  height: "10px",
136
136
  alignItems: "center",
@@ -182,7 +182,7 @@ export default function HAccordionLight(props) {
182
182
  opacity: 1,
183
183
  boxShadow: 'none',
184
184
  }
185
- }, size: "small", value: props.HighlightsScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onHighlightsChange(newValue), onDoubleClick: () => props.onHighlightsChange(0) })] }), _jsxs(Stack, { direction: "column", gap: "3px", sx: { pt: '10px', pb: '0px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle, }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "shadows-input", onDoubleClick: () => props.onShadowsChange(0), sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Shadows" }), _jsx(TextField, { hiddenLabel: true, id: "shadows-input", value: formatValue(props.ShadowsScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onShadowsChange), sx: {
185
+ }, 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: "column", gap: "3px", sx: { pt: '10px', pb: '0px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle, }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "shadows-input", onDoubleClick: () => props.onShadowsChange("shadowsScore", 0), sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Shadows" }), _jsx(TextField, { hiddenLabel: true, id: "shadows-input", value: formatValue(props.ShadowsScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onShadowsChange("shadowsScore", val)), sx: {
186
186
  width: "40px",
187
187
  height: "10px",
188
188
  alignItems: "center",
@@ -234,7 +234,7 @@ export default function HAccordionLight(props) {
234
234
  opacity: 1,
235
235
  boxShadow: 'none',
236
236
  }
237
- }, size: "small", value: props.ShadowsScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onShadowsChange(newValue), onDoubleClick: () => props.onShadowsChange(0) })] }), _jsxs(Stack, { direction: "column", gap: "3px", sx: { pt: '10px', pb: '0px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle, }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "whites-input", onDoubleClick: () => props.onWhitesChange(0), sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Whites" }), _jsx(TextField, { hiddenLabel: true, id: "whites-input", value: formatValue(props.WhitesScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onWhitesChange), sx: {
237
+ }, size: "small", value: props.ShadowsScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onShadowsChange("shadowsScore", newValue), onDoubleClick: () => props.onShadowsChange("shadowsScore", 0) })] }), _jsxs(Stack, { direction: "column", gap: "3px", sx: { pt: '10px', pb: '0px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle, }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "whites-input", onDoubleClick: () => props.onWhitesChange("whitesScore", 0), sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Whites" }), _jsx(TextField, { hiddenLabel: true, id: "whites-input", value: formatValue(props.WhitesScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onWhitesChange("whitesScore", val)), sx: {
238
238
  width: "40px",
239
239
  height: "10px",
240
240
  alignItems: "center",
@@ -286,7 +286,7 @@ export default function HAccordionLight(props) {
286
286
  opacity: 1,
287
287
  boxShadow: 'none',
288
288
  }
289
- }, size: "small", value: props.WhitesScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onWhitesChange(newValue), onDoubleClick: () => props.onWhitesChange(0) })] }), _jsxs(Stack, { direction: "column", gap: "3px", sx: { pt: '10px', pb: '0px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle, }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "blacks-input", onDoubleClick: () => props.onBlacksChange(0), sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Blacks" }), _jsx(TextField, { hiddenLabel: true, id: "blacks-input", value: formatValue(props.BlacksScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onBlacksChange), sx: {
289
+ }, size: "small", value: props.WhitesScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onWhitesChange("whitesScore", newValue), onDoubleClick: () => props.onWhitesChange("whitesScore", 0) })] }), _jsxs(Stack, { direction: "column", gap: "3px", sx: { pt: '10px', pb: '0px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle, }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "blacks-input", onDoubleClick: () => props.onBlacksChange("blacksScore", 0), sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Blacks" }), _jsx(TextField, { hiddenLabel: true, id: "blacks-input", value: formatValue(props.BlacksScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onBlacksChange("blacksScore", val)), sx: {
290
290
  width: "40px",
291
291
  height: "10px",
292
292
  alignItems: "center",
@@ -338,5 +338,5 @@ export default function HAccordionLight(props) {
338
338
  opacity: 1,
339
339
  boxShadow: 'none',
340
340
  }
341
- }, size: "small", value: props.BlacksScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onBlacksChange(newValue), onDoubleClick: () => props.onBlacksChange(0) })] })] }) }));
341
+ }, size: "small", value: props.BlacksScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onBlacksChange("blacksScore", newValue), onDoubleClick: () => props.onBlacksChange("blacksScore", 0) })] })] }) }));
342
342
  }
package/dist/components/editor/HImageEditorMobile.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import React from "react";
2
+ import { AdjustmentState } from '../../hooks/editor/type';
2
3
  type Preset = {
3
4
  id: string;
4
5
  name: string;
@@ -26,18 +27,18 @@ interface Props {
26
27
  contrastScore: number;
27
28
  clarityScore: number;
28
29
  sharpnessScore: number;
29
- onTempChange: (value: number) => void;
30
- onTintChange: (value: number) => void;
31
- onVibranceChange: (value: number) => void;
32
- onSaturationChange: (value: number) => void;
33
- onExposureChange: (value: number) => void;
34
- onHighlightsChange: (value: number) => void;
35
- onShadowsChange: (value: number) => void;
36
- onWhitesChange: (value: number) => void;
37
- onBlacksChange: (value: number) => void;
38
- onContrastChange: (value: number) => void;
39
- onClarityChange: (value: number) => void;
40
- onSharpnessChange: (value: number) => void;
30
+ onTempChange: (field: keyof AdjustmentState, value: number) => void;
31
+ onTintChange: (field: keyof AdjustmentState, value: number) => void;
32
+ onVibranceChange: (field: keyof AdjustmentState, value: number) => void;
33
+ onSaturationChange: (field: keyof AdjustmentState, value: number) => void;
34
+ onExposureChange: (field: keyof AdjustmentState, value: number) => void;
35
+ onHighlightsChange: (field: keyof AdjustmentState, value: number) => void;
36
+ onShadowsChange: (field: keyof AdjustmentState, value: number) => void;
37
+ onWhitesChange: (field: keyof AdjustmentState, value: number) => void;
38
+ onBlacksChange: (field: keyof AdjustmentState, value: number) => void;
39
+ onContrastChange: (field: keyof AdjustmentState, value: number) => void;
40
+ onClarityChange: (field: keyof AdjustmentState, value: number) => void;
41
+ onSharpnessChange: (field: keyof AdjustmentState, value: number) => void;
41
42
  selectedPreset: string | null;
42
43
  onSelectPreset: (id: string) => void;
43
44
  onOpenPresetModal: () => void;
package/dist/components/editor/HSliderColorMobile.d.ts CHANGED
@@ -1,12 +1,13 @@
1
+ import { AdjustmentState } from '../../hooks/editor/type';
1
2
  interface Props {
2
3
  tempScore: number;
3
4
  tintScore: number;
4
5
  saturationScore: number;
5
6
  vibranceScore: number;
6
- onTempChange: (value: number) => void;
7
- onTintChange: (value: number) => void;
8
- onVibranceChange: (value: number) => void;
9
- onSaturationChange: (value: number) => void;
7
+ onTempChange: (field: keyof AdjustmentState, value: number) => void;
8
+ onTintChange: (field: keyof AdjustmentState, value: number) => void;
9
+ onVibranceChange: (field: keyof AdjustmentState, value: number) => void;
10
+ onSaturationChange: (field: keyof AdjustmentState, value: number) => void;
10
11
  }
11
12
  export default function HSliderColorMobile(props: Props): import("react/jsx-runtime").JSX.Element;
12
13
  export {};
package/dist/components/editor/HSliderColorMobile.js CHANGED
@@ -42,7 +42,7 @@ export default function HSliderColorMobile(props) {
42
42
  const clampedValue = Math.max(min, Math.min(max, numericValue));
43
43
  onChange(clampedValue);
44
44
  };
45
- return (_jsx(_Fragment, { children: _jsxs(Stack, { spacing: 0, direction: "column", sx: { width: '100%', paddingX: 1, m: "0px" }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Temperature" }), _jsx(TextField, { hiddenLabel: true, id: "temperature-input", value: formatValue(props.tempScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onTempChange), sx: {
45
+ return (_jsx(_Fragment, { children: _jsxs(Stack, { spacing: 0, direction: "column", sx: { width: '100%', paddingX: 1, m: "0px" }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Temperature" }), _jsx(TextField, { hiddenLabel: true, id: "temperature-input", value: formatValue(props.tempScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onTempChange("tempScore", val)), sx: {
46
46
  width: "40px",
47
47
  alignItems: "center",
48
48
  textAlign: "right",
@@ -86,7 +86,7 @@ export default function HSliderColorMobile(props) {
86
86
  '& .MuiSlider-thumb': {
87
87
  boxShadow: 'none',
88
88
  }
89
- }, size: "small", value: props.tempScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onTempChange(newValue), onDoubleClick: () => props.onTempChange(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 }, children: "Tint" }), _jsx(TextField, { hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.tintScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onTintChange), sx: {
89
+ }, 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 }, children: "Tint" }), _jsx(TextField, { hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.tintScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onTintChange("tintScore", val)), sx: {
90
90
  width: "40px",
91
91
  alignItems: "center",
92
92
  textAlign: "right",
@@ -130,7 +130,7 @@ export default function HSliderColorMobile(props) {
130
130
  '& .MuiSlider-thumb': {
131
131
  boxShadow: 'none',
132
132
  }
133
- }, size: "small", value: props.tintScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onTintChange(newValue), onDoubleClick: () => props.onTintChange(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 }, children: "Vibrance" }), _jsx(TextField, { hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.vibranceScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onVibranceChange), sx: {
133
+ }, 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 }, children: "Vibrance" }), _jsx(TextField, { hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.vibranceScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onVibranceChange("vibranceScore", val)), sx: {
134
134
  width: "40px",
135
135
  alignItems: "center",
136
136
  textAlign: "right",
@@ -174,7 +174,7 @@ export default function HSliderColorMobile(props) {
174
174
  '& .MuiSlider-thumb': {
175
175
  boxShadow: 'none',
176
176
  }
177
- }, size: "small", value: props.vibranceScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onVibranceChange(newValue), onDoubleClick: () => props.onVibranceChange(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 }, children: "Saturation" }), _jsx(TextField, { hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.saturationScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onSaturationChange), sx: {
177
+ }, 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 }, children: "Saturation" }), _jsx(TextField, { hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.saturationScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onSaturationChange("saturationScore", val)), sx: {
178
178
  width: "40px",
179
179
  alignItems: "center",
180
180
  textAlign: "right",
@@ -218,5 +218,5 @@ export default function HSliderColorMobile(props) {
218
218
  '& .MuiSlider-thumb': {
219
219
  boxShadow: 'none',
220
220
  }
221
- }, size: "small", value: props.saturationScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onSaturationChange(newValue), onDoubleClick: () => props.onSaturationChange(0) })] }) }));
221
+ }, size: "small", value: props.saturationScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onSaturationChange("saturationScore", newValue), onDoubleClick: () => props.onSaturationChange("saturationScore", 0) })] }) }));
222
222
  }
package/dist/components/editor/HSliderDetailsMobile.d.ts CHANGED
@@ -1,8 +1,9 @@
1
+ import { AdjustmentState } from '../../hooks/editor/type';
1
2
  interface Props {
2
3
  clarityScore: number;
3
4
  sharpnessScore: number;
4
- onClarityChange: (value: number) => void;
5
- onSharpnessChange: (value: number) => void;
5
+ onClarityChange: (field: keyof AdjustmentState, value: number) => void;
6
+ onSharpnessChange: (field: keyof AdjustmentState, value: number) => void;
6
7
  }
7
8
  export default function HSliderDetailsMobile(props: Props): import("react/jsx-runtime").JSX.Element;
8
9
  export {};
package/dist/components/editor/HSliderDetailsMobile.js CHANGED
@@ -20,7 +20,7 @@ export default function HSliderDetailsMobile(props) {
20
20
  const clampedValue = Math.max(min, Math.min(max, numericValue));
21
21
  onChange(clampedValue);
22
22
  };
23
- 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, id: "filled-hidden-label-small", value: formatValue(props.clarityScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onClarityChange), sx: {
23
+ 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, id: "filled-hidden-label-small", value: formatValue(props.clarityScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onClarityChange("clarityScore", val)), sx: {
24
24
  width: "40px",
25
25
  alignItems: "center",
26
26
  textAlign: "right",
@@ -73,7 +73,7 @@ export default function HSliderDetailsMobile(props) {
73
73
  '& .MuiSlider-thumb:hover': {
74
74
  boxShadow: 'none',
75
75
  }
76
- }, size: "small", value: props.clarityScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onClarityChange(newValue), onDoubleClick: () => props.onClarityChange(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: "Sharpness" }), _jsx(TextField, { hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.sharpnessScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onSharpnessChange), sx: {
76
+ }, size: "small", value: props.clarityScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onClarityChange("clarityScore", newValue), onDoubleClick: () => props.onClarityChange("clarityScore", 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: "Sharpness" }), _jsx(TextField, { hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.sharpnessScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onSharpnessChange("sharpnessScore", val)), sx: {
77
77
  width: "40px",
78
78
  alignItems: "center",
79
79
  textAlign: "right",
@@ -126,5 +126,5 @@ export default function HSliderDetailsMobile(props) {
126
126
  '& .MuiSlider-thumb:hover': {
127
127
  boxShadow: 'none',
128
128
  }
129
- }, size: "small", value: props.sharpnessScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onSharpnessChange(newValue), onDoubleClick: () => props.onSharpnessChange(0) })] }) }));
129
+ }, size: "small", value: props.sharpnessScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onSharpnessChange("sharpnessScore", newValue), onDoubleClick: () => props.onSharpnessChange("sharpnessScore", 0) })] }) }));
130
130
  }
package/dist/components/editor/HSliderLightMobile.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { AdjustmentState } from '../../hooks/editor/type';
1
2
  interface Props {
2
3
  exposureScore: number;
3
4
  contrastScore: number;
@@ -5,12 +6,12 @@ interface Props {
5
6
  shadowScore: number;
6
7
  whiteScore: number;
7
8
  blackScore: number;
8
- onExposureChange: (value: number) => void;
9
- onContrastChange: (value: number) => void;
10
- onHighlightsChange: (value: number) => void;
11
- onShadowsChange: (value: number) => void;
12
- onWhitesChange: (value: number) => void;
13
- onBlacksChange: (value: number) => void;
9
+ onExposureChange: (field: keyof AdjustmentState, value: number) => void;
10
+ onContrastChange: (field: keyof AdjustmentState, value: number) => void;
11
+ onHighlightsChange: (field: keyof AdjustmentState, value: number) => void;
12
+ onShadowsChange: (field: keyof AdjustmentState, value: number) => void;
13
+ onWhitesChange: (field: keyof AdjustmentState, value: number) => void;
14
+ onBlacksChange: (field: keyof AdjustmentState, value: number) => void;
14
15
  }
15
16
  export default function HSliderLightMobile(props: Props): import("react/jsx-runtime").JSX.Element;
16
17
  export {};
package/dist/components/editor/HSliderLightMobile.js CHANGED
@@ -20,7 +20,7 @@ export default function HSliderLightMobile(props) {
20
20
  const clampedValue = Math.max(min, Math.min(max, numericValue));
21
21
  onChange(clampedValue);
22
22
  };
23
- 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: "Exposure" }), _jsx(TextField, { hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.exposureScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onExposureChange), sx: {
23
+ 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: "Exposure" }), _jsx(TextField, { 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: {
24
24
  width: "40px",
25
25
  alignItems: "center",
26
26
  textAlign: "right",
@@ -74,7 +74,7 @@ export default function HSliderLightMobile(props) {
74
74
  '& .MuiSlider-thumb:hover': {
75
75
  boxShadow: 'none',
76
76
  }
77
- }, size: "small", value: props.exposureScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onExposureChange(newValue), onDoubleClick: () => props.onExposureChange(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, { hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.contrastScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onContrastChange), sx: {
77
+ }, 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, { 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: {
78
78
  width: "40px",
79
79
  alignItems: "center",
80
80
  textAlign: "right",
@@ -128,7 +128,7 @@ export default function HSliderLightMobile(props) {
128
128
  '& .MuiSlider-thumb:hover': {
129
129
  boxShadow: 'none',
130
130
  }
131
- }, size: "small", value: props.contrastScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onContrastChange(newValue), onDoubleClick: () => props.onContrastChange(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: "Highlights" }), _jsx(TextField, { hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.highlightsScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onHighlightsChange), sx: {
131
+ }, 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 }, children: "Highlights" }), _jsx(TextField, { 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: {
132
132
  width: "40px",
133
133
  alignItems: "center",
134
134
  textAlign: "right",
@@ -182,7 +182,7 @@ export default function HSliderLightMobile(props) {
182
182
  '& .MuiSlider-thumb:hover': {
183
183
  boxShadow: 'none',
184
184
  }
185
- }, size: "small", value: props.highlightsScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onHighlightsChange(newValue), onDoubleClick: () => props.onHighlightsChange(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: "Shadows" }), _jsx(TextField, { hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.shadowScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onShadowsChange), sx: {
185
+ }, 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 }, children: "Shadows" }), _jsx(TextField, { hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.shadowScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onShadowsChange("sharpnessScore", val)), sx: {
186
186
  width: "40px",
187
187
  alignItems: "center",
188
188
  textAlign: "right",
@@ -236,7 +236,7 @@ export default function HSliderLightMobile(props) {
236
236
  '& .MuiSlider-thumb:hover': {
237
237
  boxShadow: 'none',
238
238
  }
239
- }, size: "small", value: props.shadowScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onShadowsChange(newValue), onDoubleClick: () => props.onShadowsChange(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: "Whites" }), _jsx(TextField, { hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.whiteScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onWhitesChange), sx: {
239
+ }, size: "small", value: props.shadowScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onShadowsChange("sharpnessScore", newValue), onDoubleClick: () => props.onShadowsChange("sharpnessScore", 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: "Whites" }), _jsx(TextField, { 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: {
240
240
  width: "40px",
241
241
  alignItems: "center",
242
242
  textAlign: "right",
@@ -290,7 +290,7 @@ export default function HSliderLightMobile(props) {
290
290
  '& .MuiSlider-thumb:hover': {
291
291
  boxShadow: 'none',
292
292
  }
293
- }, size: "small", value: props.whiteScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onWhitesChange(newValue), onDoubleClick: () => props.onWhitesChange(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: "Blacks" }), _jsx(TextField, { hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.blackScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onBlacksChange), sx: {
293
+ }, 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 }, children: "Blacks" }), _jsx(TextField, { 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: {
294
294
  width: "40px",
295
295
  alignItems: "center",
296
296
  textAlign: "right",
@@ -344,5 +344,5 @@ export default function HSliderLightMobile(props) {
344
344
  '& .MuiSlider-thumb:hover': {
345
345
  boxShadow: 'none',
346
346
  }
347
- }, size: "small", value: props.blackScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onBlacksChange(newValue), onDoubleClick: () => props.onBlacksChange(0) })] }) }));
347
+ }, size: "small", value: props.blackScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onBlacksChange("blacksScore", newValue), onDoubleClick: () => props.onBlacksChange("blacksScore", 0) })] }) }));
348
348
  }
package/dist/components/editor/HTabColorAdjustmentMobile.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { AdjustmentState } from '../../hooks/editor/type';
1
2
  interface Props {
2
3
  activeSubPanel: string;
3
4
  tempScore: number;
@@ -12,18 +13,18 @@ interface Props {
12
13
  contrastScore: number;
13
14
  clarityScore: number;
14
15
  sharpnessScore: number;
15
- onTempChange: (value: number) => void;
16
- onTintChange: (value: number) => void;
17
- onVibranceChange: (value: number) => void;
18
- onSaturationChange: (value: number) => void;
19
- onExposureChange: (value: number) => void;
20
- onHighlightsChange: (value: number) => void;
21
- onShadowsChange: (value: number) => void;
22
- onWhitesChange: (value: number) => void;
23
- onBlacksChange: (value: number) => void;
24
- onContrastChange: (value: number) => void;
25
- onClarityChange: (value: number) => void;
26
- onSharpnessChange: (value: number) => void;
16
+ onTempChange: (field: keyof AdjustmentState, value: number) => void;
17
+ onTintChange: (field: keyof AdjustmentState, value: number) => void;
18
+ onVibranceChange: (field: keyof AdjustmentState, value: number) => void;
19
+ onSaturationChange: (field: keyof AdjustmentState, value: number) => void;
20
+ onExposureChange: (field: keyof AdjustmentState, value: number) => void;
21
+ onHighlightsChange: (field: keyof AdjustmentState, value: number) => void;
22
+ onShadowsChange: (field: keyof AdjustmentState, value: number) => void;
23
+ onWhitesChange: (field: keyof AdjustmentState, value: number) => void;
24
+ onBlacksChange: (field: keyof AdjustmentState, value: number) => void;
25
+ onContrastChange: (field: keyof AdjustmentState, value: number) => void;
26
+ onClarityChange: (field: keyof AdjustmentState, value: number) => void;
27
+ onSharpnessChange: (field: keyof AdjustmentState, value: number) => void;
27
28
  }
28
29
  export default function HTabColorAdjustmentMobile(props: Props): import("react/jsx-runtime").JSX.Element | null;
29
30
  export {};
package/dist/index.d.ts CHANGED
@@ -28,6 +28,7 @@ export { default as GalleryImageItem } from './components/editor/GalleryAlbum/Im
28
28
  export { EditorProvider, useEditorContext } from './lib/context/EditorContext';
29
29
  export { useImageProcessor } from './lib/hooks/useImageProcessor';
30
30
  export { useEditorHeadless } from './lib/hooks/useEditorHeadless';
31
+ export { ImageSize, HonchoEditor, AdjustmentValues, AdjustmentRange, AdjustmentRanges } from './lib/editor/honcho-editor';
31
32
  export { useAdjustmentHistory, type UseAdjustmentHistoryReturn, type HistoryInfo, type HistoryActions, type HistoryConfig } from './hooks/useAdjustmentHistory';
32
33
  export { useAdjustmentHistoryBatch, type UseAdjustmentHistoryBatchReturn, type BatchAdjustmentState, type ImageAdjustmentConfig, type BatchHistoryInfo, type BatchHistoryActions, type BatchHistoryConfig } from './hooks/useAdjustmentHistoryBatch';
33
34
  export { usePreset, type UsePresetReturn, type PresetInfo, type PresetActions, type PresetOptions } from './hooks/usePreset';
package/dist/index.js CHANGED
@@ -27,6 +27,7 @@ export { default as GalleryImageItem } from './components/editor/GalleryAlbum/Im
27
27
  export { EditorProvider, useEditorContext } from './lib/context/EditorContext';
28
28
  export { useImageProcessor } from './lib/hooks/useImageProcessor';
29
29
  export { useEditorHeadless } from './lib/hooks/useEditorHeadless';
30
+ export { HonchoEditor } from './lib/editor/honcho-editor';
30
31
  // --- History Hooks ---
31
32
  export { useAdjustmentHistory } from './hooks/useAdjustmentHistory';
32
33
  export { useAdjustmentHistoryBatch } from './hooks/useAdjustmentHistoryBatch';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yogiswara/honcho-editor-ui",
3
- "version": "2.6.4",
3
+ "version": "2.6.6",
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",