@proximus/lavender-checkbox-native 0.1.0-alpha.1 → 0.1.0-alpha.3

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 (5) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/PxCheckBox.d.ts +2 -25
  3. package/dist/PxCheckBox.d.ts.map +1 -1
  4. package/package.json +5 -5
  5. package/src/PxCheckBox.tsx +40 -102
package/CHANGELOG.md CHANGED
@@ -3,6 +3,16 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [0.1.0-alpha.3](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-checkbox-native@0.1.0-alpha.2...@proximus/lavender-checkbox-native@0.1.0-alpha.3) (2025-09-12)
7
+
8
+ **Note:** Version bump only for package @proximus/lavender-checkbox-native
9
+
10
+ # [0.1.0-alpha.2](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-checkbox-native@0.1.0-alpha.1...@proximus/lavender-checkbox-native@0.1.0-alpha.2) (2025-09-05)
11
+
12
+ ### Features
13
+
14
+ - **BCRI-4279213:** update token architecture and component styles ([#18](https://github.com/Pxs-Corporate/react-native-lavender/issues/18)) ([2fabf41](https://github.com/Pxs-Corporate/react-native-lavender/commit/2fabf416ce069e9756daa868c3012181db87e7f5))
15
+
6
16
  # [0.1.0-alpha.1](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-checkbox-native@0.1.0-alpha.0...@proximus/lavender-checkbox-native@0.1.0-alpha.1) (2025-08-13)
7
17
 
8
18
  ### Bug Fixes
package/dist/PxCheckBox.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { AccessibilityProps, StyleProp, TextStyle, ViewStyle } from 'react-native';
2
+ import { AccessibilityProps, StyleProp, ViewStyle } from 'react-native';
3
3
  import 'nullthrows';
4
4
  export interface ICheckBoxProps {
5
5
  /**
@@ -9,32 +9,9 @@ export interface ICheckBoxProps {
9
9
  onChange?: (value: boolean) => void;
10
10
  disabled?: boolean;
11
11
  testID?: string;
12
- color?: string;
13
12
  label?: string;
14
13
  hasError?: boolean;
15
14
  wrapperStyle?: StyleProp<ViewStyle>;
16
- checkboxStyle?: StyleProp<ViewStyle>;
17
- labelStyle?: StyleProp<TextStyle>;
18
- labelColor?: string;
19
- /**
20
- * Check @react-native-community/checkbox for more info
21
- */
22
- /**
23
- * Android only
24
- */
25
- focusable?: boolean;
26
- tintColors?: {
27
- true?: string;
28
- false?: string;
29
- };
30
- /**
31
- * IOS only
32
- */
33
- checkedColor?: string;
34
- boxType?: 'circle' | 'square';
35
- tintColor?: string;
36
- onTintColor?: string;
37
- checkedBackgroundColor?: string;
38
15
  }
39
- export declare function PxCheckBox({ checked, onChange, testID, label, disabled, checkedColor, tintColor, checkedBackgroundColor, onTintColor, focusable, labelColor, boxType, wrapperStyle, checkboxStyle, labelStyle, ...accessibilityProps }: ICheckBoxProps & AccessibilityProps): React.JSX.Element;
16
+ export declare function PxCheckBox({ checked, onChange, testID, label, disabled, wrapperStyle, ...accessibilityProps }: ICheckBoxProps & AccessibilityProps): React.JSX.Element;
40
17
  //# sourceMappingURL=PxCheckBox.d.ts.map
package/dist/PxCheckBox.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PxCheckBox.d.ts","sourceRoot":"","sources":["../src/PxCheckBox.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAChE,OAAO,EACL,kBAAkB,EAElB,SAAS,EAET,SAAS,EAET,SAAS,EACV,MAAM,cAAc,CAAC;AAKtB,OAAO,YAAY,CAAC;AAEpB,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACrC,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE;QACX,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAID,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,KAAK,EACL,QAAgB,EAChB,YAAY,EACZ,SAAS,EACT,sBAAsB,EACtB,WAAW,EACX,SAAiB,EACjB,UAAU,EACV,OAAkB,EAClB,YAAY,EACZ,aAAa,EACb,UAAU,EACV,GAAG,kBAAkB,EACtB,EAAE,cAAc,GAAG,kBAAkB,qBA2IrC"}
1
+ {"version":3,"file":"PxCheckBox.d.ts","sourceRoot":"","sources":["../src/PxCheckBox.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAChE,OAAO,EACL,kBAAkB,EAClB,SAAS,EAGT,SAAS,EACV,MAAM,cAAc,CAAC;AAKtB,OAAO,YAAY,CAAC;AAEpB,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACrC;AAED,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,KAAK,EACL,QAAgB,EAChB,YAAY,EACZ,GAAG,kBAAkB,EACtB,EAAE,cAAc,GAAG,kBAAkB,qBAmHrC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-checkbox-native",
3
- "version": "0.1.0-alpha.1",
3
+ "version": "0.1.0-alpha.3",
4
4
  "description": "Lavender Checkbox native component",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -16,9 +16,9 @@
16
16
  "@proximus/lavender-texts-native": "workspace:*"
17
17
  },
18
18
  "devDependencies": {
19
- "@proximus/lavender-common-native": "0.1.0-alpha.1",
20
- "@proximus/lavender-styling-native": "0.1.0-alpha.1",
21
- "@proximus/lavender-texts-native": "0.1.0-alpha.1"
19
+ "@proximus/lavender-common-native": "0.1.0-alpha.3",
20
+ "@proximus/lavender-styling-native": "0.1.0-alpha.2",
21
+ "@proximus/lavender-texts-native": "0.1.0-alpha.3"
22
22
  },
23
23
  "publishConfig": {
24
24
  "access": "public"
@@ -34,5 +34,5 @@
34
34
  }
35
35
  }
36
36
  },
37
- "gitHead": "d422a1d369000e1e249afb26de2cef08930c2407"
37
+ "gitHead": "6328f584529cb675f4a2ede8ad89f31e2b3c9ffb"
38
38
  }
