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

package/dist/PxCheckBox.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AccessibilityProps, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import { AccessibilityProps, StyleProp, ViewStyle } from 'react-native';
 import 'nullthrows';
 export interface ICheckBoxProps {
     /**
@@ -9,32 +9,9 @@ export interface ICheckBoxProps {
     onChange?: (value: boolean) => void;
     disabled?: boolean;
     testID?: string;
-    color?: string;
     label?: string;
     hasError?: boolean;
     wrapperStyle?: StyleProp<ViewStyle>;
-    checkboxStyle?: StyleProp<ViewStyle>;
-    labelStyle?: StyleProp<TextStyle>;
-    labelColor?: string;
-    /**
-     * Check @react-native-community/checkbox for more info
-     */
-    /**
-     * Android only
-     */
-    focusable?: boolean;
-    tintColors?: {
-        true?: string;
-        false?: string;
-    };
-    /**
-     * IOS only
-     */
-    checkedColor?: string;
-    boxType?: 'circle' | 'square';
-    tintColor?: string;
-    onTintColor?: string;
-    checkedBackgroundColor?: string;
 }
-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;
+export declare function PxCheckBox({ checked, onChange, testID, label, disabled, wrapperStyle, ...accessibilityProps }: ICheckBoxProps & AccessibilityProps): React.JSX.Element;
 //# sourceMappingURL=PxCheckBox.d.ts.map

package/dist/PxCheckBox.d.ts.map

@@ -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"}
+{"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/dist/PxCheckBox.js

@@ -0,0 +1,88 @@
+import CheckBox from '@react-native-community/checkbox';
+import React, { useCallback, useEffect, useState } from 'react';
+import { StyleSheet, TouchableOpacity, } from 'react-native';
+import { a11y, e2eID } from '@proximus/lavender-common-native';
+import { useTheme } from '@proximus/lavender-styling-native';
+import { Body } from '@proximus/lavender-texts-native';
+import 'nullthrows';
+export function PxCheckBox({ checked, onChange, testID, label, disabled = false, wrapperStyle, ...accessibilityProps }) {
+    const { theme } = useTheme();
+    const onChangeCallback = useCallback((value) => {
+        setInternalChecked(value);
+        if (onChange) {
+            onChange(value);
+        }
+    }, [onChange]);
+    const [internalChecked, setInternalChecked] = useState(checked);
+    useEffect(() => {
+        setInternalChecked(checked);
+    }, [checked]);
+    const colors = {
+        disabledBackgroundColor: theme.t('ColorBackgroundStateDisabledDefault'),
+        disabledLabelColor: theme.t('ColorTextStateDisabledDefault'),
+        disabledCheckColor: 'rgba(255, 255, 255, 0.3)',
+        disabledBorderColor: theme.t('ColorBorderMainDefault'),
+        checkedBackgroundColor: theme.t('ColorBackgroundContainerPrimaryDefault'),
+        checkColor: '#FFFFFF',
+        tintColor: theme.t('ColorIconBrandDefault'),
+        backgroundColor: theme.t('ColorBackgroundContainerLightDefault'),
+        borderColor: theme.t('ColorBorderNeutralDefault'),
+        defaultLabelColor: theme.t('ColorTextNeutralDefault'),
+    };
+    return (React.createElement(TouchableOpacity, { style: [
+            {
+                flexDirection: 'row',
+                alignItems: 'center',
+            },
+            wrapperStyle,
+        ], onPress: () => {
+            onChangeCallback(!internalChecked);
+        }, ...a11y({
+            accessible: false,
+        }), ...e2eID(testID + '-checkbox'), disabled: disabled },
+        React.createElement(CheckBox, { lineWidth: 2, style: [
+                styles.checkbox,
+                {
+                    // @ts-ignore
+                    width: theme.t('SizeM').number,
+                    // @ts-ignore
+                    height: theme.t('SizeM').number,
+                }, // Unchecked background color
+            ], tintColors: {
+                // Android only
+                true: disabled ? colors.disabledBackgroundColor : colors.tintColor,
+                false: disabled ? colors.disabledBackgroundColor : colors.tintColor,
+            }, tintColor: 
+            // iOS only
+            disabled ? colors.disabledBackgroundColor : colors.borderColor // enabled
+            , onTintColor: 
+            // iOS only
+            disabled
+                ? colors.disabledBackgroundColor
+                : colors.checkedBackgroundColor, onFillColor: disabled
+                ? colors.disabledBackgroundColor
+                : colors.checkedBackgroundColor, onCheckColor: disabled ? colors.disabledCheckColor : colors.checkColor, animationDuration: 0.2, value: internalChecked, disabled: disabled, boxType: 'square', onValueChange: onChangeCallback, focusable: true, ...a11y({
+                accessible: accessibilityProps.accessible,
+                accessibilityLabel: accessibilityProps.accessibilityLabel || label,
+                accessibilityHint: accessibilityProps.accessibilityHint,
+                importantForAccessibility: accessibilityProps.importantForAccessibility,
+            }), ...e2eID(testID + '-checkbox') }),
+        label && label.trim() !== '' && (React.createElement(Body, { accessible: false, importantForAccessibility: 'no', style: [
+                styles.label,
+                {
+                    color: disabled
+                        ? colors.disabledLabelColor
+                        : colors.defaultLabelColor,
+                },
+            ] }, label))));
+}
+const styles = StyleSheet.create({
+    checkbox: {
+        borderRadius: 5,
+    },
+    label: {
+        marginHorizontal: 12,
+        fontStyle: 'normal',
+        fontWeight: '400',
+    },
+});

package/package.json

@@ -1,38 +1,19 @@
 {
   "name": "@proximus/lavender-checkbox-native",
-  "version": "0.1.0-alpha.1",
+  "version": "0.1.0-alpha.12",
   "description": "Lavender Checkbox native component",
   "license": "MIT",
   "type": "module",
-  "main": "src/index.ts",
-  "scripts": {
-    "clean": "rm -rf dist",
-    "prepublish": "yarn clean && yarn build",
-    "build": "npx tsc -p tsconfig.json"
-  },
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
   "peerDependencies": {
-    "@proximus/lavender-common-native": "workspace:*",
-    "@proximus/lavender-styling-native": "workspace:*",
-    "@proximus/lavender-texts-native": "workspace:*"
-  },
-  "devDependencies": {
-    "@proximus/lavender-common-native": "0.1.0-alpha.1",
-    "@proximus/lavender-styling-native": "0.1.0-alpha.1",
-    "@proximus/lavender-texts-native": "0.1.0-alpha.1"
+    "@proximus/lavender-common-native": "*",
+    "@proximus/lavender-styling-native": "*",
+    "@proximus/lavender-texts-native": "*"
   },
   "publishConfig": {
     "access": "public"
-  },
-  "lerna": {
-    "command": {
-      "publish": {
-        "assets": [
-          "dist",
-          "src",
-          "package.json"
-        ]
-      }
-    }
-  },
-  "gitHead": "d422a1d369000e1e249afb26de2cef08930c2407"
+  }
 }

