@yogiswara/honcho-editor-ui 3.5.4 → 3.5.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 (4) hide show
  1. package/dist/components/editor/HBulkColorMobile.js +20 -113
  2. package/dist/components/editor/HBulkDetailsMobile.js +20 -57
  3. package/dist/components/editor/HBulkLightMobile.js +18 -182
  4. package/package.json +1 -1
package/dist/components/editor/HBulkColorMobile.js CHANGED
@@ -5,117 +5,24 @@ import useColors from '../../themes/colors';
5
5
  export default function HBulkColorMobile(props) {
6
6
  const typography = useHonchoTypography();
7
7
  const colors = useColors();
8
- return (_jsx(_Fragment, { children: _jsxs(Stack, { spacing: 0, direction: "column", sx: { width: '100%', pl: "10px", m: "0px" }, children: [_jsx(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: "6px" }, children: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Temperature" }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { p: "0px", m: "0px", pt: "2px", pb: "16px" }, children: [_jsx(IconButton, { onClick: props.onTempDecreaseMax, sx: {
9
- width: "76px",
10
- height: "28px",
11
- py: "2px",
12
- mr: "12px",
13
- border: "1px solid white",
14
- borderRadius: "100px",
15
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button.svg", sx: { width: "20px", height: "20px", mr: "2px" } }) }), _jsx(IconButton, { onClick: props.onTempDecrease, sx: {
16
- width: "76px",
17
- height: "28px",
18
- py: "2px",
19
- mr: "12px",
20
- border: "1px solid white",
21
- borderRadius: "100px",
22
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button.svg", sx: { width: "20px", height: "20px", mr: "3px" } }) }), _jsx(IconButton, { onClick: props.onTempIncrease, sx: {
23
- width: "76px",
24
- height: "28px",
25
- py: "2px",
26
- mr: "12px",
27
- border: "1px solid white",
28
- borderRadius: "100px",
29
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button-right.svg", sx: { width: "20px", height: "20px", ml: "3px" } }) }), _jsx(IconButton, { onClick: props.onTempIncreaseMax, sx: {
30
- width: "76px",
31
- height: "28px",
32
- py: "2px",
33
- mr: "12px",
34
- border: "1px solid white",
35
- borderRadius: "100px",
36
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button-right.svg", sx: { width: "20px", height: "20px", ml: "2px" } }) })] }), _jsx(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: "6px" }, children: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Tint" }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { p: "0px", m: "0px", pt: "2px", pb: "16px" }, children: [_jsx(IconButton, { onClick: props.onTintDecreaseMax, sx: {
37
- width: "76px",
38
- height: "28px",
39
- py: "2px",
40
- mr: "12px",
41
- border: "1px solid white",
42
- borderRadius: "100px",
43
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button.svg", sx: { width: "20px", height: "20px", mr: "2px" } }) }), _jsx(IconButton, { onClick: props.onTintDecrease, sx: {
44
- width: "76px",
45
- height: "28px",
46
- py: "2px",
47
- mr: "12px",
48
- border: "1px solid white",
49
- borderRadius: "100px",
50
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button.svg", sx: { width: "20px", height: "20px", mr: "3px" } }) }), _jsx(IconButton, { onClick: props.onTintIncrease, sx: {
51
- width: "76px",
52
- height: "28px",
53
- py: "2px",
54
- mr: "12px",
55
- border: "1px solid white",
56
- borderRadius: "100px",
57
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button-right.svg", sx: { width: "20px", height: "20px", ml: "3px" } }) }), _jsx(IconButton, { onClick: props.onTintIncreaseMax, sx: {
58
- width: "76px",
59
- height: "28px",
60
- py: "2px",
61
- mr: "12px",
62
- border: "1px solid white",
63
- borderRadius: "100px",
64
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button-right.svg", sx: { width: "20px", height: "20px", ml: "2px" } }) })] }), _jsx(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: "6px" }, children: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Vibrance" }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { p: "0px", m: "0px", pt: "2px", pb: "16px" }, children: [_jsx(IconButton, { onClick: props.onVibranceDecreaseMax, sx: {
65
- width: "76px",
66
- height: "28px",
67
- py: "2px",
68
- mr: "12px",
69
- border: "1px solid white",
70
- borderRadius: "100px",
71
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button.svg", sx: { width: "20px", height: "20px", mr: "2px" } }) }), _jsx(IconButton, { onClick: props.onVibranceDecrease, sx: {
72
- width: "76px",
73
- height: "28px",
74
- py: "2px",
75
- mr: "12px",
76
- border: "1px solid white",
77
- borderRadius: "100px",
78
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button.svg", sx: { width: "20px", height: "20px", mr: "3px" } }) }), _jsx(IconButton, { onClick: props.onVibranceIncrease, sx: {
79
- width: "76px",
80
- height: "28px",
81
- py: "2px",
82
- mr: "12px",
83
- border: "1px solid white",
84
- borderRadius: "100px",
85
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button-right.svg", sx: { width: "20px", height: "20px", ml: "3px" } }) }), _jsx(IconButton, { onClick: props.onVibranceIncreaseMax, sx: {
86
- width: "76px",
87
- height: "28px",
88
- py: "2px",
89
- mr: "12px",
90
- border: "1px solid white",
91
- borderRadius: "100px",
92
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button-right.svg", sx: { width: "20px", height: "20px", ml: "2px" } }) })] }), _jsx(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: "6px" }, children: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Saturation" }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { p: "0px", m: "0px", pt: "2px", pb: "16px" }, children: [_jsx(IconButton, { onClick: props.onSaturationDecreaseMax, sx: {
93
- width: "76px",
94
- height: "28px",
95
- py: "2px",
96
- mr: "12px",
97
- border: "1px solid white",
98
- borderRadius: "100px",
99
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button.svg", sx: { width: "20px", height: "20px", mr: "2px" } }) }), _jsx(IconButton, { onClick: props.onSaturationDecrease, sx: {
100
- width: "76px",
101
- height: "28px",
102
- py: "2px",
103
- mr: "12px",
104
- border: "1px solid white",
105
- borderRadius: "100px",
106
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button.svg", sx: { width: "20px", height: "20px", mr: "3px" } }) }), _jsx(IconButton, { onClick: props.onSaturationIncrease, sx: {
107
- width: "76px",
108
- height: "28px",
109
- py: "2px",
110
- mr: "12px",
111
- border: "1px solid white",
112
- borderRadius: "100px",
113
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button-right.svg", sx: { width: "20px", height: "20px", ml: "3px" } }) }), _jsx(IconButton, { onClick: props.onSaturationIncreaseMax, sx: {
114
- width: "76px",
115
- height: "28px",
116
- py: "2px",
117
- mr: "12px",
118
- border: "1px solid white",
119
- borderRadius: "100px",
120
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button-right.svg", sx: { width: "20px", height: "20px", ml: "2px" } }) })] })] }) }));
8
+ const buttonSx = {
9
+ width: "76px",
10
+ height: "28px",
11
+ py: "2px",
12
+ mr: "12px",
13
+ border: "1px solid white",
14
+ borderRadius: "100px",
15
+ // This transition makes the click effect smooth
16
+ transition: "transform 0.1s ease-in-out, background-color 0.1s ease-in-out",
17
+ // Styles for when the button is actively being pressed
18
+ '&:active': {
19
+ transform: 'scale(0.95)', // Makes the button shrink slightly, like a real press
20
+ backgroundColor: 'rgba(255, 255, 255, 0.12)', // Adds a subtle background color
21
+ }
22
+ };
23
+ const lastButtonSx = {
24
+ ...buttonSx,
25
+ mr: "0px", // Removes the right margin
26
+ };
27
+ return (_jsx(_Fragment, { children: _jsxs(Stack, { spacing: 0, direction: "column", sx: { width: '100%', pl: "10px", m: "0px" }, children: [_jsx(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: "6px" }, children: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Temperature" }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { p: "0px", m: "0px", pt: "2px", pb: "16px" }, children: [_jsx(IconButton, { onClick: props.onTempDecreaseMax, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button.svg", sx: { width: "20px", height: "20px", mr: "2px" } }) }), _jsx(IconButton, { onClick: props.onTempDecrease, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button.svg", sx: { width: "20px", height: "20px", mr: "3px" } }) }), _jsx(IconButton, { onClick: props.onTempIncrease, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button-right.svg", sx: { width: "20px", height: "20px", ml: "3px" } }) }), _jsx(IconButton, { onClick: props.onTempIncreaseMax, sx: lastButtonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button-right.svg", sx: { width: "20px", height: "20px", ml: "2px" } }) })] }), _jsx(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: "6px" }, children: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Tint" }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { p: "0px", m: "0px", pt: "2px", pb: "16px" }, children: [_jsx(IconButton, { onClick: props.onTintDecreaseMax, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button.svg", sx: { width: "20px", height: "20px", mr: "2px" } }) }), _jsx(IconButton, { onClick: props.onTintDecrease, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button.svg", sx: { width: "20px", height: "20px", mr: "3px" } }) }), _jsx(IconButton, { onClick: props.onTintIncrease, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button-right.svg", sx: { width: "20px", height: "20px", ml: "3px" } }) }), _jsx(IconButton, { onClick: props.onTintIncreaseMax, sx: lastButtonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button-right.svg", sx: { width: "20px", height: "20px", ml: "2px" } }) })] }), _jsx(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: "6px" }, children: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Vibrance" }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { p: "0px", m: "0px", pt: "2px", pb: "16px" }, children: [_jsx(IconButton, { onClick: props.onVibranceDecreaseMax, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button.svg", sx: { width: "20px", height: "20px", mr: "2px" } }) }), _jsx(IconButton, { onClick: props.onVibranceDecrease, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button.svg", sx: { width: "20px", height: "20px", mr: "3px" } }) }), _jsx(IconButton, { onClick: props.onVibranceIncrease, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button-right.svg", sx: { width: "20px", height: "20px", ml: "3px" } }) }), _jsx(IconButton, { onClick: props.onVibranceIncreaseMax, sx: lastButtonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button-right.svg", sx: { width: "20px", height: "20px", ml: "2px" } }) })] }), _jsx(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: "6px" }, children: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Saturation" }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { p: "0px", m: "0px", pt: "2px", pb: "16px" }, children: [_jsx(IconButton, { onClick: props.onSaturationDecreaseMax, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button.svg", sx: { width: "20px", height: "20px", mr: "2px" } }) }), _jsx(IconButton, { onClick: props.onSaturationDecrease, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button.svg", sx: { width: "20px", height: "20px", mr: "3px" } }) }), _jsx(IconButton, { onClick: props.onSaturationIncrease, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button-right.svg", sx: { width: "20px", height: "20px", ml: "3px" } }) }), _jsx(IconButton, { onClick: props.onSaturationIncreaseMax, sx: lastButtonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button-right.svg", sx: { width: "20px", height: "20px", ml: "2px" } }) })] })] }) }));
121
28
  }
