@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.
Files changed (42) hide show
  1. package/dist/appbar/index.js +54 -122
  2. package/dist/button/index.js +31 -120
  3. package/dist/card/index.js +20 -89
  4. package/dist/checkbox/index.js +10 -75
  5. package/dist/chip/index.js +29 -118
  6. package/dist/icon-button/index.js +32 -97
  7. package/dist/index.d.ts +1 -0
  8. package/dist/index.js +461 -474
  9. package/dist/keyboard-avoiding-wrapper/index.d.ts +36 -0
  10. package/dist/keyboard-avoiding-wrapper/index.js +98 -0
  11. package/dist/list/index.js +5 -50
  12. package/dist/radio/index.js +8 -35
  13. package/dist/switch/index.js +12 -77
  14. package/dist/text-field/index.js +25 -78
  15. package/package.json +13 -3
  16. package/src/appbar/AppBar.tsx +1 -1
  17. package/src/button/Button.tsx +1 -1
  18. package/src/button/styles.ts +1 -2
  19. package/src/card/styles.ts +1 -2
  20. package/src/checkbox/Checkbox.tsx +1 -1
  21. package/src/checkbox/styles.ts +1 -1
  22. package/src/chip/Chip.tsx +1 -1
  23. package/src/chip/styles.ts +1 -2
  24. package/src/icon-button/IconButton.tsx +5 -2
  25. package/src/icon-button/styles.ts +1 -1
  26. package/src/index.ts +3 -0
  27. package/src/keyboard-avoiding-wrapper/KeyboardAvoidingWrapper.tsx +69 -0
  28. package/src/keyboard-avoiding-wrapper/index.ts +2 -0
  29. package/src/keyboard-avoiding-wrapper/styles.ts +10 -0
  30. package/src/keyboard-avoiding-wrapper/types.ts +37 -0
  31. package/src/list/styles.ts +1 -1
  32. package/src/radio/styles.ts +1 -1
  33. package/src/switch/Switch.tsx +1 -1
  34. package/src/switch/styles.ts +1 -1
  35. package/src/text-field/TextField.tsx +1 -1
  36. package/src/text-field/styles.ts +1 -2
  37. package/src/typography/Typography.tsx +2 -0
  38. package/src/test-utils/render-with-theme.tsx +0 -13
  39. package/src/utils/color.ts +0 -64
  40. package/src/utils/elevation.ts +0 -33
  41. package/src/utils/icon.ts +0 -30
  42. package/src/utils/rtl.ts +0 -19
@@ -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
- function elevationStyle(level) {
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 import_react_native2.StyleSheet.create({
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 = import_react_native4.StyleSheet.flatten([
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
- import_react_native3.Pressable,
334
+ import_react_native2.Pressable,
424
335
  {
425
336
  ...props,
426
337
  accessibilityRole: "button",
427
338
  accessibilityState: { disabled: isDisabled },
428
- hitSlop: import_react_native3.Platform.OS === "web" ? void 0 : 4,
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)(import_react_native5.Text, { style: computedLabelStyle, children }),
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
  {
@@ -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 import_react_native3 = require("react-native");
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
- function elevationStyle(level) {
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 import_react_native2.StyleSheet.create({
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)(import_react_native3.View, { ...props, style: [styles.container, style], children });
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
- import_react_native3.Pressable,
179
+ import_react_native2.Pressable,
249
180
  {
250
181
  ...props,
251
182
  role: "button",
252
183
  accessibilityState: { disabled: isDisabled },
253
- hitSlop: import_react_native3.Platform.OS === "web" ? void 0 : 4,
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)(import_react_native3.View, { style: styles.disabledContent, children }) : children
188
+ children: isDisabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.View, { style: styles.disabledContent, children }) : children
258
189
  }
259
190
  );
260
191
  }
@@ -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),