package/src/PxCheckBox.tsx CHANGED
@@ -2,16 +2,14 @@ import CheckBox from '@react-native-community/checkbox';
2
2
  import React, { useCallback, useEffect, useState } from 'react';
3
3
  import {
4
4
  AccessibilityProps,
5
- Platform,
6
5
  StyleProp,
7
6
  StyleSheet,
8
- TextStyle,
9
7
  TouchableOpacity,
10
8
  ViewStyle,
11
9
  } from 'react-native';
12
10
 
13
11
  import { a11y, e2eID } from '@proximus/lavender-common-native';
14
- import { Colors, ThemeName, useTheme } from '@proximus/lavender-styling-native';
12
+ import { useTheme } from '@proximus/lavender-styling-native';
15
13
  import { Body } from '@proximus/lavender-texts-native';
16
14
  import 'nullthrows';
17
15
 
@@ -23,58 +21,22 @@ export interface ICheckBoxProps {
23
21
  onChange?: (value: boolean) => void;
24
22
  disabled?: boolean;
25
23
  testID?: string;
26
- color?: string;
27
24
  label?: string;
28
25
  hasError?: boolean;
29
26
  wrapperStyle?: StyleProp<ViewStyle>;
30
- checkboxStyle?: StyleProp<ViewStyle>;
31
- labelStyle?: StyleProp<TextStyle>;
32
- labelColor?: string;
33
- /**
34
- * Check @react-native-community/checkbox for more info
35
- */
36
- /**
37
- * Android only
38
- */
39
- focusable?: boolean;
40
- tintColors?: {
41
- true?: string;
42
- false?: string;
43
- };
44
- /**
45
- * IOS only
46
- */
47
- checkedColor?: string;
48
- boxType?: 'circle' | 'square';
49
- tintColor?: string;
50
- onTintColor?: string;
51
- checkedBackgroundColor?: string;
52
27
  }
