@proximus/lavender-tiles-native 0.1.0-alpha.0

package/CHANGELOG.md

@@ -0,0 +1,27 @@
+# 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.0 (2025-08-13)
+
+### Bug Fixes
+
+- **BCRI-4013861:** tile text colors ([67c5bfc](https://github.com/Pxs-Corporate/react-native-lavender/commit/67c5bfc95c4359bd31b4aef9ea09b6b663beeaef))
+
+### Features
+
+- **BCRI-3810979:** tile components ([46fc5c7](https://github.com/Pxs-Corporate/react-native-lavender/commit/46fc5c7a0ddff6c2db43fba0de9929626092f265))
+- **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-4013861:** tile text colors ([67c5bfc](https://github.com/Pxs-Corporate/react-native-lavender/commit/67c5bfc95c4359bd31b4aef9ea09b6b663beeaef))
+
+### Features
+
+- **BCRI-3810979:** tile components ([46fc5c7](https://github.com/Pxs-Corporate/react-native-lavender/commit/46fc5c7a0ddff6c2db43fba0de9929626092f265))
+- **BCRI-4210372:** automatic versionning ([9c1f0a0](https://github.com/Pxs-Corporate/react-native-lavender/commit/9c1f0a00e19a9d1a277044ea627632032a674102))

package/dist/PxTile.d.ts

@@ -0,0 +1,17 @@
+import { AccessibilityProps, StyleProp, ViewStyle } from 'react-native';
+import React, { ReactElement, ReactNode } from 'react';
+export interface IPxTile extends AccessibilityProps {
+    label: string;
+    description?: string;
+    containerStyle?: StyleProp<ViewStyle>;
+    prefix?: ReactNode;
+    suffix?: ReactElement;
+    centerContent?: boolean;
+    centerPrefix?: boolean;
+    backgroundColor?: 'neutral' | 'neutral-bare';
+    testID?: string;
+    disabled?: boolean;
+    labelsAccessibilityProps?: AccessibilityProps;
+}
+export declare function PxTile({ label, description, containerStyle, prefix, suffix, testID, backgroundColor, accessible, accessibilityRole, accessibilityLabel, accessibilityHint, disabled, centerContent, centerPrefix, labelsAccessibilityProps, }: IPxTile): React.JSX.Element;
+//# sourceMappingURL=PxTile.d.ts.map

package/dist/PxTile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PxTile.d.ts","sourceRoot":"","sources":["../src/PxTile.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAElB,SAAS,EAGT,SAAS,EACV,MAAM,cAAc,CAAC;AAItB,OAAO,KAAK,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,WAAW,OAAQ,SAAQ,kBAAkB;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,SAAS,GAAG,cAAc,CAAC;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wBAAwB,CAAC,EAAE,kBAAkB,CAAC;CAC/C;AAED,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,WAAW,EACX,cAAc,EACd,MAAM,EACN,MAAM,EACN,MAAM,EACN,eAA2B,EAC3B,UAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,wBAAwB,GACzB,EAAE,OAAO,qBA6FT"}

package/dist/PxTileButton.d.ts

@@ -0,0 +1,6 @@
+import { IPxTile } from './PxTile';
+import React from 'react';
+export declare function PxTileButton(props: IPxTile & {
+    onPress: () => void;
+}): React.JSX.Element;
+//# sourceMappingURL=PxTileButton.d.ts.map

package/dist/PxTileButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PxTileButton.d.ts","sourceRoot":"","sources":["../src/PxTileButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAU,MAAM,UAAU,CAAC;AAC3C,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,wBAAgB,YAAY,CAAC,KAAK,EAAE,OAAO,GAAG;IAAE,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,qBAepE"}

package/dist/PxTileCheckbox.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { IPxTile } from './PxTile';
+export declare function PxTileCheckbox(props: IPxTile & {
+    checked: boolean;
+    onChange?: (checked: boolean) => void;
+}): React.JSX.Element;
+//# sourceMappingURL=PxTileCheckbox.d.ts.map

package/dist/PxTileCheckbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PxTileCheckbox.d.ts","sourceRoot":"","sources":["../src/PxTileCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,OAAO,EAAU,MAAM,UAAU,CAAC;AAM3C,wBAAgB,cAAc,CAC5B,KAAK,EAAE,OAAO,GAAG;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC,qBAmEF"}

package/dist/PxTileRadio.d.ts

@@ -0,0 +1,7 @@
+import { IPxTile } from './PxTile';
+import React from 'react';
+export declare function PxTileRadio(props: IPxTile & {
+    checked?: boolean;
+    onPress: () => void;
+}): React.JSX.Element;
+//# sourceMappingURL=PxTileRadio.d.ts.map

package/dist/PxTileRadio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PxTileRadio.d.ts","sourceRoot":"","sources":["../src/PxTileRadio.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAU,MAAM,UAAU,CAAC;AAC3C,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,wBAAgB,WAAW,CACzB,KAAK,EAAE,OAAO,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,qBAsC5D"}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export * from './PxTile';
+export * from './PxTileCheckbox';
+export * from './PxTileRadio';
+export * from './PxTileButton';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC"}

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@proximus/lavender-tiles-native",
+  "version": "0.1.0-alpha.0",
+  "description": "Lavender cell list component",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "scripts": {
+    "clean": "rm -rf dist",
+    "prepublish": "yarn clean && yarn build",
+    "build": "npx tsc -p tsconfig.json"
+  },
+  "peerDependencies": {
+    "@proximus/lavender-checkbox-native": "workspace:*",
+    "@proximus/lavender-common-native": "workspace:*",
+    "@proximus/lavender-icon-native": "workspace:*",
+    "@proximus/lavender-radio-native": "workspace:*",
+    "@proximus/lavender-separator-native": "workspace:*",
+    "@proximus/lavender-styling-native": "workspace:*",
+    "@proximus/lavender-texts-native": "workspace:*"
+  },
+  "devDependencies": {
+    "@proximus/lavender-checkbox-native": "0.1.0-alpha.0",
+    "@proximus/lavender-common-native": "0.1.0-alpha.0",
+    "@proximus/lavender-icon-native": "0.1.0-alpha.0",
+    "@proximus/lavender-radio-native": "0.1.0-alpha.0",
+    "@proximus/lavender-separator-native": "0.1.0-alpha.0",
+    "@proximus/lavender-styling-native": "0.1.0-alpha.0",
+    "@proximus/lavender-texts-native": "0.1.0-alpha.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "lerna": {
+    "command": {
+      "publish": {
+        "assets": [
+          "dist",
+          "src",
+          "package.json"
+        ]
+      }
+    }
+  },
+  "gitHead": "27525289a448a6e4f3c2d36a88b9dc54d0f15fbf"
+}

package/src/PxTile.tsx

@@ -0,0 +1,156 @@
+import {
+  AccessibilityProps,
+  Platform,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from 'react-native';
+import { a11y, e2eID } from '@proximus/lavender-common-native';
+import { Body, Header } from '@proximus/lavender-texts-native';
+import { Colors, useTheme } from '@proximus/lavender-styling-native';
+import React, { ReactElement, ReactNode } from 'react';
+
+export interface IPxTile extends AccessibilityProps {
+  label: string;
+  description?: string;
+  containerStyle?: StyleProp<ViewStyle>;
+  prefix?: ReactNode;
+  suffix?: ReactElement;
+  centerContent?: boolean;
+  centerPrefix?: boolean;
+  backgroundColor?: 'neutral' | 'neutral-bare';
+  testID?: string;
+  disabled?: boolean;
+  labelsAccessibilityProps?: AccessibilityProps;
+}
+
+export function PxTile({
+  label,
+  description,
+  containerStyle,
+  prefix,
+  suffix,
+  testID,
+  backgroundColor = 'neutral',
+  accessible = true,
+  accessibilityRole,
+  accessibilityLabel,
+  accessibilityHint,
+  disabled,
+  centerContent,
+  centerPrefix,
+  labelsAccessibilityProps,
+}: IPxTile) {
+  const { theme } = useTheme();
+
+  return (
+    <View
+      style={[
+        styles.container,
+        containerStyle,
+        {
+          backgroundColor:
+            backgroundColor === 'neutral'
+              ? theme.t('BackgroundColorActionNeutralDefault')
+              : theme.t('BackgroundColorActionNeutralBareDefault'),
+          gap: prefix && theme.t('SpacingInsideSectionLMobile').number,
+          borderRadius: theme.t('RadiusMain').number,
+          padding: theme.t('PaddingSMobile').number,
+        },
+        disabled && {
+          backgroundColor: Colors.v8_1.shadesOfGrey.dark4,
+        },
+      ]}
+      {...a11y({
+        accessibilityRole,
+        accessible,
+        importantForAccessibility: accessible ? 'yes' : 'no-hide-descendants',
+        accessibilityLabel: Platform.select({
+          android:
+            (accessibilityLabel &&
+              accessibilityLabel + (accessibilityHint || '')) ||
+            label + (description || ''),
+          default: accessibilityLabel || label,
+        }),
+        accessibilityHint: accessibilityHint || description,
+      })}
+    >
+      <View
+        style={[
+          styles.prefixSuffixContainer,
+          {
+            ...(centerPrefix && {
+              justifyContent: 'center',
+              alignItems: 'center',
+            }),
+          },
+        ]}
+      >
+        {prefix}
+        {suffix}
+      </View>
+      <View>
+        <Header
+          {...a11y({
+            ...labelsAccessibilityProps,
+            accessible,
+            importantForAccessibility: accessible ? 'yes' : 'no',
+          })}
+          style={[
+            styles.labelText,
+            centerContent && {
+              textAlign: 'center',
+            },
+            {
+              fontSize: theme.t('TextSizeLabelLMobile').number,
+              color: theme.t('TextColorActionNeutralDefault'),
+            },
+          ]}
+          disabled={disabled}
+        >
+          {label}
+        </Header>
+        {description && (
+          <Body
+            {...a11y({
+              ...labelsAccessibilityProps,
+              accessible,
+              importantForAccessibility: accessible ? 'yes' : 'no',
+            })}
+            style={{
+              ...(centerContent && {
+                textAlign: 'center',
+              }),
+              color: theme.t('TextColorActionNeutralDefault'),
+              fontSize: theme.t('TextSizeLabelLMobile').number,
+            }}
+            {...e2eID(`${testID}_subTitle`)}
+            disabled={disabled}
+          >
+            {description}
+          </Body>
+        )}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'column',
+    gap: 16,
+    width: 215,
+  },
+  prefixSuffixContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  suffixLabelDescription: {
+    alignSelf: 'flex-end',
+  },
+  labelText: {
+    fontSize: 14,
+    color: Colors.v8_1.black,
+  },
+});

package/src/PxTileButton.tsx

@@ -0,0 +1,21 @@
+import { IPxTile, PxTile } from './PxTile';
+import React from 'react';
+import { a11y, e2eID } from '@proximus/lavender-common-native';
+import { TouchableOpacity } from 'react-native';
+
+export function PxTileButton(props: IPxTile & { onPress: () => void }) {
+  return (
+    <TouchableOpacity
+      {...a11y({
+        accessible: true,
+        accessibilityRole: 'button',
+        accessibilityLabel: props.accessibilityLabel || props.label,
+        accessibilityHint: props.accessibilityHint || props.description,
+      })}
+      disabled={props.disabled}
+      {...e2eID(props.testID)}
+    >
+      <PxTile {...props} accessible={false} />
+    </TouchableOpacity>
+  );
+}

package/src/PxTileCheckbox.tsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from 'react';
+import { IPxTile, PxTile } from './PxTile';
+import { PxCheckBox } from '@proximus/lavender-checkbox-native';
+import { Platform, TouchableOpacity } from 'react-native';
+import { a11y, e2eID } from '@proximus/lavender-common-native';
+import { useTheme } from '@proximus/lavender-styling-native';
+
+export function PxTileCheckbox(
+  props: IPxTile & {
+    checked: boolean;
+    onChange?: (checked: boolean) => void;
+  }
+) {
+  const { theme } = useTheme();
+  const [internalChecked, setInternalChecked] = useState(props.checked);
+
+  useEffect(() => {
+    setInternalChecked(props.checked);
+  }, [props.checked]);
+
+  return (
+    <TouchableOpacity
+      {...a11y({
+        accessible: true,
+        accessibilityRole: 'checkbox',
+        accessibilityState: {
+          checked: internalChecked,
+          disabled: props.disabled,
+        },
+        accessibilityLabel: props.accessibilityLabel || props.label,
+        accessibilityHint: props.accessibilityHint || props.description,
+      })}
+      disabled={props.disabled}
+      onPress={() => {
+        props.onChange?.(!internalChecked);
+        setInternalChecked(!internalChecked);
+      }}
+      {...e2eID(props.testID)}
+    >
+      <PxTile
+        {...props}
+        containerStyle={{
+          borderWidth: theme.t('BorderSizeM').number,
+          borderColor: internalChecked
+            ? theme.t('BorderColorActionActiveDefault')
+            : theme.t('BorderColorActionNeutralDefault'),
+        }}
+        accessible={false}
+        suffix={
+          <PxCheckBox
+            disabled={props.disabled}
+            accessibilityLabel={props.label}
+            accessibilityHint={props.description}
+            boxType={'square'}
+            wrapperStyle={{
+              height: 32,
+              justifyContent: 'center',
+            }}
+            checkboxStyle={{
+              // Not applied on Android because of a weird visual bug
+              ...(Platform.OS === 'ios' && {
+                width: 16,
+                height: 16,
+              }),
+              backgroundColor: 'transparent',
+            }}
+            checked={internalChecked}
+            onChange={(value) => {
+              props.onChange?.(value);
+              setInternalChecked(value);
+            }}
+            accessible={false}
+            importantForAccessibility={'no-hide-descendants'}
+          />
+        }
+      />
+    </TouchableOpacity>
+  );
+}

package/src/PxTileRadio.tsx

@@ -0,0 +1,47 @@
+import { PxRadioButton } from '@proximus/lavender-radio-native';
+import { IPxTile, PxTile } from './PxTile';
+import React from 'react';
+import { a11y, e2eID } from '@proximus/lavender-common-native';
+import { TouchableOpacity } from 'react-native';
+import { useTheme } from '@proximus/lavender-styling-native';
+
+export function PxTileRadio(
+  props: IPxTile & { checked?: boolean; onPress: () => void }
+) {
+  const { theme } = useTheme();
+  return (
+    <TouchableOpacity
+      {...a11y({
+        accessible: true,
+        accessibilityRole: 'radio',
+        accessibilityState: {
+          checked: props.checked,
+          disabled: props.disabled,
+        },
+        accessibilityLabel: props.accessibilityLabel || props.label,
+        accessibilityHint: props.accessibilityHint || props.description,
+      })}
+      disabled={props.disabled}
+      {...e2eID(props.testID)}
+    >
+      <PxTile
+        {...props}
+        containerStyle={{
+          borderWidth: theme.t('BorderSizeM').number,
+          borderColor: props.checked
+            ? theme.t('BorderColorActionActiveDefault')
+            : theme.t('BorderColorActionNeutralDefault'),
+        }}
+        accessible={false}
+        suffix={
+          <PxRadioButton
+            disabled={props.disabled}
+            size={20}
+            checked={!!props.checked}
+            onPress={props.onPress}
+          />
+        }
+      />
+    </TouchableOpacity>
+  );
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './PxTile';
+export * from './PxTileCheckbox';
+export * from './PxTileRadio';
+export * from './PxTileButton';

package/tsconfig.json

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