@xaui/native 0.0.40 → 0.0.41

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 (13) hide show
  1. package/dist/badge/index.cjs +8 -7
  2. package/dist/badge/index.js +8 -7
  3. package/dist/button/index.cjs +6 -4
  4. package/dist/button/index.js +7 -5
  5. package/dist/{chunk-XQED3KRW.cjs → chunk-HYL4EU3Y.cjs} +6 -4
  6. package/dist/{chunk-UVI56OO5.js → chunk-WGWXGIZ3.js} +7 -5
  7. package/dist/fab/index.cjs +2 -2
  8. package/dist/fab/index.js +1 -1
  9. package/dist/fab-menu/index.cjs +2 -2
  10. package/dist/fab-menu/index.js +1 -1
  11. package/dist/segment-button/index.cjs +4 -4
  12. package/dist/segment-button/index.js +5 -5
  13. package/package.json +1 -1
package/dist/badge/index.cjs CHANGED
@@ -21,7 +21,7 @@ var styles = _reactnative.StyleSheet.create({
21
21
  },
22
22
  text: {
23
23
  textAlign: "center",
24
- fontWeight: "600",
24
+ fontWeight: "700",
25
25
  includeFontPadding: false,
26
26
  textAlignVertical: "center"
27
27
  }
@@ -75,28 +75,29 @@ function useBadgeVariantStyles(themeColor, variant) {
75
75
  const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
76
76
  const colorScheme = theme.colors[safeThemeColor];
77
77
  return _react.useMemo.call(void 0, () => {
78
+ const isDark = theme.mode === "dark";
78
79
  if (variant === "flat") {
79
80
  return {
80
- backgroundColor: colorScheme.background,
81
+ backgroundColor: isDark ? _core.withOpacity.call(void 0, colorScheme.background, 0.5) : colorScheme.background,
81
82
  color: colorScheme.main
82
83
  };
83
84
  }
84
85
  if (variant === "faded") {
85
86
  return {
86
- backgroundColor: _core.withOpacity.call(void 0, colorScheme.background, 0.7),
87
+ backgroundColor: isDark ? _core.withOpacity.call(void 0, colorScheme.background, 0.35) : _core.withOpacity.call(void 0, colorScheme.background, 0.7),
87
88
  color: colorScheme.main
88
89
  };
89
90
  }
90
91
  if (variant === "shadow") {
91
92
  return {
92
- backgroundColor: colorScheme.main,
93
- color: colorScheme.foreground,
93
+ backgroundColor: isDark ? colorScheme.background : colorScheme.main,
94
+ color: isDark ? colorScheme.main : colorScheme.foreground,
94
95
  shadow: theme.shadows.sm
95
96
  };
96
97
  }
97
98
  return {
98
- backgroundColor: colorScheme.main,
99
- color: colorScheme.foreground
99
+ backgroundColor: isDark ? colorScheme.background : colorScheme.main,
100
+ color: isDark ? colorScheme.main : colorScheme.foreground
100
101
  };
101
102
  }, [colorScheme, theme, variant]);
102
103
  }
package/dist/badge/index.js CHANGED
@@ -21,7 +21,7 @@ var styles = StyleSheet.create({
21
21
  },
22
22
  text: {
23
23
  textAlign: "center",
24
- fontWeight: "600",
24
+ fontWeight: "700",
25
25
  includeFontPadding: false,
26
26
  textAlignVertical: "center"
27
27
  }
@@ -75,28 +75,29 @@ function useBadgeVariantStyles(themeColor, variant) {
75
75
  const safeThemeColor = getSafeThemeColor(themeColor);
76
76
  const colorScheme = theme.colors[safeThemeColor];
77
77
  return useMemo(() => {
78
+ const isDark = theme.mode === "dark";
78
79
  if (variant === "flat") {
79
80
  return {
80
- backgroundColor: colorScheme.background,
81
+ backgroundColor: isDark ? withOpacity(colorScheme.background, 0.5) : colorScheme.background,
81
82
  color: colorScheme.main
82
83
  };
83
84
  }
84
85
  if (variant === "faded") {
85
86
  return {
86
- backgroundColor: withOpacity(colorScheme.background, 0.7),
87
+ backgroundColor: isDark ? withOpacity(colorScheme.background, 0.35) : withOpacity(colorScheme.background, 0.7),
87
88
  color: colorScheme.main
88
89
  };
89
90
  }
90
91
  if (variant === "shadow") {
91
92
  return {
92
- backgroundColor: colorScheme.main,
93
- color: colorScheme.foreground,
93
+ backgroundColor: isDark ? colorScheme.background : colorScheme.main,
94
+ color: isDark ? colorScheme.main : colorScheme.foreground,
94
95
  shadow: theme.shadows.sm
95
96
  };
96
97
  }
97
98
  return {
98
- backgroundColor: colorScheme.main,
99
- color: colorScheme.foreground
99
+ backgroundColor: isDark ? colorScheme.background : colorScheme.main,
100
+ color: isDark ? colorScheme.main : colorScheme.foreground
100
101
  };
101
102
  }, [colorScheme, theme, variant]);
102
103
  }
package/dist/button/index.cjs CHANGED
@@ -60,11 +60,12 @@ var useTextStyles = (themeColor, variant) => {
60
60
  const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
61
61
  const colorScheme = theme.colors[safeThemeColor];
62
62
  const textColor = _react.useMemo.call(void 0, () => {
63
+ const isDark = theme.mode === "dark";
63
64
  if (variant === "solid") {
64
- return colorScheme.foreground;
65
+ return isDark ? colorScheme.main : colorScheme.foreground;
65
66
  }
66
67
  return colorScheme.main;
67
- }, [variant, colorScheme]);
68
+ }, [variant, colorScheme, theme]);
68
69
  return {
69
70
  textColor
70
71
  };
@@ -116,9 +117,10 @@ function useVariantSizesStyles(themeColor, variant, elevation = 0) {
116
117
  const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
117
118
  const colorScheme = theme.colors[safeThemeColor];
118
119
  const variantStyles = _react.useMemo.call(void 0, () => {
120
+ const isDark = theme.mode === "dark";
119
121
  const styles2 = {
120
122
  solid: {
121
- backgroundColor: colorScheme.main,
123
+ backgroundColor: isDark ? colorScheme.background : colorScheme.main,
122
124
  borderWidth: 0
123
125
  },
124
126
  outlined: {
@@ -127,7 +129,7 @@ function useVariantSizesStyles(themeColor, variant, elevation = 0) {
127
129
  borderColor: colorScheme.main
128
130
  },
129
131
  flat: {
130
- backgroundColor: colorScheme.background,
132
+ backgroundColor: isDark ? _core.withOpacity.call(void 0, colorScheme.background, 0.5) : colorScheme.background,
131
133
  borderWidth: 0
132
134
  },
133
135
  light: {
package/dist/button/index.js CHANGED
@@ -54,17 +54,18 @@ var styles = StyleSheet.create({
54
54
 
55
55
  // src/components/button/button.hook.ts
56
56
  import { useMemo } from "react";
57
- import { getSafeThemeColor } from "@xaui/core";
57
+ import { getSafeThemeColor, withOpacity } from "@xaui/core";
58
58
  var useTextStyles = (themeColor, variant) => {
59
59
  const theme = useXUITheme();
60
60
  const safeThemeColor = getSafeThemeColor(themeColor);
61
61
  const colorScheme = theme.colors[safeThemeColor];
62
62
  const textColor = useMemo(() => {
63
+ const isDark = theme.mode === "dark";
63
64
  if (variant === "solid") {
64
- return colorScheme.foreground;
65
+ return isDark ? colorScheme.main : colorScheme.foreground;
65
66
  }
66
67
  return colorScheme.main;
67
- }, [variant, colorScheme]);
68
+ }, [variant, colorScheme, theme]);
68
69
  return {
69
70
  textColor
70
71
  };
@@ -116,9 +117,10 @@ function useVariantSizesStyles(themeColor, variant, elevation = 0) {
116
117
  const safeThemeColor = getSafeThemeColor(themeColor);
117
118
  const colorScheme = theme.colors[safeThemeColor];
118
119
  const variantStyles = useMemo(() => {
120
+ const isDark = theme.mode === "dark";
119
121
  const styles2 = {
120
122
  solid: {
121
- backgroundColor: colorScheme.main,
123
+ backgroundColor: isDark ? colorScheme.background : colorScheme.main,
122
124
  borderWidth: 0
123
125
  },
124
126
  outlined: {
@@ -127,7 +129,7 @@ function useVariantSizesStyles(themeColor, variant, elevation = 0) {
127
129
  borderColor: colorScheme.main
128
130
  },
129
131
  flat: {
130
- backgroundColor: colorScheme.background,
132
+ backgroundColor: isDark ? withOpacity(colorScheme.background, 0.5) : colorScheme.background,
131
133
  borderWidth: 0
132
134
  },
133
135
  light: {
package/dist/{chunk-XQED3KRW.cjs → chunk-HYL4EU3Y.cjs} RENAMED
@@ -99,13 +99,14 @@ function useFabVariantStyles(themeColor, variant, elevation = 0) {
99
99
  const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
100
100
  const colorScheme = theme.colors[safeThemeColor];
101
101
  const variantStyles = _react.useMemo.call(void 0, () => {
102
+ const isDark = theme.mode === "dark";
102
103
  const variantMap = {
103
104
  solid: {
104
- backgroundColor: colorScheme.main,
105
+ backgroundColor: isDark ? colorScheme.background : colorScheme.main,
105
106
  borderWidth: 0
106
107
  },
107
108
  flat: {
108
- backgroundColor: colorScheme.background,
109
+ backgroundColor: isDark ? _core.withOpacity.call(void 0, colorScheme.background, 0.5) : colorScheme.background,
109
110
  borderWidth: 0
110
111
  },
111
112
  outlined: {
@@ -130,11 +131,12 @@ function useFabIconColor(themeColor, variant) {
130
131
  const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
131
132
  const colorScheme = theme.colors[safeThemeColor];
132
133
  const iconColor = _react.useMemo.call(void 0, () => {
134
+ const isDark = theme.mode === "dark";
133
135
  if (variant === "solid") {
134
- return colorScheme.foreground;
136
+ return isDark ? colorScheme.main : colorScheme.foreground;
135
137
  }
136
138
  return colorScheme.main;
137
- }, [variant, colorScheme]);
139
+ }, [variant, colorScheme, theme]);
138
140
  return { iconColor };
139
141
  }
140
142
  function useFabRadiusValue(radius, fallback) {
package/dist/{chunk-UVI56OO5.js → chunk-WGWXGIZ3.js} RENAMED
@@ -37,7 +37,7 @@ var styles = StyleSheet.create({
37
37
 
38
38
  // src/components/fab/fab.hook.ts
39
39
  import { useMemo } from "react";
40
- import { getSafeThemeColor } from "@xaui/core";
40
+ import { getSafeThemeColor, withOpacity } from "@xaui/core";
41
41
  function useFabSizeStyles(size) {
42
42
  const theme = useXUITheme();
43
43
  const sizeStyles = useMemo(() => {
@@ -99,13 +99,14 @@ function useFabVariantStyles(themeColor, variant, elevation = 0) {
99
99
  const safeThemeColor = getSafeThemeColor(themeColor);
100
100
  const colorScheme = theme.colors[safeThemeColor];
101
101
  const variantStyles = useMemo(() => {
102
+ const isDark = theme.mode === "dark";
102
103
  const variantMap = {
103
104
  solid: {
104
- backgroundColor: colorScheme.main,
105
+ backgroundColor: isDark ? colorScheme.background : colorScheme.main,
105
106
  borderWidth: 0
106
107
  },
107
108
  flat: {
108
- backgroundColor: colorScheme.background,
109
+ backgroundColor: isDark ? withOpacity(colorScheme.background, 0.5) : colorScheme.background,
109
110
  borderWidth: 0
110
111
  },
111
112
  outlined: {
@@ -130,11 +131,12 @@ function useFabIconColor(themeColor, variant) {
130
131
  const safeThemeColor = getSafeThemeColor(themeColor);
131
132
  const colorScheme = theme.colors[safeThemeColor];
132
133
  const iconColor = useMemo(() => {
134
+ const isDark = theme.mode === "dark";
133
135
  if (variant === "solid") {
134
- return colorScheme.foreground;
136
+ return isDark ? colorScheme.main : colorScheme.foreground;
135
137
  }
136
138
  return colorScheme.main;
137
- }, [variant, colorScheme]);
139
+ }, [variant, colorScheme, theme]);
138
140
  return { iconColor };
139
141
  }
140
142
  function useFabRadiusValue(radius, fallback) {
package/dist/fab/index.cjs CHANGED
@@ -1,9 +1,9 @@
1
1
  "use strict";Object.defineProperty(exports, "__esModule", {value: true});
2
2
 
3
- var _chunkXQED3KRWcjs = require('../chunk-XQED3KRW.cjs');
3
+ var _chunkHYL4EU3Ycjs = require('../chunk-HYL4EU3Y.cjs');
4
4
  require('../chunk-FBTBWI3P.cjs');
5
5
  require('../chunk-56RPWZD2.cjs');
6
6
  require('../chunk-RZJFCDFS.cjs');
7
7
 
8
8
 
9
- exports.Fab = _chunkXQED3KRWcjs.Fab;
9
+ exports.Fab = _chunkHYL4EU3Ycjs.Fab;
package/dist/fab/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  Fab
3
- } from "../chunk-UVI56OO5.js";
3
+ } from "../chunk-WGWXGIZ3.js";
4
4
  import "../chunk-J3BOFXIH.js";
5
5
  import "../chunk-SHBDANQN.js";
6
6
  import "../chunk-LVNBYERF.js";
package/dist/fab-menu/index.cjs CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
2
2
 
3
- var _chunkXQED3KRWcjs = require('../chunk-XQED3KRW.cjs');
3
+ var _chunkHYL4EU3Ycjs = require('../chunk-HYL4EU3Y.cjs');
4
4
  require('../chunk-FBTBWI3P.cjs');
5
5
  require('../chunk-56RPWZD2.cjs');
6
6
 
@@ -209,7 +209,7 @@ var FabMenu = ({
209
209
  }
210
210
  },
211
211
  /* @__PURE__ */ _react2.default.createElement(
212
- _chunkXQED3KRWcjs.Fab,
212
+ _chunkHYL4EU3Ycjs.Fab,
213
213
  {
214
214
  icon: currentIcon,
215
215
  label,
package/dist/fab-menu/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  Fab
3
- } from "../chunk-UVI56OO5.js";
3
+ } from "../chunk-WGWXGIZ3.js";
4
4
  import "../chunk-J3BOFXIH.js";
5
5
  import "../chunk-SHBDANQN.js";
6
6
  import {
package/dist/segment-button/index.cjs CHANGED
@@ -108,9 +108,9 @@ function useSegmentVariantStyles(themeColor, variant, elevation = 0) {
108
108
  containerBackground: colorScheme.background,
109
109
  containerBorderWidth: 0,
110
110
  containerBorderColor: "transparent",
111
- selectedBackground: selectedBackgroundColor,
111
+ selectedBackground: _core.withOpacity.call(void 0, colorScheme.main, 0.2),
112
112
  unselectedBackground: "transparent",
113
- selectedTextColor: colorScheme.foreground,
113
+ selectedTextColor: colorScheme.main,
114
114
  unselectedTextColor: colorScheme.main
115
115
  },
116
116
  light: {
@@ -126,9 +126,9 @@ function useSegmentVariantStyles(themeColor, variant, elevation = 0) {
126
126
  containerBackground: `${colorScheme.background}95`,
127
127
  containerBorderWidth: theme.borderWidth.md,
128
128
  containerBorderColor: `${colorScheme.main}90`,
129
- selectedBackground: selectedBackgroundColor,
129
+ selectedBackground: _core.withOpacity.call(void 0, colorScheme.main, 0.2),
130
130
  unselectedBackground: "transparent",
131
- selectedTextColor: colorScheme.foreground,
131
+ selectedTextColor: colorScheme.main,
132
132
  unselectedTextColor: colorScheme.main
133
133
  }
134
134
  };
package/dist/segment-button/index.js CHANGED
@@ -51,7 +51,7 @@ var styles = StyleSheet.create({
51
51
 
52
52
  // src/components/segment-button/segment-button.hook.ts
53
53
  import { useMemo } from "react";
54
- import { getSafeThemeColor, withPaletteNumber } from "@xaui/core";
54
+ import { getSafeThemeColor, withOpacity, withPaletteNumber } from "@xaui/core";
55
55
  function useSegmentSizeStyles(size) {
56
56
  const theme = useXUITheme();
57
57
  return useMemo(() => {
@@ -108,9 +108,9 @@ function useSegmentVariantStyles(themeColor, variant, elevation = 0) {
108
108
  containerBackground: colorScheme.background,
109
109
  containerBorderWidth: 0,
110
110
  containerBorderColor: "transparent",
111
- selectedBackground: selectedBackgroundColor,
111
+ selectedBackground: withOpacity(colorScheme.main, 0.2),
112
112
  unselectedBackground: "transparent",
113
- selectedTextColor: colorScheme.foreground,
113
+ selectedTextColor: colorScheme.main,
114
114
  unselectedTextColor: colorScheme.main
115
115
  },
116
116
  light: {
@@ -126,9 +126,9 @@ function useSegmentVariantStyles(themeColor, variant, elevation = 0) {
126
126
  containerBackground: `${colorScheme.background}95`,
127
127
  containerBorderWidth: theme.borderWidth.md,
128
128
  containerBorderColor: `${colorScheme.main}90`,
129
- selectedBackground: selectedBackgroundColor,
129
+ selectedBackground: withOpacity(colorScheme.main, 0.2),
130
130
  unselectedBackground: "transparent",
131
- selectedTextColor: colorScheme.foreground,
131
+ selectedTextColor: colorScheme.main,
132
132
  unselectedTextColor: colorScheme.main
133
133
  }
134
134
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xaui/native",
3
- "version": "0.0.40",
3
+ "version": "0.0.41",
4
4
  "description": "Flutter-inspired React Native UI components with native animations powered by React Native Reanimated",
5
5
  "keywords": [
6
6
  "react-native",