@proximus/lavender-selectablebox-native 0.1.0-alpha.0 → 0.1.0-alpha.2

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 (6) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/PxSelectableBox.d.ts +1 -2
  3. package/dist/PxSelectableBox.d.ts.map +1 -1
  4. package/package.json +8 -9
  5. package/src/PxSelectableBox.tsx +17 -45
  6. package/tsconfig.json +1 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,18 @@
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.2](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-selectablebox-native@0.1.0-alpha.1...@proximus/lavender-selectablebox-native@0.1.0-alpha.2) (2025-09-05)
7
+
8
+ ### Features
9
+
10
+ - **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))
11
+
12
+ # [0.1.0-alpha.1](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-selectablebox-native@0.1.0-alpha.0...@proximus/lavender-selectablebox-native@0.1.0-alpha.1) (2025-08-13)
13
+
14
+ ### Bug Fixes
15
+
16
+ - **BCRI-4210372:** fix types field in modules ([68ac126](https://github.com/Pxs-Corporate/react-native-lavender/commit/68ac12657112473ae9e0e683076b1d9172be9ce6))
17
+
6
18
  # 0.1.0-alpha.0 (2025-08-13)
7
19
 
8
20
  ### Bug Fixes
package/dist/PxSelectableBox.d.ts CHANGED
@@ -12,8 +12,7 @@ export interface ISelectableBoxProps {
12
12
  contentComponent?: ReactNode;
13
13
  description?: string;
14
14
  testID?: string;
15
- selectedColor?: string;
16
15
  wrapperStyle?: StyleProp<ViewStyle>;
17
16
  }
18
- export declare function PxSelectableBox({ selected, label, onPress, containerStyle, withCheckbox, disabled, locked, priceComponent, contentComponent, description, selectedColor, testID, ...accessibilityProps }: ISelectableBoxProps & AccessibilityProps): React.JSX.Element;
17
+ export declare function PxSelectableBox({ selected, label, onPress, containerStyle, withCheckbox, disabled, locked, priceComponent, contentComponent, description, testID, ...accessibilityProps }: ISelectableBoxProps & AccessibilityProps): React.JSX.Element;
19
18
  //# sourceMappingURL=PxSelectableBox.d.ts.map
package/dist/PxSelectableBox.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PxSelectableBox.d.ts","sourceRoot":"","sources":["../src/PxSelectableBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EACL,kBAAkB,EAClB,SAAS,EAIT,SAAS,EACV,MAAM,cAAc,CAAC;AAOtB,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IAChC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACrC;AAED,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,KAAK,EACL,OAAO,EACP,cAAc,EACd,YAAY,EACZ,QAAgB,EAChB,MAAM,EACN,cAAc,EACd,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,MAAwB,EACxB,GAAG,kBAAkB,EACtB,EAAE,mBAAmB,GAAG,kBAAkB,qBAmI1C"}
1
+ {"version":3,"file":"PxSelectableBox.d.ts","sourceRoot":"","sources":["../src/PxSelectableBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EACL,kBAAkB,EAClB,SAAS,EAIT,SAAS,EACV,MAAM,cAAc,CAAC;AAOtB,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IAChC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACrC;AAED,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,KAAK,EACL,OAAO,EACP,cAAc,EACd,YAAY,EACZ,QAAgB,EAChB,MAAM,EACN,cAAc,EACd,gBAAgB,EAChB,WAAW,EACX,MAAwB,EACxB,GAAG,kBAAkB,EACtB,EAAE,mBAAmB,GAAG,kBAAkB,qBA2G1C"}
package/package.json CHANGED
@@ -1,10 +1,9 @@
1
1
  {
2
2
  "name": "@proximus/lavender-selectablebox-native",
3
- "version": "0.1.0-alpha.0",
3
+ "version": "0.1.0-alpha.2",
4
4
  "description": "Lavender selectable box component",
5
5
  "license": "MIT",
6
6
  "main": "src/index.ts",
7
- "types": "dist/index.d.ts",
8
7
  "type": "module",
9
8
  "scripts": {
10
9
  "clean": "rm -rf dist",
@@ -20,12 +19,12 @@
20
19
  "@proximus/lavender-texts-native": "workspace:*"
21
20
  },
22
21
  "devDependencies": {
23
- "@proximus/lavender-checkbox-native": "0.1.0-alpha.0",
24
- "@proximus/lavender-common-native": "0.1.0-alpha.0",
25
- "@proximus/lavender-icon-native": "0.1.0-alpha.0",
26
- "@proximus/lavender-radio-native": "0.1.0-alpha.0",
27
- "@proximus/lavender-styling-native": "0.1.0-alpha.0",
28
- "@proximus/lavender-texts-native": "0.1.0-alpha.0"
22
+ "@proximus/lavender-checkbox-native": "0.1.0-alpha.2",
23
+ "@proximus/lavender-common-native": "0.1.0-alpha.2",
24
+ "@proximus/lavender-icon-native": "0.1.0-alpha.2",
25
+ "@proximus/lavender-radio-native": "0.1.0-alpha.2",
26
+ "@proximus/lavender-styling-native": "0.1.0-alpha.2",
27
+ "@proximus/lavender-texts-native": "0.1.0-alpha.2"
29
28
  },
30
29
  "publishConfig": {
31
30
  "access": "public"
@@ -41,5 +40,5 @@
41
40
  }
42
41
  }
43
42
  },
44
- "gitHead": "27525289a448a6e4f3c2d36a88b9dc54d0f15fbf"
43
+ "gitHead": "38a67765befa2567a3f5f57976b7933cf5b85a24"
45
44
  }
package/src/PxSelectableBox.tsx CHANGED
@@ -10,7 +10,7 @@ import {
10
10
  import { a11y, e2eID } from '@proximus/lavender-common-native';
11
11
  import { PxRadioButton } from '@proximus/lavender-radio-native';
12
12
  import { PxCheckBox } from '@proximus/lavender-checkbox-native';
13
- import { Colors, ThemeName, useTheme } from '@proximus/lavender-styling-native';
13
+ import { useTheme } from '@proximus/lavender-styling-native';
14
14
  import { Body, Header } from '@proximus/lavender-texts-native';
15
15
 
16
16
  export interface ISelectableBoxProps {
@@ -25,7 +25,6 @@ export interface ISelectableBoxProps {
25
25
  contentComponent?: ReactNode;
26
26
  description?: string;
27
27
  testID?: string;
28
- selectedColor?: string;
29
28
  wrapperStyle?: StyleProp<ViewStyle>;
30
29
  }
31
30
 
@@ -40,12 +39,10 @@ export function PxSelectableBox({
40
39
  priceComponent,
41
40
  contentComponent,
42
41
  description,
43
- selectedColor,
44
42
  testID = 'selectableBox',
45
43
  ...accessibilityProps
46
44
  }: ISelectableBoxProps & AccessibilityProps) {
47
45
  const { theme } = useTheme();
48
- const isScarlet = theme.name === ThemeName.SCARLET;
49
46
 
50
47
  const accessibilityRole = locked
51
48
  ? 'text'
@@ -53,30 +50,16 @@ export function PxSelectableBox({
53
50
  ? 'checkbox'
54
51
  : 'radio';
55
52
  const accessibilityHint = `Selectable Item ${label}, checked: ${selected}`;
56
- const computedSelectedColor =
57
- selectedColor ||
58
- (isScarlet
59
- ? Colors.v7.status.epicSuccess
60
- : Colors.v8_1.shadesOfPurple.purple);
61
53
 
62
- const getColors = () =>
63
- isScarlet
64
- ? {
65
- uncheckedBorderColor: Colors.v7.shadesOfGrey.whiteOpacity12,
66
- backgroundColor: Colors.v7.shadesOfGrey.whiteOpacity8,
67
- focusBorderColor: Colors.shadesOfGrey.white,
68
- disabledBgColor: Colors.v7.shadesOfGrey.whiteOpacity8,
69
- defaultLabel: Colors.shadesOfGrey.white,
70
- uncheckedLabel: Colors.v7.shadesOfGrey.whiteOpacity16,
71
- }
72
- : {
73
- uncheckedBorderColor: Colors.v8_1.shadesOfGrey.dark120,
74
- backgroundColor: Colors.v8_1.white,
75
- focusBorderColor: Colors.v8_1.shadesOfPurple.purple,
76
- disabledBgColor: Colors.v8_1.white,
77
- defaultLabel: Colors.v8_1.shadesOfPurple.purple,
78
- uncheckedLabel: Colors.v8_1.text.black,
79
- };
54
+ const colors = {
55
+ uncheckedBorderColor: theme.t('ColorBorderMainDefault'),
56
+ backgroundColor: theme.t('ColorBackgroundContainerLightDefault'),
57
+ focusBorderColor: theme.t('ColorBorderBrandDefault'),
58
+ disabledBackgroundColor: theme.t('ColorBackgroundStateDisabledDefault'),
59
+ defaultLabel: theme.t('ColorTextNeutralDefault'),
60
+ uncheckedLabel: theme.t('ColorTextNeutralDefault'),
61
+ borderColor: theme.t('ColorBorderBrandDefault'),
62
+ };
80
63
 
81
64
  return (
82
65
  <TouchableOpacity
@@ -103,16 +86,16 @@ export function PxSelectableBox({
103
86
  styles.container,
104
87
  {
105
88
  borderColor: selected
106
- ? computedSelectedColor
107
- : getColors().uncheckedBorderColor,
108
- backgroundColor: getColors().backgroundColor,
89
+ ? colors.borderColor
90
+ : colors.uncheckedBorderColor,
91
+ backgroundColor: colors.backgroundColor,
109
92
  },
110
93
  disabled && {
111
94
  borderWidth: 0,
112
- backgroundColor: getColors().disabledBgColor,
95
+ backgroundColor: colors.disabledBackgroundColor,
113
96
  },
114
97
  locked && {
115
- borderColor: computedSelectedColor,
98
+ borderColor: colors.borderColor,
116
99
  },
117
100
  ]}
118
101
  {...a11y({
@@ -127,20 +110,11 @@ export function PxSelectableBox({
127
110
  <PxCheckBox
128
111
  onChange={onPress}
129
112
  checked={selected}
130
- color={
131
- selected
132
- ? computedSelectedColor
133
- : isScarlet
134
- ? Colors.v7.shadesOfGrey.whiteOpacity52
135
- : Colors.v7.shadesOfGrey.blackOpacity44
136
- }
137
- checkedColor={isScarlet ? '#0A0A0A' : undefined}
138
113
  disabled={disabled}
139
114
  />
140
115
  ) : (
141
116
  <PxRadioButton
142
117
  onPress={() => onPress?.(!selected)}
143
- color={computedSelectedColor}
144
118
  checked={selected}
145
119
  disabled={disabled}
146
120
  />
@@ -153,8 +127,8 @@ export function PxSelectableBox({
153
127
  styles.title,
154
128
  {
155
129
  color: !selected
156
- ? getColors().uncheckedLabel
157
- : getColors().defaultLabel,
130
+ ? colors.uncheckedLabel
131
+ : colors.defaultLabel,
158
132
  },
159
133
  ]}
160
134
  >
@@ -189,10 +163,8 @@ const styles = StyleSheet.create({
189
163
  padding: 8,
190
164
  alignItems: 'center',
191
165
  justifyContent: 'center',
192
- backgroundColor: Colors.v8_1.shadesOfGrey.dark4,
193
166
  },
194
167
  description: {
195
- color: Colors.v8_1.text.details,
196
168
  fontSize: 12,
197
169
  },
198
170
  topContentContainer: {
package/tsconfig.json CHANGED
@@ -3,6 +3,6 @@
3
3
  "compilerOptions": {
4
4
  "outDir": "dist",
5
5
  },
6
- "include": ["src"],
6
+ "include": ["src","../../../lib.d.ts"],
7
7
  "exclude": ["dist", "node_modules", "src/**/*.test.ts", "src/**/*.spec.ts"]
8
8
  }