53
28
 
54
- const isAndroid = Platform.OS === 'android';
55
-
56
29
  export function PxCheckBox({
57
30
  checked,
58
31
  onChange,
59
32
  testID,
60
33
  label,
61
34
  disabled = false,
62
- checkedColor,
63
- tintColor,
64
- checkedBackgroundColor,
65
- onTintColor,
66
- focusable = false,
67
- labelColor,
68
- boxType = 'square',
69
35
  wrapperStyle,
70
- checkboxStyle,
71
- labelStyle,
72
36
  ...accessibilityProps
73
37
  }: ICheckBoxProps & AccessibilityProps) {
74
38
  const { theme } = useTheme();
75
39
 
76
- const isScarlet = theme.name === ThemeName.SCARLET;
77
-
78
40
  const onChangeCallback = useCallback(
79
41
  (value: boolean) => {
80
42
  setInternalChecked(value);
@@ -91,36 +53,18 @@ export function PxCheckBox({
91
53
  setInternalChecked(checked);
92
54
  }, [checked]);
93
55
 
94
- const getColors = () =>
95
- isScarlet
96
- ? {
97
- disabledBackgroundColor: Colors.v7.shadesOfGrey.whiteOpacity8,
98
- checkedBackgroundColor: Colors.v8_1.white,
99
- backgroundColor: Colors.v7.shadesOfGrey.blackOpacity2,
100
- errorColor: Colors.v7.status.epicError,
101
- disabledLabelColor: Colors.v7.shadesOfGrey.whiteOpacity16,
102
- disabledColor: Colors.v7.shadesOfGrey.whiteOpacity8,
103
- defaultLabel: '#FFF',
104
- tintColor: Colors.brand.purple,
105
- focusColor: Colors.white,
106
- disabledCheckColor: Colors.v8_1.shadesOfGrey.dark160,
107
- disabledBorderColor: Colors.v8_1.strokeBlack,
108
- }
109
- : {
110
- disabledBackgroundColor: Colors.v8_1.shadesOfGrey.dark160,
111
- checkedBackgroundColor: Colors.v8_1.shadesOfPurple.purple,
112
- tintColor: Colors.v8_1.shadesOfPurple.purple,
113
- backgroundColor: Colors.v8_1.shadesOfGrey.dark4,
114
- disabledBorderColor: Colors.v8_1.shadesOfGrey.dark160,
115
- borderColor: Colors.v8_1.strokeBlack,
116
- errorColor: Colors.v7.status.error,
117
- disabledLabelColor: Colors.v7.shadesOfGrey.black0Opacity12,
118
- disabledColor: Colors.v8_1.shadesOfGrey.dark160,
119
- defaultLabel: '#0A0A0A',
120
- checkColor: Colors.v8_1.white,
121
- disabledCheckColor: Colors.v8_1.shadesOfGrey.dark160,
122
- focusColor: Colors.v8_1.shadesOfPurple.purple,
123
- };
56
+ const colors = {
57
+ disabledBackgroundColor: theme.t('ColorBackgroundStateDisabledDefault'),
58
+ disabledLabelColor: theme.t('ColorTextStateDisabledDefault'),
59
+ disabledCheckColor: 'rgba(255, 255, 255, 0.3)',
60
+ disabledBorderColor: theme.t('ColorBorderMainDefault'),
61
+ checkedBackgroundColor: theme.t('ColorBackgroundContainerPrimaryDefault'),
62
+ checkColor: '#FFFFFF',
63
+ tintColor: theme.t('ColorIconBrandDefault'),
64
+ backgroundColor: theme.t('ColorBackgroundContainerLightDefault'),
65
+ borderColor: theme.t('ColorBorderNeutralDefault'),
66
+ defaultLabelColor: theme.t('ColorTextNeutralDefault'),
67
+ };
124
68
 
125
69
  return (
126
70
  <TouchableOpacity
@@ -138,47 +82,46 @@ export function PxCheckBox({
138
82
  accessible: false,
139
83
  })}
140
84
  {...e2eID(testID + '-checkbox')}
85
+ disabled={disabled}
141
86
  >
142
87
  <CheckBox
143
- lineWidth={disabled || !internalChecked ? 2 : 3}
88
+ lineWidth={2}
144
89
  style={[
145
90
  styles.checkbox,
146
91
  {
147
- backgroundColor: isAndroid
148
- ? 'transparent'
149
- : disabled
150
- ? getColors().disabledBackgroundColor
151
- : getColors().backgroundColor,
92
+ // @ts-ignore
93
+ width: theme.t('SizeM').number,
94
+ // @ts-ignore
95
+ height: theme.t('SizeM').number,
152
96
  }, // Unchecked background color
153
- checkboxStyle as any,
154
97
  ]}
155
98
  tintColors={{
156
- true: getColors().tintColor,
157
- false: getColors().tintColor,
99
+ // Android only
100
+ true: disabled ? colors.disabledBackgroundColor : colors.tintColor,
101
+ false: disabled ? colors.disabledBackgroundColor : colors.tintColor,
158
102
  }}
159
103
  tintColor={
160
- tintColor || disabled
161
- ? internalChecked
162
- ? getColors().backgroundColor
163
- : getColors().disabledBackgroundColor
164
- : getColors().borderColor
104
+ // iOS only
105
+ disabled ? colors.disabledBackgroundColor : colors.borderColor // enabled
165
106
  } // checkbox border color when unchecked
166
- onTintColor={onTintColor || getColors().tintColor} // checkbox border color when checked
107
+ onTintColor={
108
+ // iOS only
109
+ disabled
110
+ ? colors.disabledBackgroundColor
111
+ : colors.checkedBackgroundColor
112
+ } // checkbox border color when checked
167
113
  onFillColor={
168
- checkedBackgroundColor || getColors().checkedBackgroundColor
169
- }
170
- onCheckColor={
171
- checkedColor || disabled
172
- ? getColors().disabledCheckColor
173
- : getColors().checkColor
114
+ disabled
115
+ ? colors.disabledBackgroundColor
116
+ : colors.checkedBackgroundColor
174
117
  }
175
- animationDuration={0.5}
118
+ onCheckColor={disabled ? colors.disabledCheckColor : colors.checkColor}
119
+ animationDuration={0.2}
176
120
  value={internalChecked}
177
121
  disabled={disabled}
178
- boxType={boxType}
122
+ boxType={'square'}
179
123
  onValueChange={onChangeCallback}
180
- hideBox={isAndroid || (disabled && internalChecked)}
181
- focusable={focusable}
124
+ focusable={true}
182
125
  {...a11y({
183
126
  accessible: accessibilityProps.accessible,
184
127
  accessibilityLabel: accessibilityProps.accessibilityLabel || label,
@@ -195,13 +138,10 @@ export function PxCheckBox({
195
138
  style={[
196
139
  styles.label,
197
140
  {
198
- color: labelColor
199
- ? labelColor
200
- : disabled
201
- ? getColors().disabledLabelColor
202
- : getColors().defaultLabel,
141
+ color: disabled
142
+ ? colors.disabledLabelColor
143
+ : colors.defaultLabelColor,
203
144
  },
204
- labelStyle,
205
145
  ]}
206
146
  >
207
147
  {label}
@@ -213,8 +153,6 @@ export function PxCheckBox({
213
153
 
214
154
  const styles = StyleSheet.create({
215
155
  checkbox: {
216
- height: 24,
217
- width: 24,
218
156
  borderRadius: 5,
219
157
  },
220
158
  label: {