package/CHANGELOG.md

@@ -1,45 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [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)
-
-### Bug Fixes
-
-- **BCRI-4210372:** fix types field in modules ([68ac126](https://github.com/Pxs-Corporate/react-native-lavender/commit/68ac12657112473ae9e0e683076b1d9172be9ce6))
-
-# 0.1.0-alpha.0 (2025-08-13)
-
-### Bug Fixes
-
-- **BCRI-3807748:** fix checkbox android native crash ([f358872](https://github.com/Pxs-Corporate/react-native-lavender/commit/f3588725a8a7440722b6fc13a5586da2da758ea0))
-
-### Features
-
-- **BCRI-000000:** remove default E2E on DEV env build for all components ([a5d27bf](https://github.com/Pxs-Corporate/react-native-lavender/commit/a5d27bfaaebf5b75f3160f31c64b590b7bd00b93))
-- **BCRI-3651613:** checkbox module ([b791f5f](https://github.com/Pxs-Corporate/react-native-lavender/commit/b791f5f9482f1162302826092d946fa364f37e9d))
-- **BCRI-3651673:** entrypoint module ([9a246af](https://github.com/Pxs-Corporate/react-native-lavender/commit/9a246af671f674f0ff768a9b6a72a77d1f12d065))
-- **BCRI-3660857:** cell components ([af9e45c](https://github.com/Pxs-Corporate/react-native-lavender/commit/af9e45cefc20d08d2338380ff4cd8cd6851abe24))
-- **BCRI-3707400:** entrypoint prefix slot ([5f5c4a9](https://github.com/Pxs-Corporate/react-native-lavender/commit/5f5c4a9a973a5168d359f6d4a9413a3b7bf50d48))
-- **BCRI-3810979:** tile components ([46fc5c7](https://github.com/Pxs-Corporate/react-native-lavender/commit/46fc5c7a0ddff6c2db43fba0de9929626092f265))
-- **BCRI-4002610:** update icon handling and remove deprecated font references ([4399fe4](https://github.com/Pxs-Corporate/react-native-lavender/commit/4399fe4bff06aa70f5c29705fcc89d5243b0e3e7))
-- **BCRI-4210372:** automatic versionning ([9c1f0a0](https://github.com/Pxs-Corporate/react-native-lavender/commit/9c1f0a00e19a9d1a277044ea627632032a674102))
-- **BCRI-4210372:** fix bad version numbers ([bc6a8ba](https://github.com/Pxs-Corporate/react-native-lavender/commit/bc6a8ba48c15347442f2ac38dacae7ffba3d95eb))
-
-# (2025-08-13)
-
-### Bug Fixes
-
-- **BCRI-3807748:** fix checkbox android native crash ([f358872](https://github.com/Pxs-Corporate/react-native-lavender/commit/f3588725a8a7440722b6fc13a5586da2da758ea0))
-
-### Features
-
-- **BCRI-000000:** remove default E2E on DEV env build for all components ([a5d27bf](https://github.com/Pxs-Corporate/react-native-lavender/commit/a5d27bfaaebf5b75f3160f31c64b590b7bd00b93))
-- **BCRI-3651613:** checkbox module ([b791f5f](https://github.com/Pxs-Corporate/react-native-lavender/commit/b791f5f9482f1162302826092d946fa364f37e9d))
-- **BCRI-3651673:** entrypoint module ([9a246af](https://github.com/Pxs-Corporate/react-native-lavender/commit/9a246af671f674f0ff768a9b6a72a77d1f12d065))
-- **BCRI-3660857:** cell components ([af9e45c](https://github.com/Pxs-Corporate/react-native-lavender/commit/af9e45cefc20d08d2338380ff4cd8cd6851abe24))
-- **BCRI-3707400:** entrypoint prefix slot ([5f5c4a9](https://github.com/Pxs-Corporate/react-native-lavender/commit/5f5c4a9a973a5168d359f6d4a9413a3b7bf50d48))
-- **BCRI-3810979:** tile components ([46fc5c7](https://github.com/Pxs-Corporate/react-native-lavender/commit/46fc5c7a0ddff6c2db43fba0de9929626092f265))
-- **BCRI-4002610:** update icon handling and remove deprecated font references ([4399fe4](https://github.com/Pxs-Corporate/react-native-lavender/commit/4399fe4bff06aa70f5c29705fcc89d5243b0e3e7))
-- **BCRI-4210372:** automatic versionning ([9c1f0a0](https://github.com/Pxs-Corporate/react-native-lavender/commit/9c1f0a00e19a9d1a277044ea627632032a674102))

package/src/PxCheckBox.tsx

@@ -1,225 +0,0 @@
-import CheckBox from '@react-native-community/checkbox';
-import React, { useCallback, useEffect, useState } from 'react';
-import {
-  AccessibilityProps,
-  Platform,
-  StyleProp,
-  StyleSheet,
-  TextStyle,
-  TouchableOpacity,
-  ViewStyle,
-} from 'react-native';
-
-import { a11y, e2eID } from '@proximus/lavender-common-native';
-import { Colors, ThemeName, useTheme } from '@proximus/lavender-styling-native';
-import { Body } from '@proximus/lavender-texts-native';
-import 'nullthrows';
-
-export interface ICheckBoxProps {
-  /**
-   * Common Props
-   */
-  checked: boolean;
-  onChange?: (value: boolean) => void;
-  disabled?: boolean;
-  testID?: string;
-  color?: string;
-  label?: string;
-  hasError?: boolean;
-  wrapperStyle?: StyleProp<ViewStyle>;
-  checkboxStyle?: StyleProp<ViewStyle>;
-  labelStyle?: StyleProp<TextStyle>;
-  labelColor?: string;
-  /**
-   * Check @react-native-community/checkbox for more info
-   */
-  /**
-   * Android only
-   */
-  focusable?: boolean;
-  tintColors?: {
-    true?: string;
-    false?: string;
-  };
-  /**
-   * IOS only
-   */
-  checkedColor?: string;
-  boxType?: 'circle' | 'square';
-  tintColor?: string;
-  onTintColor?: string;
-  checkedBackgroundColor?: string;
-}
-
-const isAndroid = Platform.OS === 'android';
-
-export function PxCheckBox({
-  checked,
-  onChange,
-  testID,
-  label,
-  disabled = false,
-  checkedColor,
-  tintColor,
-  checkedBackgroundColor,
-  onTintColor,
-  focusable = false,
-  labelColor,
-  boxType = 'square',
-  wrapperStyle,
-  checkboxStyle,
-  labelStyle,
-  ...accessibilityProps
-}: ICheckBoxProps & AccessibilityProps) {
-  const { theme } = useTheme();
-
-  const isScarlet = theme.name === ThemeName.SCARLET;
-
-  const onChangeCallback = useCallback(
-    (value: boolean) => {
-      setInternalChecked(value);
-      if (onChange) {
-        onChange(value);
-      }
-    },
-    [onChange]
-  );
-
-  const [internalChecked, setInternalChecked] = useState(checked);
-
-  useEffect(() => {
-    setInternalChecked(checked);
-  }, [checked]);
-
-  const getColors = () =>
-    isScarlet
-      ? {
-          disabledBackgroundColor: Colors.v7.shadesOfGrey.whiteOpacity8,
-          checkedBackgroundColor: Colors.v8_1.white,
-          backgroundColor: Colors.v7.shadesOfGrey.blackOpacity2,
-          errorColor: Colors.v7.status.epicError,
-          disabledLabelColor: Colors.v7.shadesOfGrey.whiteOpacity16,
-          disabledColor: Colors.v7.shadesOfGrey.whiteOpacity8,
-          defaultLabel: '#FFF',
-          tintColor: Colors.brand.purple,
-          focusColor: Colors.white,
-          disabledCheckColor: Colors.v8_1.shadesOfGrey.dark160,
-          disabledBorderColor: Colors.v8_1.strokeBlack,
-        }
-      : {
-          disabledBackgroundColor: Colors.v8_1.shadesOfGrey.dark160,
-          checkedBackgroundColor: Colors.v8_1.shadesOfPurple.purple,
-          tintColor: Colors.v8_1.shadesOfPurple.purple,
-          backgroundColor: Colors.v8_1.shadesOfGrey.dark4,
-          disabledBorderColor: Colors.v8_1.shadesOfGrey.dark160,
-          borderColor: Colors.v8_1.strokeBlack,
-          errorColor: Colors.v7.status.error,
-          disabledLabelColor: Colors.v7.shadesOfGrey.black0Opacity12,
-          disabledColor: Colors.v8_1.shadesOfGrey.dark160,
-          defaultLabel: '#0A0A0A',
-          checkColor: Colors.v8_1.white,
-          disabledCheckColor: Colors.v8_1.shadesOfGrey.dark160,
-          focusColor: Colors.v8_1.shadesOfPurple.purple,
-        };
-
-  return (
-    <TouchableOpacity
-      style={[
-        {
-          flexDirection: 'row',
-          alignItems: 'center',
-        },
-        wrapperStyle,
-      ]}
-      onPress={() => {
-        onChangeCallback(!internalChecked);
-      }}
-      {...a11y({
-        accessible: false,
-      })}
-      {...e2eID(testID + '-checkbox')}
-    >
-      <CheckBox
-        lineWidth={disabled || !internalChecked ? 2 : 3}
-        style={[
-          styles.checkbox,
-          {
-            backgroundColor: isAndroid
-              ? 'transparent'
-              : disabled
-                ? getColors().disabledBackgroundColor
-                : getColors().backgroundColor,
-          }, // Unchecked background color
-          checkboxStyle as any,
-        ]}
-        tintColors={{
-          true: getColors().tintColor,
-          false: getColors().tintColor,
-        }}
-        tintColor={
-          tintColor || disabled
-            ? internalChecked
-              ? getColors().backgroundColor
-              : getColors().disabledBackgroundColor
-            : getColors().borderColor
-        } // checkbox border color when unchecked
-        onTintColor={onTintColor || getColors().tintColor} // checkbox border color when checked
-        onFillColor={
-          checkedBackgroundColor || getColors().checkedBackgroundColor
-        }
-        onCheckColor={
-          checkedColor || disabled
-            ? getColors().disabledCheckColor
-            : getColors().checkColor
-        }
-        animationDuration={0.5}
-        value={internalChecked}
-        disabled={disabled}
-        boxType={boxType}
-        onValueChange={onChangeCallback}
-        hideBox={isAndroid || (disabled && internalChecked)}
-        focusable={focusable}
-        {...a11y({
-          accessible: accessibilityProps.accessible,
-          accessibilityLabel: accessibilityProps.accessibilityLabel || label,
-          accessibilityHint: accessibilityProps.accessibilityHint,
-          importantForAccessibility:
-            accessibilityProps.importantForAccessibility,
-        })}
-        {...e2eID(testID + '-checkbox')}
-      />
-      {label && label.trim() !== '' && (
-        <Body
-          accessible={false}
-          importantForAccessibility={'no'}
-          style={[
-            styles.label,
-            {
-              color: labelColor
-                ? labelColor
-                : disabled
-                  ? getColors().disabledLabelColor
-                  : getColors().defaultLabel,
-            },
-            labelStyle,
-          ]}
-        >
-          {label}
-        </Body>
-      )}
-    </TouchableOpacity>
-  );
-}
-
-const styles = StyleSheet.create({
-  checkbox: {
-    height: 24,
-    width: 24,
-    borderRadius: 5,
-  },
-  label: {
-    marginHorizontal: 12,
-    fontStyle: 'normal',
-    fontWeight: '400',
-  },
-});

package/tsconfig.json

@@ -1,8 +0,0 @@
-{
-  "extends": "../../../tsconfig.npm.json",
-  "compilerOptions": {
-    "outDir": "dist",
-  },
-  "include": ["src","../../../lib.d.ts"],
-  "exclude": ["dist", "node_modules", "src/**/*.test.ts", "src/**/*.spec.ts"]
-}