@yogiswara/honcho-editor-ui 3.5.4 → 3.5.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/components/editor/HBulkColorMobile.js +20 -113
  2. 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/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.5",
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",