@particle-network/ui-native 0.5.1-beta.4 → 0.5.1-beta.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 (13) hide show
  1. package/dist/components/UXButton/button.styles.js +4 -4
  2. package/dist/components/UXCheckbox/checkbox.js +11 -5
  3. package/dist/components/UXCheckbox/icons.js +15 -9
  4. package/dist/components/UXChip/styles.js +2 -2
  5. package/dist/components/UXRadio/radio.js +2 -1
  6. package/dist/components/UXSlider/slider.styles.js +1 -1
  7. package/dist/components/UXTabs/styles.js +3 -3
  8. package/dist/components/date-picker/date-button.js +2 -2
  9. package/dist/components/input/input.js +3 -3
  10. package/dist/components/input/styles.js +1 -1
  11. package/dist/config/config.default.js +2 -2
  12. package/dist/config/config.street.js +3 -3
  13. package/package.json +5 -5
package/dist/components/UXButton/button.styles.js CHANGED
@@ -112,7 +112,7 @@ const useStyles = (props)=>{
112
112
  }
113
113
  if ('solid' === variant) {
114
114
  if (customColorConfig) return customColorConfig.text;
115
- if ('contrast' === color) return 'bg-default';
115
+ if ('contrast' === color) return 'bgDefault';
116
116
  return 'white';
117
117
  }
118
118
  return color;
@@ -138,7 +138,7 @@ const useStyles = (props)=>{
138
138
  'default',
139
139
  'secondary'
140
140
  ].includes(color)) return getColor(color);
141
- return getColor('bg-200');
141
+ return getColor('bg200');
142
142
  }
143
143
  if ('flat' === variant) {
144
144
  if (customColorConfig) return `${getColor(customColorConfig.background)}20`;
@@ -146,7 +146,7 @@ const useStyles = (props)=>{
146
146
  if ([
147
147
  'default',
148
148
  'secondary'
149
- ].includes(color)) return getColor('bg-300');
149
+ ].includes(color)) return getColor('bg300');
150
150
  return `${getColor(color)}20`;
151
151
  }
152
152
  return 'transparent';
@@ -163,7 +163,7 @@ const useStyles = (props)=>{
163
163
  'default',
164
164
  'secondary'
165
165
  ].includes(color)) return getColor('secondary');
166
- if ('contrast' === color) return getColor('bg-default');
166
+ if ('contrast' === color) return getColor('bgDefault');
167
167
  return getColor(color);
168
168
  }
169
169
  return 'transparent';
