@onlynative/components 0.1.0-alpha.3 → 0.1.0
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.
- package/dist/appbar/index.js +54 -122
- package/dist/button/index.js +31 -120
- package/dist/card/index.js +20 -89
- package/dist/checkbox/index.js +10 -75
- package/dist/chip/index.js +29 -118
- package/dist/icon-button/index.js +32 -97
- package/dist/index.d.ts +1 -0
- package/dist/index.js +461 -474
- package/dist/keyboard-avoiding-wrapper/index.d.ts +36 -0
- package/dist/keyboard-avoiding-wrapper/index.js +98 -0
- package/dist/list/index.js +5 -50
- package/dist/radio/index.js +8 -35
- package/dist/switch/index.js +12 -77
- package/dist/text-field/index.js +25 -78
- package/package.json +13 -3
- package/src/appbar/AppBar.tsx +1 -1
- package/src/button/Button.tsx +1 -1
- package/src/button/styles.ts +1 -2
- package/src/card/styles.ts +1 -2
- package/src/checkbox/Checkbox.tsx +1 -1
- package/src/checkbox/styles.ts +1 -1
- package/src/chip/Chip.tsx +1 -1
- package/src/chip/styles.ts +1 -2
- package/src/icon-button/IconButton.tsx +5 -2
- package/src/icon-button/styles.ts +1 -1
- package/src/index.ts +3 -0
- package/src/keyboard-avoiding-wrapper/KeyboardAvoidingWrapper.tsx +69 -0
- package/src/keyboard-avoiding-wrapper/index.ts +2 -0
- package/src/keyboard-avoiding-wrapper/styles.ts +10 -0
- package/src/keyboard-avoiding-wrapper/types.ts +37 -0
- package/src/list/styles.ts +1 -1
- package/src/radio/styles.ts +1 -1
- package/src/switch/Switch.tsx +1 -1
- package/src/switch/styles.ts +1 -1
- package/src/text-field/TextField.tsx +1 -1
- package/src/text-field/styles.ts +1 -2
- package/src/typography/Typography.tsx +2 -0
- package/src/test-utils/render-with-theme.tsx +0 -13
- package/src/utils/color.ts +0 -64
- package/src/utils/elevation.ts +0 -33
- package/src/utils/icon.ts +0 -30
- package/src/utils/rtl.ts +0 -19
package/dist/button/index.js
CHANGED
|
@@ -26,119 +26,30 @@ module.exports = __toCommonJS(button_exports);
|
|
|
26
26
|
|
|
27
27
|
// src/button/Button.tsx
|
|
28
28
|
var import_react = require("react");
|
|
29
|
+
var import_react_native2 = require("react-native");
|
|
29
30
|
var import_react_native3 = require("react-native");
|
|
30
31
|
var import_react_native4 = require("react-native");
|
|
31
|
-
var import_react_native5 = require("react-native");
|
|
32
32
|
var import_core = require("@onlynative/core");
|
|
33
|
-
|
|
34
|
-
// src/utils/icon.ts
|
|
35
|
-
var _MCIcons = null;
|
|
36
|
-
var _resolved = false;
|
|
37
|
-
function getMaterialCommunityIcons() {
|
|
38
|
-
if (!_resolved) {
|
|
39
|
-
_resolved = true;
|
|
40
|
-
try {
|
|
41
|
-
const mod = require("@expo/vector-icons/MaterialCommunityIcons");
|
|
42
|
-
_MCIcons = mod.default || mod;
|
|
43
|
-
} catch {
|
|
44
|
-
_MCIcons = null;
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
if (!_MCIcons) {
|
|
48
|
-
throw new Error(
|
|
49
|
-
"@expo/vector-icons is required for icon support. Install it with: npx expo install @expo/vector-icons"
|
|
50
|
-
);
|
|
51
|
-
}
|
|
52
|
-
return _MCIcons;
|
|
53
|
-
}
|
|
33
|
+
var import_utils2 = require("@onlynative/utils");
|
|
54
34
|
|
|
55
35
|
// src/button/styles.ts
|
|
56
|
-
var import_react_native2 = require("react-native");
|
|
57
|
-
|
|
58
|
-
// src/utils/color.ts
|
|
59
|
-
function parseHexColor(color) {
|
|
60
|
-
const normalized = color.replace("#", "");
|
|
61
|
-
if (normalized.length !== 6 && normalized.length !== 8) {
|
|
62
|
-
return null;
|
|
63
|
-
}
|
|
64
|
-
const r = Number.parseInt(normalized.slice(0, 2), 16);
|
|
65
|
-
const g = Number.parseInt(normalized.slice(2, 4), 16);
|
|
66
|
-
const b = Number.parseInt(normalized.slice(4, 6), 16);
|
|
67
|
-
if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) {
|
|
68
|
-
return null;
|
|
69
|
-
}
|
|
70
|
-
return { r, g, b };
|
|
71
|
-
}
|
|
72
|
-
function clampAlpha(alpha) {
|
|
73
|
-
return Math.max(0, Math.min(1, alpha));
|
|
74
|
-
}
|
|
75
|
-
function alphaColor(color, alpha) {
|
|
76
|
-
const channels = parseHexColor(color);
|
|
77
|
-
const boundedAlpha = clampAlpha(alpha);
|
|
78
|
-
if (!channels) {
|
|
79
|
-
return color;
|
|
80
|
-
}
|
|
81
|
-
return `rgba(${channels.r}, ${channels.g}, ${channels.b}, ${boundedAlpha})`;
|
|
82
|
-
}
|
|
83
|
-
function blendColor(base, overlay, overlayAlpha) {
|
|
84
|
-
const baseChannels = parseHexColor(base);
|
|
85
|
-
const overlayChannels = parseHexColor(overlay);
|
|
86
|
-
const boundedAlpha = clampAlpha(overlayAlpha);
|
|
87
|
-
if (!baseChannels || !overlayChannels) {
|
|
88
|
-
return alphaColor(overlay, boundedAlpha);
|
|
89
|
-
}
|
|
90
|
-
const r = Math.round(
|
|
91
|
-
(1 - boundedAlpha) * baseChannels.r + boundedAlpha * overlayChannels.r
|
|
92
|
-
);
|
|
93
|
-
const g = Math.round(
|
|
94
|
-
(1 - boundedAlpha) * baseChannels.g + boundedAlpha * overlayChannels.g
|
|
95
|
-
);
|
|
96
|
-
const b = Math.round(
|
|
97
|
-
(1 - boundedAlpha) * baseChannels.b + boundedAlpha * overlayChannels.b
|
|
98
|
-
);
|
|
99
|
-
return `rgb(${r}, ${g}, ${b})`;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
// src/utils/elevation.ts
|
|
103
36
|
var import_react_native = require("react-native");
|
|
104
|
-
|
|
105
|
-
if (import_react_native.Platform.OS === "web") {
|
|
106
|
-
const { shadowOffset, shadowOpacity, shadowRadius } = level;
|
|
107
|
-
if (shadowOpacity === 0) {
|
|
108
|
-
return { boxShadow: "none" };
|
|
109
|
-
}
|
|
110
|
-
return {
|
|
111
|
-
boxShadow: `${shadowOffset.width}px ${shadowOffset.height}px ${shadowRadius}px rgba(0, 0, 0, ${shadowOpacity})`
|
|
112
|
-
};
|
|
113
|
-
}
|
|
114
|
-
return {
|
|
115
|
-
shadowColor: level.shadowColor,
|
|
116
|
-
shadowOffset: {
|
|
117
|
-
width: level.shadowOffset.width,
|
|
118
|
-
height: level.shadowOffset.height
|
|
119
|
-
},
|
|
120
|
-
shadowOpacity: level.shadowOpacity,
|
|
121
|
-
shadowRadius: level.shadowRadius,
|
|
122
|
-
elevation: level.elevation
|
|
123
|
-
};
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
// src/button/styles.ts
|
|
37
|
+
var import_utils = require("@onlynative/utils");
|
|
127
38
|
function getVariantColors(theme, variant) {
|
|
128
|
-
const disabledContainerColor = alphaColor(theme.colors.onSurface, 0.12);
|
|
129
|
-
const disabledLabelColor = alphaColor(theme.colors.onSurface, 0.38);
|
|
130
|
-
const disabledOutlineColor = alphaColor(theme.colors.onSurface, 0.12);
|
|
39
|
+
const disabledContainerColor = (0, import_utils.alphaColor)(theme.colors.onSurface, 0.12);
|
|
40
|
+
const disabledLabelColor = (0, import_utils.alphaColor)(theme.colors.onSurface, 0.38);
|
|
41
|
+
const disabledOutlineColor = (0, import_utils.alphaColor)(theme.colors.onSurface, 0.12);
|
|
131
42
|
if (variant === "outlined") {
|
|
132
43
|
return {
|
|
133
44
|
backgroundColor: "transparent",
|
|
134
45
|
textColor: theme.colors.primary,
|
|
135
46
|
borderColor: theme.colors.outline,
|
|
136
47
|
borderWidth: 1,
|
|
137
|
-
hoveredBackgroundColor: alphaColor(
|
|
48
|
+
hoveredBackgroundColor: (0, import_utils.alphaColor)(
|
|
138
49
|
theme.colors.primary,
|
|
139
50
|
theme.stateLayer.hoveredOpacity
|
|
140
51
|
),
|
|
141
|
-
pressedBackgroundColor: alphaColor(
|
|
52
|
+
pressedBackgroundColor: (0, import_utils.alphaColor)(
|
|
142
53
|
theme.colors.primary,
|
|
143
54
|
theme.stateLayer.pressedOpacity
|
|
144
55
|
),
|
|
@@ -153,11 +64,11 @@ function getVariantColors(theme, variant) {
|
|
|
153
64
|
textColor: theme.colors.primary,
|
|
154
65
|
borderColor: "transparent",
|
|
155
66
|
borderWidth: 0,
|
|
156
|
-
hoveredBackgroundColor: alphaColor(
|
|
67
|
+
hoveredBackgroundColor: (0, import_utils.alphaColor)(
|
|
157
68
|
theme.colors.primary,
|
|
158
69
|
theme.stateLayer.hoveredOpacity
|
|
159
70
|
),
|
|
160
|
-
pressedBackgroundColor: alphaColor(
|
|
71
|
+
pressedBackgroundColor: (0, import_utils.alphaColor)(
|
|
161
72
|
theme.colors.primary,
|
|
162
73
|
theme.stateLayer.pressedOpacity
|
|
163
74
|
),
|
|
@@ -172,12 +83,12 @@ function getVariantColors(theme, variant) {
|
|
|
172
83
|
textColor: theme.colors.primary,
|
|
173
84
|
borderColor: theme.colors.surfaceContainerLow,
|
|
174
85
|
borderWidth: 0,
|
|
175
|
-
hoveredBackgroundColor: blendColor(
|
|
86
|
+
hoveredBackgroundColor: (0, import_utils.blendColor)(
|
|
176
87
|
theme.colors.surfaceContainerLow,
|
|
177
88
|
theme.colors.primary,
|
|
178
89
|
theme.stateLayer.hoveredOpacity
|
|
179
90
|
),
|
|
180
|
-
pressedBackgroundColor: blendColor(
|
|
91
|
+
pressedBackgroundColor: (0, import_utils.blendColor)(
|
|
181
92
|
theme.colors.surfaceContainerLow,
|
|
182
93
|
theme.colors.primary,
|
|
183
94
|
theme.stateLayer.pressedOpacity
|
|
@@ -193,12 +104,12 @@ function getVariantColors(theme, variant) {
|
|
|
193
104
|
textColor: theme.colors.onSecondaryContainer,
|
|
194
105
|
borderColor: theme.colors.secondaryContainer,
|
|
195
106
|
borderWidth: 0,
|
|
196
|
-
hoveredBackgroundColor: blendColor(
|
|
107
|
+
hoveredBackgroundColor: (0, import_utils.blendColor)(
|
|
197
108
|
theme.colors.secondaryContainer,
|
|
198
109
|
theme.colors.onSecondaryContainer,
|
|
199
110
|
theme.stateLayer.hoveredOpacity
|
|
200
111
|
),
|
|
201
|
-
pressedBackgroundColor: blendColor(
|
|
112
|
+
pressedBackgroundColor: (0, import_utils.blendColor)(
|
|
202
113
|
theme.colors.secondaryContainer,
|
|
203
114
|
theme.colors.onSecondaryContainer,
|
|
204
115
|
theme.stateLayer.pressedOpacity
|
|
@@ -213,12 +124,12 @@ function getVariantColors(theme, variant) {
|
|
|
213
124
|
textColor: theme.colors.onPrimary,
|
|
214
125
|
borderColor: theme.colors.primary,
|
|
215
126
|
borderWidth: 0,
|
|
216
|
-
hoveredBackgroundColor: blendColor(
|
|
127
|
+
hoveredBackgroundColor: (0, import_utils.blendColor)(
|
|
217
128
|
theme.colors.primary,
|
|
218
129
|
theme.colors.onPrimary,
|
|
219
130
|
theme.stateLayer.hoveredOpacity
|
|
220
131
|
),
|
|
221
|
-
pressedBackgroundColor: blendColor(
|
|
132
|
+
pressedBackgroundColor: (0, import_utils.blendColor)(
|
|
222
133
|
theme.colors.primary,
|
|
223
134
|
theme.colors.onPrimary,
|
|
224
135
|
theme.stateLayer.pressedOpacity
|
|
@@ -250,33 +161,33 @@ function applyColorOverrides(theme, colors, containerColor, contentColor) {
|
|
|
250
161
|
const overlay = contentColor != null ? contentColor : colors.textColor;
|
|
251
162
|
result.backgroundColor = containerColor;
|
|
252
163
|
result.borderColor = containerColor;
|
|
253
|
-
result.hoveredBackgroundColor = blendColor(
|
|
164
|
+
result.hoveredBackgroundColor = (0, import_utils.blendColor)(
|
|
254
165
|
containerColor,
|
|
255
166
|
overlay,
|
|
256
167
|
theme.stateLayer.hoveredOpacity
|
|
257
168
|
);
|
|
258
|
-
result.pressedBackgroundColor = blendColor(
|
|
169
|
+
result.pressedBackgroundColor = (0, import_utils.blendColor)(
|
|
259
170
|
containerColor,
|
|
260
171
|
overlay,
|
|
261
172
|
theme.stateLayer.pressedOpacity
|
|
262
173
|
);
|
|
263
174
|
} else if (contentColor) {
|
|
264
175
|
if (colors.backgroundColor === "transparent") {
|
|
265
|
-
result.hoveredBackgroundColor = alphaColor(
|
|
176
|
+
result.hoveredBackgroundColor = (0, import_utils.alphaColor)(
|
|
266
177
|
contentColor,
|
|
267
178
|
theme.stateLayer.hoveredOpacity
|
|
268
179
|
);
|
|
269
|
-
result.pressedBackgroundColor = alphaColor(
|
|
180
|
+
result.pressedBackgroundColor = (0, import_utils.alphaColor)(
|
|
270
181
|
contentColor,
|
|
271
182
|
theme.stateLayer.pressedOpacity
|
|
272
183
|
);
|
|
273
184
|
} else {
|
|
274
|
-
result.hoveredBackgroundColor = blendColor(
|
|
185
|
+
result.hoveredBackgroundColor = (0, import_utils.blendColor)(
|
|
275
186
|
colors.backgroundColor,
|
|
276
187
|
contentColor,
|
|
277
188
|
theme.stateLayer.hoveredOpacity
|
|
278
189
|
);
|
|
279
|
-
result.pressedBackgroundColor = blendColor(
|
|
190
|
+
result.pressedBackgroundColor = (0, import_utils.blendColor)(
|
|
280
191
|
colors.backgroundColor,
|
|
281
192
|
contentColor,
|
|
282
193
|
theme.stateLayer.pressedOpacity
|
|
@@ -300,11 +211,11 @@ function createStyles(theme, variant, hasLeadingIcon, hasTrailingIcon, container
|
|
|
300
211
|
hasLeadingIcon,
|
|
301
212
|
hasTrailingIcon
|
|
302
213
|
);
|
|
303
|
-
const elevationLevel0 = elevationStyle(theme.elevation.level0);
|
|
304
|
-
const elevationLevel1 = elevationStyle(theme.elevation.level1);
|
|
305
|
-
const elevationLevel2 = elevationStyle(theme.elevation.level2);
|
|
214
|
+
const elevationLevel0 = (0, import_utils.elevationStyle)(theme.elevation.level0);
|
|
215
|
+
const elevationLevel1 = (0, import_utils.elevationStyle)(theme.elevation.level1);
|
|
216
|
+
const elevationLevel2 = (0, import_utils.elevationStyle)(theme.elevation.level2);
|
|
306
217
|
const baseElevation = variant === "elevated" ? elevationLevel1 : elevationLevel0;
|
|
307
|
-
return
|
|
218
|
+
return import_react_native.StyleSheet.create({
|
|
308
219
|
container: {
|
|
309
220
|
alignSelf: "flex-start",
|
|
310
221
|
alignItems: "center",
|
|
@@ -403,9 +314,9 @@ function Button({
|
|
|
403
314
|
),
|
|
404
315
|
[theme, variant, hasLeading, hasTrailing, containerColor, contentColor]
|
|
405
316
|
);
|
|
406
|
-
const MaterialCommunityIcons = leadingIcon || trailingIcon ? getMaterialCommunityIcons() : null;
|
|
317
|
+
const MaterialCommunityIcons = leadingIcon || trailingIcon ? (0, import_utils2.getMaterialCommunityIcons)() : null;
|
|
407
318
|
const resolvedIconColor = (0, import_react.useMemo)(() => {
|
|
408
|
-
const base =
|
|
319
|
+
const base = import_react_native3.StyleSheet.flatten([
|
|
409
320
|
styles.label,
|
|
410
321
|
isDisabled ? styles.disabledLabel : void 0
|
|
411
322
|
]);
|
|
@@ -420,12 +331,12 @@ function Button({
|
|
|
420
331
|
[isDisabled, styles.disabledLabel, styles.label, labelStyleOverride]
|
|
421
332
|
);
|
|
422
333
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
423
|
-
|
|
334
|
+
import_react_native2.Pressable,
|
|
424
335
|
{
|
|
425
336
|
...props,
|
|
426
337
|
accessibilityRole: "button",
|
|
427
338
|
accessibilityState: { disabled: isDisabled },
|
|
428
|
-
hitSlop:
|
|
339
|
+
hitSlop: import_react_native2.Platform.OS === "web" ? void 0 : 4,
|
|
429
340
|
disabled: isDisabled,
|
|
430
341
|
style: resolveStyle(
|
|
431
342
|
styles.container,
|
|
@@ -445,7 +356,7 @@ function Button({
|
|
|
445
356
|
style: styles.leadingIcon
|
|
446
357
|
}
|
|
447
358
|
) : null,
|
|
448
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
359
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native4.Text, { style: computedLabelStyle, children }),
|
|
449
360
|
trailingIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
450
361
|
MaterialCommunityIcons,
|
|
451
362
|
{
|
package/dist/card/index.js
CHANGED
|
@@ -26,94 +26,25 @@ module.exports = __toCommonJS(card_exports);
|
|
|
26
26
|
|
|
27
27
|
// src/card/Card.tsx
|
|
28
28
|
var import_react = require("react");
|
|
29
|
-
var
|
|
29
|
+
var import_react_native2 = require("react-native");
|
|
30
30
|
var import_core = require("@onlynative/core");
|
|
31
31
|
|
|
32
32
|
// src/card/styles.ts
|
|
33
|
-
var import_react_native2 = require("react-native");
|
|
34
|
-
|
|
35
|
-
// src/utils/color.ts
|
|
36
|
-
function parseHexColor(color) {
|
|
37
|
-
const normalized = color.replace("#", "");
|
|
38
|
-
if (normalized.length !== 6 && normalized.length !== 8) {
|
|
39
|
-
return null;
|
|
40
|
-
}
|
|
41
|
-
const r = Number.parseInt(normalized.slice(0, 2), 16);
|
|
42
|
-
const g = Number.parseInt(normalized.slice(2, 4), 16);
|
|
43
|
-
const b = Number.parseInt(normalized.slice(4, 6), 16);
|
|
44
|
-
if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) {
|
|
45
|
-
return null;
|
|
46
|
-
}
|
|
47
|
-
return { r, g, b };
|
|
48
|
-
}
|
|
49
|
-
function clampAlpha(alpha) {
|
|
50
|
-
return Math.max(0, Math.min(1, alpha));
|
|
51
|
-
}
|
|
52
|
-
function alphaColor(color, alpha) {
|
|
53
|
-
const channels = parseHexColor(color);
|
|
54
|
-
const boundedAlpha = clampAlpha(alpha);
|
|
55
|
-
if (!channels) {
|
|
56
|
-
return color;
|
|
57
|
-
}
|
|
58
|
-
return `rgba(${channels.r}, ${channels.g}, ${channels.b}, ${boundedAlpha})`;
|
|
59
|
-
}
|
|
60
|
-
function blendColor(base, overlay, overlayAlpha) {
|
|
61
|
-
const baseChannels = parseHexColor(base);
|
|
62
|
-
const overlayChannels = parseHexColor(overlay);
|
|
63
|
-
const boundedAlpha = clampAlpha(overlayAlpha);
|
|
64
|
-
if (!baseChannels || !overlayChannels) {
|
|
65
|
-
return alphaColor(overlay, boundedAlpha);
|
|
66
|
-
}
|
|
67
|
-
const r = Math.round(
|
|
68
|
-
(1 - boundedAlpha) * baseChannels.r + boundedAlpha * overlayChannels.r
|
|
69
|
-
);
|
|
70
|
-
const g = Math.round(
|
|
71
|
-
(1 - boundedAlpha) * baseChannels.g + boundedAlpha * overlayChannels.g
|
|
72
|
-
);
|
|
73
|
-
const b = Math.round(
|
|
74
|
-
(1 - boundedAlpha) * baseChannels.b + boundedAlpha * overlayChannels.b
|
|
75
|
-
);
|
|
76
|
-
return `rgb(${r}, ${g}, ${b})`;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
// src/utils/elevation.ts
|
|
80
33
|
var import_react_native = require("react-native");
|
|
81
|
-
|
|
82
|
-
if (import_react_native.Platform.OS === "web") {
|
|
83
|
-
const { shadowOffset, shadowOpacity, shadowRadius } = level;
|
|
84
|
-
if (shadowOpacity === 0) {
|
|
85
|
-
return { boxShadow: "none" };
|
|
86
|
-
}
|
|
87
|
-
return {
|
|
88
|
-
boxShadow: `${shadowOffset.width}px ${shadowOffset.height}px ${shadowRadius}px rgba(0, 0, 0, ${shadowOpacity})`
|
|
89
|
-
};
|
|
90
|
-
}
|
|
91
|
-
return {
|
|
92
|
-
shadowColor: level.shadowColor,
|
|
93
|
-
shadowOffset: {
|
|
94
|
-
width: level.shadowOffset.width,
|
|
95
|
-
height: level.shadowOffset.height
|
|
96
|
-
},
|
|
97
|
-
shadowOpacity: level.shadowOpacity,
|
|
98
|
-
shadowRadius: level.shadowRadius,
|
|
99
|
-
elevation: level.elevation
|
|
100
|
-
};
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
// src/card/styles.ts
|
|
34
|
+
var import_utils = require("@onlynative/utils");
|
|
104
35
|
function getVariantColors(theme, variant) {
|
|
105
|
-
const disabledContainerColor = alphaColor(theme.colors.onSurface, 0.12);
|
|
106
|
-
const disabledOutlineColor = alphaColor(theme.colors.onSurface, 0.12);
|
|
36
|
+
const disabledContainerColor = (0, import_utils.alphaColor)(theme.colors.onSurface, 0.12);
|
|
37
|
+
const disabledOutlineColor = (0, import_utils.alphaColor)(theme.colors.onSurface, 0.12);
|
|
107
38
|
if (variant === "outlined") {
|
|
108
39
|
return {
|
|
109
40
|
backgroundColor: theme.colors.surface,
|
|
110
41
|
borderColor: theme.colors.outline,
|
|
111
42
|
borderWidth: 1,
|
|
112
|
-
hoveredBackgroundColor: alphaColor(
|
|
43
|
+
hoveredBackgroundColor: (0, import_utils.alphaColor)(
|
|
113
44
|
theme.colors.onSurface,
|
|
114
45
|
theme.stateLayer.hoveredOpacity
|
|
115
46
|
),
|
|
116
|
-
pressedBackgroundColor: alphaColor(
|
|
47
|
+
pressedBackgroundColor: (0, import_utils.alphaColor)(
|
|
117
48
|
theme.colors.onSurface,
|
|
118
49
|
theme.stateLayer.pressedOpacity
|
|
119
50
|
),
|
|
@@ -126,12 +57,12 @@ function getVariantColors(theme, variant) {
|
|
|
126
57
|
backgroundColor: theme.colors.surfaceContainerHighest,
|
|
127
58
|
borderColor: "transparent",
|
|
128
59
|
borderWidth: 0,
|
|
129
|
-
hoveredBackgroundColor: blendColor(
|
|
60
|
+
hoveredBackgroundColor: (0, import_utils.blendColor)(
|
|
130
61
|
theme.colors.surfaceContainerHighest,
|
|
131
62
|
theme.colors.onSurface,
|
|
132
63
|
theme.stateLayer.hoveredOpacity
|
|
133
64
|
),
|
|
134
|
-
pressedBackgroundColor: blendColor(
|
|
65
|
+
pressedBackgroundColor: (0, import_utils.blendColor)(
|
|
135
66
|
theme.colors.surfaceContainerHighest,
|
|
136
67
|
theme.colors.onSurface,
|
|
137
68
|
theme.stateLayer.pressedOpacity
|
|
@@ -144,12 +75,12 @@ function getVariantColors(theme, variant) {
|
|
|
144
75
|
backgroundColor: theme.colors.surface,
|
|
145
76
|
borderColor: "transparent",
|
|
146
77
|
borderWidth: 0,
|
|
147
|
-
hoveredBackgroundColor: blendColor(
|
|
78
|
+
hoveredBackgroundColor: (0, import_utils.blendColor)(
|
|
148
79
|
theme.colors.surface,
|
|
149
80
|
theme.colors.onSurface,
|
|
150
81
|
theme.stateLayer.hoveredOpacity
|
|
151
82
|
),
|
|
152
|
-
pressedBackgroundColor: blendColor(
|
|
83
|
+
pressedBackgroundColor: (0, import_utils.blendColor)(
|
|
153
84
|
theme.colors.surface,
|
|
154
85
|
theme.colors.onSurface,
|
|
155
86
|
theme.stateLayer.pressedOpacity
|
|
@@ -165,12 +96,12 @@ function applyColorOverrides(theme, colors, containerColor) {
|
|
|
165
96
|
backgroundColor: containerColor,
|
|
166
97
|
borderColor: containerColor,
|
|
167
98
|
borderWidth: 0,
|
|
168
|
-
hoveredBackgroundColor: blendColor(
|
|
99
|
+
hoveredBackgroundColor: (0, import_utils.blendColor)(
|
|
169
100
|
containerColor,
|
|
170
101
|
theme.colors.onSurface,
|
|
171
102
|
theme.stateLayer.hoveredOpacity
|
|
172
103
|
),
|
|
173
|
-
pressedBackgroundColor: blendColor(
|
|
104
|
+
pressedBackgroundColor: (0, import_utils.blendColor)(
|
|
174
105
|
containerColor,
|
|
175
106
|
theme.colors.onSurface,
|
|
176
107
|
theme.stateLayer.pressedOpacity
|
|
@@ -180,11 +111,11 @@ function applyColorOverrides(theme, colors, containerColor) {
|
|
|
180
111
|
function createStyles(theme, variant, containerColor) {
|
|
181
112
|
const baseColors = getVariantColors(theme, variant);
|
|
182
113
|
const colors = applyColorOverrides(theme, baseColors, containerColor);
|
|
183
|
-
const elevationLevel0 = elevationStyle(theme.elevation.level0);
|
|
184
|
-
const elevationLevel1 = elevationStyle(theme.elevation.level1);
|
|
185
|
-
const elevationLevel2 = elevationStyle(theme.elevation.level2);
|
|
114
|
+
const elevationLevel0 = (0, import_utils.elevationStyle)(theme.elevation.level0);
|
|
115
|
+
const elevationLevel1 = (0, import_utils.elevationStyle)(theme.elevation.level1);
|
|
116
|
+
const elevationLevel2 = (0, import_utils.elevationStyle)(theme.elevation.level2);
|
|
186
117
|
const baseElevation = variant === "elevated" ? elevationLevel1 : elevationLevel0;
|
|
187
|
-
return
|
|
118
|
+
return import_react_native.StyleSheet.create({
|
|
188
119
|
container: {
|
|
189
120
|
borderRadius: theme.shape.cornerMedium,
|
|
190
121
|
backgroundColor: colors.backgroundColor,
|
|
@@ -234,7 +165,7 @@ function Card({
|
|
|
234
165
|
[theme, variant, containerColor]
|
|
235
166
|
);
|
|
236
167
|
if (!isInteractive) {
|
|
237
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
168
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.View, { ...props, style: [styles.container, style], children });
|
|
238
169
|
}
|
|
239
170
|
const resolvedStyle = (state) => [
|
|
240
171
|
styles.container,
|
|
@@ -245,16 +176,16 @@ function Card({
|
|
|
245
176
|
typeof style === "function" ? style(state) : style
|
|
246
177
|
];
|
|
247
178
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
248
|
-
|
|
179
|
+
import_react_native2.Pressable,
|
|
249
180
|
{
|
|
250
181
|
...props,
|
|
251
182
|
role: "button",
|
|
252
183
|
accessibilityState: { disabled: isDisabled },
|
|
253
|
-
hitSlop:
|
|
184
|
+
hitSlop: import_react_native2.Platform.OS === "web" ? void 0 : 4,
|
|
254
185
|
disabled: isDisabled,
|
|
255
186
|
onPress,
|
|
256
187
|
style: resolvedStyle,
|
|
257
|
-
children: isDisabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
188
|
+
children: isDisabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.View, { style: styles.disabledContent, children }) : children
|
|
258
189
|
}
|
|
259
190
|
);
|
|
260
191
|
}
|
package/dist/checkbox/index.js
CHANGED
|
@@ -28,90 +28,25 @@ module.exports = __toCommonJS(checkbox_exports);
|
|
|
28
28
|
var import_react = require("react");
|
|
29
29
|
var import_react_native2 = require("react-native");
|
|
30
30
|
var import_core = require("@onlynative/core");
|
|
31
|
-
|
|
32
|
-
// src/utils/icon.ts
|
|
33
|
-
var _MCIcons = null;
|
|
34
|
-
var _resolved = false;
|
|
35
|
-
function getMaterialCommunityIcons() {
|
|
36
|
-
if (!_resolved) {
|
|
37
|
-
_resolved = true;
|
|
38
|
-
try {
|
|
39
|
-
const mod = require("@expo/vector-icons/MaterialCommunityIcons");
|
|
40
|
-
_MCIcons = mod.default || mod;
|
|
41
|
-
} catch {
|
|
42
|
-
_MCIcons = null;
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
if (!_MCIcons) {
|
|
46
|
-
throw new Error(
|
|
47
|
-
"@expo/vector-icons is required for icon support. Install it with: npx expo install @expo/vector-icons"
|
|
48
|
-
);
|
|
49
|
-
}
|
|
50
|
-
return _MCIcons;
|
|
51
|
-
}
|
|
31
|
+
var import_utils2 = require("@onlynative/utils");
|
|
52
32
|
|
|
53
33
|
// src/checkbox/styles.ts
|
|
54
34
|
var import_react_native = require("react-native");
|
|
55
|
-
|
|
56
|
-
// src/utils/color.ts
|
|
57
|
-
function parseHexColor(color) {
|
|
58
|
-
const normalized = color.replace("#", "");
|
|
59
|
-
if (normalized.length !== 6 && normalized.length !== 8) {
|
|
60
|
-
return null;
|
|
61
|
-
}
|
|
62
|
-
const r = Number.parseInt(normalized.slice(0, 2), 16);
|
|
63
|
-
const g = Number.parseInt(normalized.slice(2, 4), 16);
|
|
64
|
-
const b = Number.parseInt(normalized.slice(4, 6), 16);
|
|
65
|
-
if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) {
|
|
66
|
-
return null;
|
|
67
|
-
}
|
|
68
|
-
return { r, g, b };
|
|
69
|
-
}
|
|
70
|
-
function clampAlpha(alpha) {
|
|
71
|
-
return Math.max(0, Math.min(1, alpha));
|
|
72
|
-
}
|
|
73
|
-
function alphaColor(color, alpha) {
|
|
74
|
-
const channels = parseHexColor(color);
|
|
75
|
-
const boundedAlpha = clampAlpha(alpha);
|
|
76
|
-
if (!channels) {
|
|
77
|
-
return color;
|
|
78
|
-
}
|
|
79
|
-
return `rgba(${channels.r}, ${channels.g}, ${channels.b}, ${boundedAlpha})`;
|
|
80
|
-
}
|
|
81
|
-
function blendColor(base, overlay, overlayAlpha) {
|
|
82
|
-
const baseChannels = parseHexColor(base);
|
|
83
|
-
const overlayChannels = parseHexColor(overlay);
|
|
84
|
-
const boundedAlpha = clampAlpha(overlayAlpha);
|
|
85
|
-
if (!baseChannels || !overlayChannels) {
|
|
86
|
-
return alphaColor(overlay, boundedAlpha);
|
|
87
|
-
}
|
|
88
|
-
const r = Math.round(
|
|
89
|
-
(1 - boundedAlpha) * baseChannels.r + boundedAlpha * overlayChannels.r
|
|
90
|
-
);
|
|
91
|
-
const g = Math.round(
|
|
92
|
-
(1 - boundedAlpha) * baseChannels.g + boundedAlpha * overlayChannels.g
|
|
93
|
-
);
|
|
94
|
-
const b = Math.round(
|
|
95
|
-
(1 - boundedAlpha) * baseChannels.b + boundedAlpha * overlayChannels.b
|
|
96
|
-
);
|
|
97
|
-
return `rgb(${r}, ${g}, ${b})`;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
// src/checkbox/styles.ts
|
|
35
|
+
var import_utils = require("@onlynative/utils");
|
|
101
36
|
function getColors(theme, checked) {
|
|
102
|
-
const disabledOnSurface38 = alphaColor(theme.colors.onSurface, 0.38);
|
|
37
|
+
const disabledOnSurface38 = (0, import_utils.alphaColor)(theme.colors.onSurface, 0.38);
|
|
103
38
|
if (checked) {
|
|
104
39
|
return {
|
|
105
40
|
backgroundColor: theme.colors.primary,
|
|
106
41
|
borderColor: "transparent",
|
|
107
42
|
borderWidth: 0,
|
|
108
43
|
iconColor: theme.colors.onPrimary,
|
|
109
|
-
hoveredBackgroundColor: blendColor(
|
|
44
|
+
hoveredBackgroundColor: (0, import_utils.blendColor)(
|
|
110
45
|
theme.colors.primary,
|
|
111
46
|
theme.colors.onPrimary,
|
|
112
47
|
theme.stateLayer.hoveredOpacity
|
|
113
48
|
),
|
|
114
|
-
pressedBackgroundColor: blendColor(
|
|
49
|
+
pressedBackgroundColor: (0, import_utils.blendColor)(
|
|
115
50
|
theme.colors.primary,
|
|
116
51
|
theme.colors.onPrimary,
|
|
117
52
|
theme.stateLayer.pressedOpacity
|
|
@@ -127,11 +62,11 @@ function getColors(theme, checked) {
|
|
|
127
62
|
borderColor: theme.colors.onSurfaceVariant,
|
|
128
63
|
borderWidth: 2,
|
|
129
64
|
iconColor: "transparent",
|
|
130
|
-
hoveredBackgroundColor: alphaColor(
|
|
65
|
+
hoveredBackgroundColor: (0, import_utils.alphaColor)(
|
|
131
66
|
theme.colors.onSurface,
|
|
132
67
|
theme.stateLayer.hoveredOpacity
|
|
133
68
|
),
|
|
134
|
-
pressedBackgroundColor: alphaColor(
|
|
69
|
+
pressedBackgroundColor: (0, import_utils.alphaColor)(
|
|
135
70
|
theme.colors.onSurface,
|
|
136
71
|
theme.stateLayer.pressedOpacity
|
|
137
72
|
),
|
|
@@ -151,12 +86,12 @@ function applyColorOverrides(theme, colors, containerColor, contentColor) {
|
|
|
151
86
|
const overlay = contentColor != null ? contentColor : colors.iconColor;
|
|
152
87
|
result.backgroundColor = containerColor;
|
|
153
88
|
result.borderColor = containerColor;
|
|
154
|
-
result.hoveredBackgroundColor = blendColor(
|
|
89
|
+
result.hoveredBackgroundColor = (0, import_utils.blendColor)(
|
|
155
90
|
containerColor,
|
|
156
91
|
overlay,
|
|
157
92
|
theme.stateLayer.hoveredOpacity
|
|
158
93
|
);
|
|
159
|
-
result.pressedBackgroundColor = blendColor(
|
|
94
|
+
result.pressedBackgroundColor = (0, import_utils.blendColor)(
|
|
160
95
|
containerColor,
|
|
161
96
|
overlay,
|
|
162
97
|
theme.stateLayer.pressedOpacity
|
|
@@ -247,7 +182,7 @@ function Checkbox({
|
|
|
247
182
|
}) {
|
|
248
183
|
const isDisabled = Boolean(disabled);
|
|
249
184
|
const isChecked = Boolean(value);
|
|
250
|
-
const MaterialCommunityIcons = isChecked ? getMaterialCommunityIcons() : null;
|
|
185
|
+
const MaterialCommunityIcons = isChecked ? (0, import_utils2.getMaterialCommunityIcons)() : null;
|
|
251
186
|
const theme = (0, import_core.useTheme)();
|
|
252
187
|
const styles = (0, import_react.useMemo)(
|
|
253
188
|
() => createStyles(theme, isChecked, containerColor, contentColor),
|