package/dist/components/editor/HBulkDetailsMobile.js CHANGED
@@ -5,61 +5,24 @@ import useColors from '../../themes/colors';
5
5
  export default function HBulkDetailsMobile(props) {
6
6
  const typography = useHonchoTypography();
7
7
  const colors = useColors();
8
- return (_jsx(_Fragment, { children: _jsxs(Stack, { spacing: 0, direction: "column", sx: { width: '100%', pl: "10px", m: "0px" }, children: [_jsx(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: "6px" }, children: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Clarity" }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { p: "0px", m: "0px", pt: "2px", pb: "16px" }, children: [_jsx(IconButton, { onClick: props.onClarityDecreaseMax, sx: {
9
- width: "76px",
10
- height: "28px",
11
- py: "2px",
12
- mr: "12px",
13
- border: "1px solid white",
14
- borderRadius: "100px",
15
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button.svg", sx: { width: "20px", height: "20px", mr: "2px" } }) }), _jsx(IconButton, { onClick: props.onClarityDecrease, sx: {
16
- width: "76px",
17
- height: "28px",
18
- py: "2px",
19
- mr: "12px",
20
- border: "1px solid white",
21
- borderRadius: "100px",
22
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button.svg", sx: { width: "20px", height: "20px", mr: "3px" } }) }), _jsx(IconButton, { onClick: props.onClarityIncrease, sx: {
23
- width: "76px",
24
- height: "28px",
25
- py: "2px",
26
- mr: "12px",
27
- border: "1px solid white",
28
- borderRadius: "100px",
29
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button-right.svg", sx: { width: "20px", height: "20px", ml: "3px" } }) }), _jsx(IconButton, { onClick: props.onClarityIncreaseMax, sx: {
30
- width: "76px",
31
- height: "28px",
32
- py: "2px",
33
- mr: "12px",
34
- border: "1px solid white",
35
- borderRadius: "100px",
36
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button-right.svg", sx: { width: "20px", height: "20px", ml: "2px" } }) })] }), _jsx(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: "6px" }, children: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Sharpness" }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { p: "0px", m: "0px", pt: "2px", pb: "2px" }, children: [_jsx(IconButton, { onClick: props.onSharpnessDecreaseMax, sx: {
37
- width: "76px",
38
- height: "28px",
39
- py: "2px",
40
- mr: "12px",
41
- border: "1px solid white",
42
- borderRadius: "100px",
43
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button.svg", sx: { width: "20px", height: "20px", mr: "2px" } }) }), _jsx(IconButton, { onClick: props.onSharpnessDecrease, sx: {
44
- width: "76px",
45
- height: "28px",
46
- py: "2px",
47
- mr: "12px",
48
- border: "1px solid white",
49
- borderRadius: "100px",
50
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button.svg", sx: { width: "20px", height: "20px", mr: "3px" } }) }), _jsx(IconButton, { onClick: props.onSharpnessIncrease, sx: {
51
- width: "76px",
52
- height: "28px",
53
- py: "2px",
54
- mr: "12px",
55
- border: "1px solid white",
56
- borderRadius: "100px",
57
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button-right.svg", sx: { width: "20px", height: "20px", ml: "3px" } }) }), _jsx(IconButton, { onClick: props.onSharpnessIncreaseMax, sx: {
58
- width: "76px",
59
- height: "28px",
60
- py: "2px",
61
- mr: "12px",
62
- border: "1px solid white",
63
- borderRadius: "100px",
64
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button-right.svg", sx: { width: "20px", height: "20px", ml: "2px" } }) })] })] }) }));
8
+ const buttonSx = {
9
+ width: "76px",
10
+ height: "28px",
11
+ py: "2px",
12
+ mr: "12px",
13
+ border: "1px solid white",
14
+ borderRadius: "100px",
15
+ // This transition makes the click effect smooth
16
+ transition: "transform 0.1s ease-in-out, background-color 0.1s ease-in-out",
17
+ // Styles for when the button is actively being pressed
18
+ '&:active': {
19
+ transform: 'scale(0.95)', // Makes the button shrink slightly, like a real press
20
+ backgroundColor: 'rgba(255, 255, 255, 0.12)', // Adds a subtle background color
21
+ }
22
+ };
23
+ const lastButtonSx = {
24
+ ...buttonSx,
25
+ mr: "0px", // Removes the right margin
26
+ };
27
+ return (_jsx(_Fragment, { children: _jsxs(Stack, { spacing: 0, direction: "column", sx: { width: '100%', pl: "10px", m: "0px" }, children: [_jsx(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: "6px" }, children: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Clarity" }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { p: "0px", m: "0px", pt: "2px", pb: "16px" }, children: [_jsx(IconButton, { onClick: props.onClarityDecreaseMax, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button.svg", sx: { width: "20px", height: "20px", mr: "2px" } }) }), _jsx(IconButton, { onClick: props.onClarityDecrease, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button.svg", sx: { width: "20px", height: "20px", mr: "3px" } }) }), _jsx(IconButton, { onClick: props.onClarityIncrease, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button-right.svg", sx: { width: "20px", height: "20px", ml: "3px" } }) }), _jsx(IconButton, { onClick: props.onClarityIncreaseMax, sx: lastButtonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button-right.svg", sx: { width: "20px", height: "20px", ml: "2px" } }) })] }), _jsx(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: "6px" }, children: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Sharpness" }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { p: "0px", m: "0px", pt: "2px", pb: "2px" }, children: [_jsx(IconButton, { onClick: props.onSharpnessDecreaseMax, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button.svg", sx: { width: "20px", height: "20px", mr: "2px" } }) }), _jsx(IconButton, { onClick: props.onSharpnessDecrease, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button.svg", sx: { width: "20px", height: "20px", mr: "3px" } }) }), _jsx(IconButton, { onClick: props.onSharpnessIncrease, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button-right.svg", sx: { width: "20px", height: "20px", ml: "3px" } }) }), _jsx(IconButton, { onClick: props.onSharpnessIncreaseMax, sx: lastButtonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button-right.svg", sx: { width: "20px", height: "20px", ml: "2px" } }) })] })] }) }));
65
28
  }