package/dist/components/UXCheckbox/checkbox.js CHANGED
@@ -23,7 +23,7 @@ const UXCheckbox = ({ size, color, defaultSelected = false, isSelected, children
23
23
  const checkboxColor = color || groupContext?.color || 'primary';
24
24
  const displayLabelPlacement = labelPlacement || groupContext?.labelPlacement || 'right';
25
25
  const bgColor = useMemo(()=>{
26
- if ('secondary' === checkboxColor) return 'tertiary';
26
+ if ('secondary' === checkboxColor) return 'cursor';
27
27
  return checkboxColor;
28
28
  }, [
29
29
  checkboxColor
@@ -52,9 +52,9 @@ const UXCheckbox = ({ size, color, defaultSelected = false, isSelected, children
52
52
  ms
53
53
  ]);
54
54
  const labelVariant = useMemo(()=>{
55
- if ('sm' === checkboxSize) return 'body3';
56
- if ('lg' === checkboxSize) return 'body1';
57
- return 'body2';
55
+ if ('sm' === checkboxSize) return 'body2Bold';
56
+ if ('lg' === checkboxSize) return 'body1Bold';
57
+ return 'body2Bold';
58
58
  }, [
59
59
  checkboxSize
60
60
  ]);
@@ -64,6 +64,12 @@ const UXCheckbox = ({ size, color, defaultSelected = false, isSelected, children
64
64
  }, [
65
65
  displayLabelPlacement
66
66
  ]);
67
+ const gap = useMemo(()=>{
68
+ if ('sm' === checkboxSize) return 6;
69
+ return 8;
70
+ }, [
71
+ checkboxSize
72
+ ]);
67
73
  return /*#__PURE__*/ jsx(UXPressable, {
68
74
  disabled: checkboxIsDisabled,
69
75
  style: {
@@ -72,7 +78,7 @@ const UXCheckbox = ({ size, color, defaultSelected = false, isSelected, children
72
78
  onPress: handleSelectChange,
73
79
  children: /*#__PURE__*/ jsxs(Flex, {
74
80
  direction: flexDirection,
75
- gap: 8,
81
+ gap: gap,
76
82
  items: "center",
77
83
  ...props,
78
84
  children: [
package/dist/components/UXCheckbox/icons.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import "react";
3
- import react_native_svg, { Path } from "react-native-svg";
3
+ import react_native_svg, { Path, Rect } from "react-native-svg";
4
4
  import { useColors } from "../../hooks/index.js";
5
5
  const CheckboxOnIcon = ({ size = 16, color1 = 'default', color2 = 'white' })=>{
6
6
  const { getColor } = useColors();
@@ -8,16 +8,18 @@ const CheckboxOnIcon = ({ size = 16, color1 = 'default', color2 = 'white' })=>{
8
8
  const color2Value = getColor(color2);
9
9
  return /*#__PURE__*/ jsxs(react_native_svg, {
10
10
  fill: "none",
11
- viewBox: "0 0 16 16",
11
+ viewBox: "0 0 18 18",
12
12
  width: size,
13
13
  height: size,
14
14
  children: [
15
- /*#__PURE__*/ jsx(Path, {
16
- d: "M2.46154 16H13.5385C14.8979 16 16 14.8979 16 13.5385V2.46154C16 1.10207 14.8979 0 13.5385 0H2.46154C1.10207 0 0 1.10207 0 2.46154V13.5385C0 14.8979 1.10207 16 2.46154 16Z",
15
+ /*#__PURE__*/ jsx(Rect, {
16
+ width: 18,
17
+ height: 18,
18
+ rx: 2.25,
17
19
  fill: color1Value
18
20
  }),
19
21
  /*#__PURE__*/ jsx(Path, {
20
- d: "M6.75547 9.24601L4.84436 7.3349C4.68139 7.17193 4.47399 7.09045 4.22214 7.09045C3.97028 7.09045 3.76288 7.17193 3.59991 7.3349C3.43695 7.49786 3.35547 7.70527 3.35547 7.95712C3.35547 8.20897 3.43695 8.41638 3.59991 8.57934L6.13325 11.1127C6.31102 11.2905 6.51843 11.3793 6.75547 11.3793C6.99251 11.3793 7.19991 11.2905 7.37769 11.1127L12.3999 6.09045C12.5629 5.92749 12.6444 5.72008 12.6444 5.46823C12.6444 5.21638 12.5629 5.00897 12.3999 4.84601C12.237 4.68304 12.0295 4.60156 11.7777 4.60156C11.5258 4.60156 11.3184 4.68304 11.1555 4.84601L6.75547 9.24601Z",
22
+ d: "M7.82501 10.225L5.67501 8.075C5.49168 7.89167 5.25834 7.8 4.97501 7.8C4.69168 7.8 4.45834 7.89167 4.27501 8.075C4.09168 8.25833 4.00001 8.49167 4.00001 8.775C4.00001 9.05833 4.09168 9.29167 4.27501 9.475L7.12501 12.325C7.32501 12.525 7.55835 12.625 7.82501 12.625C8.09168 12.625 8.32501 12.525 8.52501 12.325L14.175 6.675C14.3583 6.49167 14.45 6.25833 14.45 5.975C14.45 5.69167 14.3583 5.45833 14.175 5.275C13.9917 5.09167 13.7583 5 13.475 5C13.1917 5 12.9583 5.09167 12.775 5.275L7.82501 10.225Z",
21
23
  fill: color2Value
22
24
  })
23
25
  ]
@@ -27,14 +29,18 @@ const CheckboxOffIcon = ({ size = 16, color = 'default' })=>{
27
29
  const { getColor } = useColors();
28
30
  const colorValue = getColor(color);
29
31
  return /*#__PURE__*/ jsx(react_native_svg, {
32
+ viewBox: "0 0 18 18",
30
33
  fill: "none",
31
- viewBox: "0 0 16 16",
32
34
  width: size,
33
35
  height: size,
34
- children: /*#__PURE__*/ jsx(Path, {
35
- d: "M2.46191 0.615234H13.5381C14.5577 0.615234 15.3848 1.44231 15.3848 2.46191V13.5381C15.3848 14.5577 14.5577 15.3848 13.5381 15.3848H2.46191C1.44231 15.3848 0.615234 14.5577 0.615234 13.5381V2.46191C0.615234 1.44231 1.44231 0.615234 2.46191 0.615234Z",
36
+ children: /*#__PURE__*/ jsx(Rect, {
37
+ x: 0.7,
38
+ y: 0.7,
39
+ width: 16.6,
40
+ height: 16.6,
41
+ rx: 1.55,
36
42
  stroke: colorValue,
37
- strokeWidth: 1.23077
43
+ strokeWidth: 1.4
38
44
  })
39
45
  });
40
46
  };
package/dist/components/UXChip/styles.js CHANGED
@@ -44,13 +44,13 @@ const useStyles = ({ size = 'md', color = 'default', variant = 'flat', isDisable
44
44
  if ('solid' === variant) {
45
45
  if ([
46
46
  'default'
47
- ].includes(color)) return getColor('bg-200');
47
+ ].includes(color)) return getColor('bg200');
48
48
  return getColor(color);
49
49
  }
50
50
  if ('flat' === variant) {
51
51
  if ([
52
52
  'default'
53
- ].includes(color)) return getColor('bg-300');
53
+ ].includes(color)) return getColor('bg300');
54
54
  return `${getColor(color)}20`;
55
55
  }
56
56
  return 'transparent';
package/dist/components/UXRadio/radio.js CHANGED
@@ -23,7 +23,8 @@ const UXRadio = ({ size, color, children, value, isDisabled, ...props })=>{
23
23
  if ('lg' === radioSize) return ms(14);
24
24
  return ms(12);
25
25
  }, [
26
- radioSize
26
+ radioSize,
27
+ ms
27
28
  ]);
28
29
  const labelVariant = useMemo(()=>{
29
30
  if ('sm' === radioSize) return 'body3';
package/dist/components/UXSlider/slider.styles.js CHANGED
@@ -18,7 +18,7 @@ const useStyles = ({ color })=>{
18
18
  width: '100%',
19
19
  borderRadius: TRACK_HEIGHT / 2,
20
20
  position: 'absolute',
21
- backgroundColor: colors['bg-200'],
21
+ backgroundColor: colors.bg200,
22
22
  height: TRACK_HEIGHT
23
23
  },
24
24
  fill: {
package/dist/components/UXTabs/styles.js CHANGED
@@ -80,8 +80,8 @@ const useStyles = (props)=>{
80
80
  ms
81
81
  ]);
82
82
  const wrapperBackgroundColor = useMemo(()=>{
83
- if ('switch' === variant) return getColor('bg-200');
84
- if ('solid' === variant) return getColor('bg-200');
83
+ if ('switch' === variant) return getColor('bg200');
84
+ if ('solid' === variant) return getColor('bg200');
85
85
  return 'transparent';
86
86
  }, [
87
87
  variant,
@@ -125,7 +125,7 @@ const useStyles = (props)=>{
125
125
  if (!isSelected) return 'transparent';
126
126
  if ('text' === variant || 'underlined' === variant) return 'transparent';
127
127
  if ('default' === color) {
128
- if ('light' === variant) return getColor('bg-200');
128
+ if ('light' === variant) return getColor('bg200');
129
129
  return getColor('cursor');
130
130
  }
131
131
  return getColor(color);
package/dist/components/date-picker/date-button.js CHANGED
@@ -8,8 +8,8 @@ const DateButton = ({ isSelected, text, ...props })=>/*#__PURE__*/ jsx(UXPressab
8
8
  border: 1,
9
9
  h: 30,
10
10
  radius: 4,
11
- borderColor: isSelected ? 'primary' : 'bg-200',
12
- bg: "bg-200",
11
+ borderColor: isSelected ? 'primary' : 'bg200',
12
+ bg: "bg200",
13
13
  ...props,
14
14
  children: /*#__PURE__*/ jsx(Text, {
15
15
  body3Bold: true,
package/dist/components/input/input.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
3
3
  import { Platform, TextInput } from "react-native";
4
- import { useColors, useI18n, useKeyboard } from "../../hooks/index.js";
4
+ import { useI18n, useKeyboard, useTheme } from "../../hooks/index.js";
5
5
  import { Icon } from "../../icons/index.js";
6
6
  import { HStack } from "../layout/HStack.js";
7
7
  import { VStack } from "../layout/VStack.js";
@@ -10,7 +10,7 @@ import { UXPressable } from "../UXPressable/index.js";
10
10
  import { useStyles } from "./styles.js";
11
11
  const UXInput = /*#__PURE__*/ forwardRef((props, ref)=>{
12
12
  const { containerStyle, wrapperStyle, inputStyle, value: controlledValue, defaultValue, errorMessage, startContent, endContent, isReadOnly, isDisabled, isRequired, isClearable, isInvalid: isInvalidProp, autoErrorMessage, label, onChangeText, onValueChange, onFocus, onBlur, blurOnKeyboardHide = true, ...restProps } = props;
13
- const { getColor } = useColors();
13
+ const { colors } = useTheme();
14
14
  const inputRef = useRef(null);
15
15
  const [internalValue, setInternalValue] = useState(defaultValue);
16
16
  const [isFocused, setIsFocused] = useState(false);
@@ -143,7 +143,7 @@ const UXInput = /*#__PURE__*/ forwardRef((props, ref)=>{
143
143
  ref: inputRef,
144
144
  allowFontScaling: false,
145
145
  editable: !isDisabled && !isReadOnly,
146
- placeholderTextColor: getColor('cursor'),
146
+ placeholderTextColor: colors.cursor,
147
147
  cursorColor: styles.container.borderColor,
148
148
  selectionColor: `${styles.container.borderColor}90`,
149
149
  style: [
package/dist/components/input/styles.js CHANGED
@@ -60,7 +60,7 @@ const useStyles = (props)=>{
60
60
  isColorText,
61
61
  color
62
62
  ]);
63
- const backgroundColor = useMemo(()=>getColor('bg-200'), [
63
+ const backgroundColor = useMemo(()=>getColor('bg200'), [
64
64
  getColor
65
65
  ]);
66
66
  const containerPadding = useMemo(()=>{
package/dist/config/config.default.js CHANGED
@@ -17,11 +17,11 @@ const defaultComponentConfig = {
17
17
  },
18
18
  color: {
19
19
  default: {
20
- background: 'bg-200',
20
+ background: 'bg200',
21
21
  text: 'default'
22
22
  },
23
23
  secondary: {
24
- background: 'bg-200',
24
+ background: 'bg200',
25
25
  text: 'secondary'
26
26
  }
27
27
  }
package/dist/config/config.street.js CHANGED
@@ -20,10 +20,10 @@ const streetComponentConfig = {
20
20
  color: {
21
21
  default: {
22
22
  background: 'foreground',
23
- text: 'bg-default'
23
+ text: 'bgDefault'
24
24
  },
25
25
  secondary: {
26
- background: 'bg-200',
26
+ background: 'bg200',
27
27
  text: 'foreground'
28
28
  }
29
29
  }
@@ -45,7 +45,7 @@ const streetComponentConfig = {
45
45
  },
46
46
  modal: {
47
47
  radius: 34,
48
- bg: 'bg-default',
48
+ bg: 'bgDefault',
49
49
  backdrop: {
50
50
  light: '#00000050',
51
51
  dark: '#1f1f2370'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@particle-network/ui-native",
3
- "version": "0.5.1-beta.4",
3
+ "version": "0.5.1-beta.6",
4
4
  "main": "./entry.js",
5
5
  "react-native": "./dist/index.js",
6
6
  "module": "./dist/index.js",
@@ -45,8 +45,8 @@
45
45
  "react-native-size-matters": "^0.4.2",
46
46
  "react-native-toast-message": "^2.3.3",
47
47
  "react-native-worklets": "0.5.1",
48
- "@particle-network/icons": "0.5.1-beta.4",
49
- "@particle-network/ui-shared": "0.4.1-beta.3"
48
+ "@particle-network/ui-shared": "0.4.1-beta.4",
49
+ "@particle-network/icons": "0.5.1-beta.5"
50
50
  },
51
51
  "devDependencies": {
52
52
  "@babel/core": "^7.24.0",
@@ -90,8 +90,8 @@
90
90
  "vite": "^6.3.5",
91
91
  "zustand": "^5.0.8",
92
92
  "@particle-network/eslint-config": "0.3.0",
93
- "@particle-network/lintstaged-config": "0.1.0",
94
- "@particle-network/icons": "0.5.1-beta.4"
93
+ "@particle-network/icons": "0.5.1-beta.5",
94
+ "@particle-network/lintstaged-config": "0.1.0"
95
95
  },
96
96
  "overrides": {
97
97
  "react-docgen-typescript": "2.2.2",