package/dist/components/editor/HBulkLightMobile.js CHANGED
@@ -5,188 +5,24 @@ import useColors from '../../themes/colors';
5
5
  export default function HBulkLightMobile(props) {
6
6
  const typography = useHonchoTypography();
7
7
  const colors = useColors();
8
- const formatValue = (value) => {
9
- if (value > 0)
10
- return `+${value}`;
11
- return value.toString();
8
+ const buttonSx = {
9
+ width: "76px",
10
+ height: "28px",
11
+ py: "2px",
12
+ mr: "12px",
13
+ border: "1px solid white",
14
+ borderRadius: "100px",
15
+ // This transition makes the click effect smooth
16
+ transition: "transform 0.1s ease-in-out, background-color 0.1s ease-in-out",
17
+ // Styles for when the button is actively being pressed
18
+ '&:active': {
19
+ transform: 'scale(0.95)', // Makes the button shrink slightly, like a real press
20
+ backgroundColor: 'rgba(255, 255, 255, 0.12)', // Adds a subtle background color
21
+ }
12
22
  };
13
- const handleInputChange = (event, min, max, onChange) => {
14
- const value = event.target.value;
15
- if (value === '+' || value === '-')
16
- return;
17
- let numericValue = parseInt(value, 10);
18
- if (isNaN(numericValue))
19
- numericValue = 0;
20
- const clampedValue = Math.max(min, Math.min(max, numericValue));
21
- onChange(clampedValue);
23
+ const lastButtonSx = {
24
+ ...buttonSx,
25
+ mr: "0px", // Removes the right margin
22
26
  };
23
- return (_jsx(_Fragment, { children: _jsxs(Stack, { spacing: 0, direction: "column", sx: { width: '100%', pl: "10px", m: "0px" }, children: [_jsx(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: "6px" }, children: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Exposure" }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { p: "0px", m: "0px", pt: "2px", pb: "16px" }, children: [_jsx(IconButton, { onClick: props.onExposureDecreaseMax, sx: {
24
- width: "76px",
25
- height: "28px",
26
- py: "2px",
27
- mr: "12px",
28
- border: "1px solid white",
29
- borderRadius: "100px",
30
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button.svg", sx: { width: "20px", height: "20px", mr: "2px" } }) }), _jsx(IconButton, { onClick: props.onExposureDecrease, sx: {
31
- width: "76px",
32
- height: "28px",
33
- py: "2px",
34
- mr: "12px",
35
- border: "1px solid white",
36
- borderRadius: "100px",
37
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button.svg", sx: { width: "20px", height: "20px", mr: "3px" } }) }), _jsx(IconButton, { onClick: props.onExposureIncrease, sx: {
38
- width: "76px",
39
- height: "28px",
40
- py: "2px",
41
- mr: "12px",
42
- border: "1px solid white",
43
- borderRadius: "100px",
44
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button-right.svg", sx: { width: "20px", height: "20px", ml: "3px" } }) }), _jsx(IconButton, { onClick: props.onExposureIncreaseMax, sx: {
45
- width: "76px",
46
- height: "28px",
47
- py: "2px",
48
- mr: "12px",
49
- border: "1px solid white",
50
- borderRadius: "100px",
51
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button-right.svg", sx: { width: "20px", height: "20px", ml: "2px" } }) })] }), _jsx(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: "6px" }, children: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Contrast" }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { p: "0px", m: "0px", pt: "2px", pb: "16px" }, children: [_jsx(IconButton, { onClick: props.onContrastDecreaseMax, sx: {
52
- width: "76px",
53
- height: "28px",
54
- py: "2px",
55
- mr: "12px",
56
- border: "1px solid white",
57
- borderRadius: "100px",
58
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button.svg", sx: { width: "20px", height: "20px", mr: "2px" } }) }), _jsx(IconButton, { onClick: props.onContrastDecrease, sx: {
59
- width: "76px",
60
- height: "28px",
61
- py: "2px",
62
- mr: "12px",
63
- border: "1px solid white",
64
- borderRadius: "100px",
65
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button.svg", sx: { width: "20px", height: "20px", mr: "3px" } }) }), _jsx(IconButton, { onClick: props.onContrastIncrease, sx: {
66
- width: "76px",
67
- height: "28px",
68
- py: "2px",
69
- mr: "12px",
70
- border: "1px solid white",
71
- borderRadius: "100px",
72
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button-right.svg", sx: { width: "20px", height: "20px", ml: "3px" } }) }), _jsx(IconButton, { onClick: props.onContrastIncreaseMax, sx: {
73
- width: "76px",
74
- height: "28px",
75
- py: "2px",
76
- mr: "12px",
77
- border: "1px solid white",
78
- borderRadius: "100px",
79
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button-right.svg", sx: { width: "20px", height: "20px", ml: "2px" } }) })] }), _jsx(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: "6px" }, children: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Highlights" }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { p: "0px", m: "0px", pt: "2px", pb: "16px" }, children: [_jsx(IconButton, { onClick: props.onHighlightsDecreaseMax, sx: {
80
- width: "76px",
81
- height: "28px",
82
- py: "2px",
83
- mr: "12px",
84
- border: "1px solid white",
85
- borderRadius: "100px",
86
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button.svg", sx: { width: "20px", height: "20px", mr: "2px" } }) }), _jsx(IconButton, { onClick: props.onHighlightsDecrease, sx: {
87
- width: "76px",
88
- height: "28px",
89
- py: "2px",
90
- mr: "12px",
91
- border: "1px solid white",
92
- borderRadius: "100px",
93
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button.svg", sx: { width: "20px", height: "20px", mr: "3px" } }) }), _jsx(IconButton, { onClick: props.onHighlightsIncrease, sx: {
94
- width: "76px",
95
- height: "28px",
96
- py: "2px",
97
- mr: "12px",
98
- border: "1px solid white",
99
- borderRadius: "100px",
100
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button-right.svg", sx: { width: "20px", height: "20px", ml: "3px" } }) }), _jsx(IconButton, { onClick: props.onHighlightsIncreaseMax, sx: {
101
- width: "76px",
102
- height: "28px",
103
- py: "2px",
104
- mr: "12px",
105
- border: "1px solid white",
106
- borderRadius: "100px",
107
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button-right.svg", sx: { width: "20px", height: "20px", ml: "2px" } }) })] }), _jsx(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: "6px" }, children: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Shadows" }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { p: "0px", m: "0px", pt: "2px", pb: "16px" }, children: [_jsx(IconButton, { onClick: props.onShadowsDecreaseMax, sx: {
108
- width: "76px",
109
- height: "28px",
110
- py: "2px",
111
- mr: "12px",
112
- border: "1px solid white",
113
- borderRadius: "100px",
114
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button.svg", sx: { width: "20px", height: "20px", mr: "2px" } }) }), _jsx(IconButton, { onClick: props.onShadowsDecrease, sx: {
115
- width: "76px",
116
- height: "28px",
117
- py: "2px",
118
- mr: "12px",
119
- border: "1px solid white",
120
- borderRadius: "100px",
121
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button.svg", sx: { width: "20px", height: "20px", mr: "3px" } }) }), _jsx(IconButton, { onClick: props.onShadowsIncrease, sx: {
122
- width: "76px",
123
- height: "28px",
124
- py: "2px",
125
- mr: "12px",
126
- border: "1px solid white",
127
- borderRadius: "100px",
128
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button-right.svg", sx: { width: "20px", height: "20px", ml: "3px" } }) }), _jsx(IconButton, { onClick: props.onShadowsIncreaseMax, sx: {
129
- width: "76px",
130
- height: "28px",
131
- py: "2px",
132
- mr: "12px",
133
- border: "1px solid white",
134
- borderRadius: "100px",
135
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button-right.svg", sx: { width: "20px", height: "20px", ml: "2px" } }) })] }), _jsx(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: "6px" }, children: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Whites" }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { p: "0px", m: "0px", pt: "2px", pb: "16px" }, children: [_jsx(IconButton, { onClick: props.onWhitesDecreaseMax, sx: {
136
- width: "76px",
137
- height: "28px",
138
- py: "2px",
139
- mr: "12px",
140
- border: "1px solid white",
141
- borderRadius: "100px",
142
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button.svg", sx: { width: "20px", height: "20px", mr: "2px" } }) }), _jsx(IconButton, { onClick: props.onWhitesDecrease, sx: {
143
- width: "76px",
144
- height: "28px",
145
- py: "2px",
146
- mr: "12px",
147
- border: "1px solid white",
148
- borderRadius: "100px",
149
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button.svg", sx: { width: "20px", height: "20px", mr: "3px" } }) }), _jsx(IconButton, { onClick: props.onWhitesIncrease, sx: {
150
- width: "76px",
151
- height: "28px",
152
- py: "2px",
153
- mr: "12px",
154
- border: "1px solid white",
155
- borderRadius: "100px",
156
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button-right.svg", sx: { width: "20px", height: "20px", ml: "3px" } }) }), _jsx(IconButton, { onClick: props.onWhitesIncreaseMax, sx: {
157
- width: "76px",
158
- height: "28px",
159
- py: "2px",
160
- mr: "12px",
161
- border: "1px solid white",
162
- borderRadius: "100px",
163
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button-right.svg", sx: { width: "20px", height: "20px", ml: "2px" } }) })] }), _jsx(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: "6px" }, children: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Blacks" }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { p: "0px", m: "0px", pt: "2px", pb: "16px" }, children: [_jsx(IconButton, { onClick: props.onBlacksDecreaseMax, sx: {
164
- width: "76px",
165
- height: "28px",
166
- py: "2px",
167
- mr: "12px",
168
- border: "1px solid white",
169
- borderRadius: "100px",
170
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button.svg", sx: { width: "20px", height: "20px", mr: "2px" } }) }), _jsx(IconButton, { onClick: props.onBlacksDecrease, sx: {
171
- width: "76px",
172
- height: "28px",
173
- py: "2px",
174
- mr: "12px",
175
- border: "1px solid white",
176
- borderRadius: "100px",
177
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button.svg", sx: { width: "20px", height: "20px", mr: "3px" } }) }), _jsx(IconButton, { onClick: props.onBlacksIncrease, sx: {
178
- width: "76px",
179
- height: "28px",
180
- py: "2px",
181
- mr: "12px",
182
- border: "1px solid white",
183
- borderRadius: "100px",
184
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button-right.svg", sx: { width: "20px", height: "20px", ml: "3px" } }) }), _jsx(IconButton, { onClick: props.onBlacksIncreaseMax, sx: {
185
- width: "76px",
186
- height: "28px",
187
- py: "2px",
188
- mr: "12px",
189
- border: "1px solid white",
190
- borderRadius: "100px",
191
- }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button-right.svg", sx: { width: "20px", height: "20px", ml: "2px" } }) })] })] }) }));
27
+ return (_jsx(_Fragment, { children: _jsxs(Stack, { spacing: 0, direction: "column", sx: { width: '100%', pl: "10px", m: "0px" }, children: [_jsx(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: "6px" }, children: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Exposure" }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { p: "0px", m: "0px", pt: "2px", pb: "16px" }, children: [_jsx(IconButton, { onClick: props.onExposureDecreaseMax, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button.svg", sx: { width: "20px", height: "20px", mr: "2px" } }) }), _jsx(IconButton, { onClick: props.onExposureDecrease, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button.svg", sx: { width: "20px", height: "20px", mr: "3px" } }) }), _jsx(IconButton, { onClick: props.onExposureIncrease, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button-right.svg", sx: { width: "20px", height: "20px", ml: "3px" } }) }), _jsx(IconButton, { onClick: props.onExposureIncreaseMax, sx: lastButtonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button-right.svg", sx: { width: "20px", height: "20px", ml: "2px" } }) })] }), _jsx(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: "6px" }, children: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Contrast" }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { p: "0px", m: "0px", pt: "2px", pb: "16px" }, children: [_jsx(IconButton, { onClick: props.onContrastDecreaseMax, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button.svg", sx: { width: "20px", height: "20px", mr: "2px" } }) }), _jsx(IconButton, { onClick: props.onContrastDecrease, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button.svg", sx: { width: "20px", height: "20px", mr: "3px" } }) }), _jsx(IconButton, { onClick: props.onContrastIncrease, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button-right.svg", sx: { width: "20px", height: "20px", ml: "3px" } }) }), _jsx(IconButton, { onClick: props.onContrastIncreaseMax, sx: lastButtonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button-right.svg", sx: { width: "20px", height: "20px", ml: "2px" } }) })] }), _jsx(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: "6px" }, children: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Highlights" }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { p: "0px", m: "0px", pt: "2px", pb: "16px" }, children: [_jsx(IconButton, { onClick: props.onHighlightsDecreaseMax, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button.svg", sx: { width: "20px", height: "20px", mr: "2px" } }) }), _jsx(IconButton, { onClick: props.onHighlightsDecrease, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button.svg", sx: { width: "20px", height: "20px", mr: "3px" } }) }), _jsx(IconButton, { onClick: props.onHighlightsIncrease, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button-right.svg", sx: { width: "20px", height: "20px", ml: "3px" } }) }), _jsx(IconButton, { onClick: props.onHighlightsIncreaseMax, sx: lastButtonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button-right.svg", sx: { width: "20px", height: "20px", ml: "2px" } }) })] }), _jsx(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: "6px" }, children: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Shadows" }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { p: "0px", m: "0px", pt: "2px", pb: "16px" }, children: [_jsx(IconButton, { onClick: props.onShadowsDecreaseMax, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button.svg", sx: { width: "20px", height: "20px", mr: "2px" } }) }), _jsx(IconButton, { onClick: props.onShadowsDecrease, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button.svg", sx: { width: "20px", height: "20px", mr: "3px" } }) }), _jsx(IconButton, { onClick: props.onShadowsIncrease, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button-right.svg", sx: { width: "20px", height: "20px", ml: "3px" } }) }), _jsx(IconButton, { onClick: props.onShadowsIncreaseMax, sx: lastButtonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button-right.svg", sx: { width: "20px", height: "20px", ml: "2px" } }) })] }), _jsx(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: "6px" }, children: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Whites" }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { p: "0px", m: "0px", pt: "2px", pb: "16px" }, children: [_jsx(IconButton, { onClick: props.onWhitesDecreaseMax, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button.svg", sx: { width: "20px", height: "20px", mr: "2px" } }) }), _jsx(IconButton, { onClick: props.onWhitesDecrease, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button.svg", sx: { width: "20px", height: "20px", mr: "3px" } }) }), _jsx(IconButton, { onClick: props.onWhitesIncrease, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button-right.svg", sx: { width: "20px", height: "20px", ml: "3px" } }) }), _jsx(IconButton, { onClick: props.onWhitesIncreaseMax, sx: lastButtonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button-right.svg", sx: { width: "20px", height: "20px", ml: "2px" } }) })] }), _jsx(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: "6px" }, children: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Blacks" }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { p: "0px", m: "0px", pt: "2px", pb: "16px" }, children: [_jsx(IconButton, { onClick: props.onBlacksDecreaseMax, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button.svg", sx: { width: "20px", height: "20px", mr: "2px" } }) }), _jsx(IconButton, { onClick: props.onBlacksDecrease, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button.svg", sx: { width: "20px", height: "20px", mr: "3px" } }) }), _jsx(IconButton, { onClick: props.onBlacksIncrease, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button-right.svg", sx: { width: "20px", height: "20px", ml: "3px" } }) }), _jsx(IconButton, { onClick: props.onBlacksIncreaseMax, sx: lastButtonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button-right.svg", sx: { width: "20px", height: "20px", ml: "2px" } }) })] })] }) }));
192
28
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yogiswara/honcho-editor-ui",
3
- "version": "3.5.4",
3
+ "version": "3.5.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",