@proximus/lavender-button-native 0.1.0-alpha.1 → 0.1.0-alpha.13

package/dist/PxButton.d.ts

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react';
 import React from 'react';
 import type { AccessibilityProps, StyleProp, TextStyle, ViewStyle } from 'react-native';
 import type { ITheme } from '@proximus/lavender-styling-native';
-export type Variant = 'primary' | 'secondary' | 'tertiary' | 'order';
+export type Variant = 'primary' | 'secondary' | 'tertiary';
 export interface IProps extends AccessibilityProps {
     title: string;
     titleStyle?: StyleProp<TextStyle>;
@@ -15,6 +15,7 @@ export interface IProps extends AccessibilityProps {
     testID?: string;
     prefix?: ReactNode;
     suffix?: ReactNode;
+    inverted?: boolean;
 }
-export declare function PxButton(props: IProps): React.JSX.Element;
+export declare function PxButton({ title, wrapperStyle, titleStyle, isRoundedBottomCorner, testID, disabled, prefix, suffix, onPress, type, accessibilityLabel, accessibilityHint, inverted, }: IProps): React.JSX.Element;
 //# sourceMappingURL=PxButton.d.ts.map

package/dist/PxButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PxButton.d.ts","sourceRoot":"","sources":["../src/PxButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EACV,kBAAkB,EAClB,SAAS,EACT,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AAGtB,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAC;AAIhE,MAAM,MAAM,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO,CAAC;AAErE,MAAM,WAAW,MAAO,SAAQ,kBAAkB;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AA4FD,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,qBAuHrC"}
+{"version":3,"file":"PxButton.d.ts","sourceRoot":"","sources":["../src/PxButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EACV,kBAAkB,EAClB,SAAS,EACT,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AAGtB,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAC;AAIhE,MAAM,MAAM,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;AAE3D,MAAM,WAAW,MAAO,SAAQ,kBAAkB;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAkFD,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,YAAY,EACZ,UAAU,EACV,qBAA4B,EAC5B,MAAM,EACN,QAAgB,EAChB,MAAM,EACN,MAAM,EACN,OAAO,EACP,IAAgB,EAChB,kBAAkB,EAClB,iBAAiB,EACjB,QAAQ,GACT,EAAE,MAAM,qBA2GR"}

package/dist/PxButton.js

@@ -0,0 +1,142 @@
+import React from 'react';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { a11y, e2eID } from '@proximus/lavender-common-native';
+import { useTheme } from '@proximus/lavender-styling-native';
+import { Header } from '@proximus/lavender-texts-native';
+function getButtonColors(props, theme) {
+    const { type, inverted = false } = props;
+    const invertedSuffix = inverted ? 'Inverted' : 'Default';
+    switch (type) {
+        case 'secondary': {
+            return {
+                backgroundColor: theme.t(`ColorBackgroundContainerSecondary${invertedSuffix}`),
+                textColor: theme.t(`ColorTextBrand${invertedSuffix}`),
+                disabledBackgroundColor: theme.t(`ColorBackgroundStateDisabled${invertedSuffix}`),
+                disabledText: theme.t(`ColorTextStateDisabled${invertedSuffix}`),
+            };
+        }
+        case 'tertiary': {
+            return {
+                backgroundColor: 'transparent',
+                disabledBackgroundColor: 'transparent',
+                textColor: theme.t(`ColorTextBrand${invertedSuffix}`),
+                disabledText: theme.t(`ColorTextStateDisabled${invertedSuffix}`),
+            };
+        }
+        default: {
+            return {
+                backgroundColor: theme.t(`ColorBackgroundContainerPrimary${invertedSuffix}`),
+                textColor: inverted
+                    ? theme.t('ColorTextBrandDefault')
+                    : theme.t('ColorTextBrandInverted'),
+                disabledBackgroundColor: theme.t(`ColorBackgroundStateDisabled${invertedSuffix}`),
+                disabledText: theme.t(`ColorTextStateDisabled${invertedSuffix}`),
+                borderColor: theme.t('ColorBorderNoneDefault'),
+            };
+        }
+    }
+}
+function getIconColor(props, theme) {
+    const { type, disabled, inverted } = props;
+    const invertedSuffix = inverted ? 'Inverted' : 'Default';
+    switch (type) {
+        case 'primary':
+            return disabled
+                ? theme.t(`ColorIconStateDisabled${invertedSuffix}`)
+                : inverted
+                    ? theme.t('ColorIconBrandDefault')
+                    : theme.t('ColorIconBrandInverted');
+        default:
+            return disabled
+                ? theme.t(`ColorIconStateDisabled${invertedSuffix}`)
+                : theme.t(`ColorIconBrand${invertedSuffix}`);
+    }
+}
+function getIconBackgroundColor(props, theme) {
+    const { type, disabled, inverted } = props;
+    const invertedSuffix = inverted ? 'Inverted' : 'Default';
+    switch (type) {
+        case 'tertiary':
+            return disabled
+                ? theme.t(`ColorBackgroundStateDisabled${invertedSuffix}`)
+                : theme.t(`ColorBackgroundContainerSecondary${invertedSuffix}`);
+        default:
+            return undefined;
+    }
+}
+export function PxButton({ title, wrapperStyle, titleStyle, isRoundedBottomCorner = true, testID, disabled = false, prefix, suffix, onPress, type = 'primary', accessibilityLabel, accessibilityHint, inverted, }) {
+    const { theme } = useTheme();
+    const buttonColors = getButtonColors({ type, inverted }, theme);
+    const iconStyles = {
+        size: theme.t('SizeIconXs').number,
+        color: getIconColor({ type, disabled, inverted }, theme),
+        padding: theme.t('Padding2xsMobile').number,
+    };
+    const iconBackgroundStyles = {
+        backgroundColor: getIconBackgroundColor({ type, disabled, inverted }, theme),
+        borderRadius: theme.t('RadiusPill').number,
+        marginHorizontal: theme.t('SpacingXsMobile').number,
+    };
+    let adaptedPrefix = prefix && React.cloneElement(prefix, iconStyles);
+    adaptedPrefix =
+        prefix && type === 'tertiary' ? (React.createElement(View, { style: iconBackgroundStyles }, adaptedPrefix)) : (adaptedPrefix);
+    let adaptedSuffix = suffix && React.cloneElement(suffix, iconStyles);
+    adaptedSuffix =
+        suffix && type === 'tertiary' ? (React.createElement(View, { style: iconBackgroundStyles }, adaptedSuffix)) : (adaptedSuffix);
+    return (React.createElement(TouchableOpacity, { ...e2eID(testID), onPress: onPress, focusable: true, disabled: disabled, ...a11y({
+            accessibilityRole: 'button',
+            accessible: true,
+            accessibilityState: {
+                disabled,
+            },
+            accessibilityLabel: accessibilityLabel || title,
+            accessibilityHint,
+        }), style: wrapperStyle },
+        React.createElement(View, { style: [
+                styles.button,
+                {
+                    backgroundColor: buttonColors.backgroundColor,
+                    borderColor: buttonColors.borderColor,
+                    borderRadius: theme.t('RadiusButtonSmall').number,
+                    ...(isRoundedBottomCorner && {
+                        borderBottomEndRadius: theme.t('RadiusButtonBig').number,
+                    }),
+                    paddingHorizontal: type === 'tertiary' ? 0 : theme.t('PaddingMMobile').number,
+                    paddingVertical: type === 'tertiary'
+                        ? theme.t('Padding2xsMobile').number
+                        : theme.t('PaddingXsMobile').number,
+                    gap: theme.t('Spacing2xsMobile').number,
+                    ...(type !== 'tertiary' && {
+                        minHeight: theme.t('SpacingLMobile').number,
+                    }),
+                },
+                disabled && {
+                    backgroundColor: buttonColors.disabledBackgroundColor,
+                },
+                type === 'tertiary' && {
+                    paddingVertical: 4,
+                    paddingHorizontal: 0,
+                },
+            ] },
+            adaptedPrefix,
+            React.createElement(Header, { style: [
+                    {
+                        color: buttonColors.textColor,
+                    },
+                    disabled && {
+                        color: buttonColors.disabledText,
+                    },
+                    {
+                        lineHeight: 21,
+                    },
+                    titleStyle,
+                ] }, title),
+            adaptedSuffix)));
+}
+const styles = StyleSheet.create({
+    button: {
+        alignItems: 'center',
+        flexDirection: 'row',
+        justifyContent: 'center',
+    },
+});

package/package.json

@@ -1,40 +1,19 @@
 {
   "name": "@proximus/lavender-button-native",
-  "version": "0.1.0-alpha.1",
+  "version": "0.1.0-alpha.13",
   "description": "Button component",
   "license": "MIT",
-  "main": "src/index.ts",
-  "types": "dist/index.d.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-icon-native": "workspace:*",
-    "@proximus/lavender-styling-native": "workspace:*",
-    "@proximus/lavender-texts-native": "workspace:*"
-  },
-  "devDependencies": {
-    "@proximus/lavender-common-native": "0.1.0-alpha.0",
-    "@proximus/lavender-icon-native": "0.1.0-alpha.0",
-    "@proximus/lavender-styling-native": "0.1.0-alpha.0",
-    "@proximus/lavender-texts-native": "0.1.0-alpha.0"
+    "@proximus/lavender-common-native": "*",
+    "@proximus/lavender-icon-native": "*",
+    "@proximus/lavender-styling-native": "*",
+    "@proximus/lavender-texts-native": "*"
   },
   "publishConfig": {
     "access": "public"
-  },
-  "lerna": {
-    "command": {
-      "publish": {
-        "assets": [
-          "dist",
-          "src",
-          "package.json"
-        ]
-      }
-    }
-  },
-  "gitHead": "59b3436b786cc1c73b4a20a98b2a85139e75b72e"
+  }
 }

package/CHANGELOG.md

@@ -1,25 +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-button-native@0.1.0-alpha.0...@proximus/lavender-button-native@0.1.0-alpha.1) (2025-08-13)
-
-### Features
-
-- **BCRI-4210372:** automatic versionning ([9c1f0a0](https://github.com/Pxs-Corporate/react-native-lavender/commit/9c1f0a00e19a9d1a277044ea627632032a674102))
-
-# 0.1.0-alpha.0 (2025-08-12)
-
-### Features
-
-- **BCRI-000000:** lerna setup ([1d24b00](https://github.com/Pxs-Corporate/react-native-lavender/commit/1d24b00a9ca917d873e9c497bfebf6a0cc570d13))
-- **BCRI-000000:** lerna setup ([f7fa837](https://github.com/Pxs-Corporate/react-native-lavender/commit/f7fa837fb15e0fd1ee838f99f421ff23a52c0403))
-- **BCRI-000000:** remove default E2E on DEV env build for all components ([a5d27bf](https://github.com/Pxs-Corporate/react-native-lavender/commit/a5d27bfaaebf5b75f3160f31c64b590b7bd00b93))
-- **BCRI-3619796:** top navigation bar ([0b2bcae](https://github.com/Pxs-Corporate/react-native-lavender/commit/0b2bcaee7243b9f00f88e2b2fb97d86cf0cf5b77))
-- **BCRI-3651606:** mono repo creation ([d19f852](https://github.com/Pxs-Corporate/react-native-lavender/commit/d19f852a710963ff85b1a9d31d18188217aa23ab))
-- **BCRI-3689585:** icon module ([f13230d](https://github.com/Pxs-Corporate/react-native-lavender/commit/f13230d9c7643680089a0db2c69b96cd73ff246e))
-- **BCRI-3702949:** tertiary button ([4999cea](https://github.com/Pxs-Corporate/react-native-lavender/commit/4999cea4d7866084d0f8c1cba37070c6cdaa7601))
-- **BCRI-3702949:** tertiary button ([db24455](https://github.com/Pxs-Corporate/react-native-lavender/commit/db24455bd9687d80920be3e42c9e1fc14703a571))
-- **BCRI-3749589:** button icon component ([62cfd94](https://github.com/Pxs-Corporate/react-native-lavender/commit/62cfd945420c26cf6da6dfb802cc998c613e9687))
-- **BCRI-3810979:** tile components ([46fc5c7](https://github.com/Pxs-Corporate/react-native-lavender/commit/46fc5c7a0ddff6c2db43fba0de9929626092f265))

package/src/PxButton.tsx

@@ -1,258 +0,0 @@
-import type { ReactElement, ReactNode } from 'react';
-import React from 'react';
-import type {
-  AccessibilityProps,
-  StyleProp,
-  TextStyle,
-  ViewStyle,
-} from 'react-native';
-import { StyleSheet, TouchableOpacity, View } from 'react-native';
-import { a11y, e2eID } from '@proximus/lavender-common-native';
-import type { ITheme } from '@proximus/lavender-styling-native';
-import { Colors, ThemeName, useTheme } from '@proximus/lavender-styling-native';
-import { Header } from '@proximus/lavender-texts-native';
-
-export type Variant = 'primary' | 'secondary' | 'tertiary' | 'order';
-
-export interface IProps extends AccessibilityProps {
-  title: string;
-  titleStyle?: StyleProp<TextStyle>;
-  wrapperStyle?: StyleProp<ViewStyle>;
-  onPress?: () => void;
-  type?: Variant;
-  isRoundedBottomCorner?: boolean;
-  theme?: ITheme;
-  disabled?: boolean;
-  testID?: string;
-  prefix?: ReactNode;
-  suffix?: ReactNode;
-}
-
-function getButtonColors(props: IProps, theme: ITheme) {
-  switch (props.type) {
-    case 'order': {
-      if (theme.name === ThemeName.SCARLET) {
-        return {
-          color: Colors.status.order,
-          textColor: Colors.black,
-          disabledColor: Colors.v7.shadesOfGrey.whiteOpacity8,
-          disabledText: Colors.v7.shadesOfGrey.whiteOpacity16,
-          disabledBorderColor: Colors.v7.shadesOfGrey.whiteOpacity8,
-        };
-      }
-      return {
-        color: Colors.status.order,
-        textColor: Colors.black,
-        disabledColor: Colors.v8_1.shadesOfGrey.dark4,
-        disabledText: Colors.v7.shadesOfGrey.black0Opacity12,
-      };
-    }
-
-    case 'secondary': {
-      if (theme.name === ThemeName.SCARLET) {
-        return {
-          color: Colors.v7.shadesOfGrey.whiteOpacity24,
-          textColor: Colors.shadesOfGrey.white,
-          borderColor: Colors.v7.shadesOfGrey.whiteOpacity24,
-          disabledColor: Colors.v7.shadesOfGrey.whiteOpacity8,
-          disabledText: Colors.v7.shadesOfGrey.whiteOpacity16,
-          disabledBorderColor: Colors.v7.shadesOfGrey.whiteOpacity8,
-        };
-      }
-      return {
-        color: Colors.v7.shadesOfPurple.purple1,
-        textColor: Colors.v7.shadesOfPurple.purple2,
-        disabledColor: Colors.v7.shadesOfGrey.black0Opacity4,
-        disabledText: Colors.v7.shadesOfGrey.black0Opacity12,
-      };
-    }
-
-    case 'tertiary': {
-      return {
-        color: 'transparent',
-        disabledColor: 'transparent',
-        textColor: Colors.v8_1.shadesOfPurple.purple,
-        disabledText: Colors.v8_1.shadesOfGrey.dark160,
-      };
-    }
-    default: {
-      if (theme.name === ThemeName.SCARLET) {
-        return {
-          color: Colors.v7.shadesOfGrey.whiteOpacity24,
-          textColor: Colors.shadesOfGrey.white,
-          borderColor: Colors.v7.shadesOfGrey.whiteOpacity24,
-          disabledColor: Colors.v7.shadesOfGrey.whiteOpacity8,
-          disabledText: Colors.v7.shadesOfGrey.whiteOpacity16,
-          disabledBorderColor: Colors.v7.shadesOfGrey.whiteOpacity8,
-        };
-      }
-      return {
-        color: theme.t('BackgroundColorActionPrimaryDefault'),
-        textColor: theme.t('TextColorActionBrandInverted'),
-        disabledColor: theme.t('BackgroundColorActionDisabledDefault'),
-        disabledText: Colors.v7.shadesOfGrey.black0Opacity12,
-      };
-    }
-  }
-}
-
-function getIconColor(type: Variant, disabled: boolean) {
-  switch (type) {
-    case 'primary':
-      return disabled ? Colors.v8_1.shadesOfGrey.dark120 : Colors.white;
-    default:
-      return disabled
-        ? Colors.v8_1.shadesOfGrey.dark120
-        : Colors.v8_1.shadesOfPurple.purple;
-  }
-}
-
-function getIconBackgroundColor(type: Variant, disabled: boolean) {
-  switch (type) {
-    case 'tertiary':
-      return disabled
-        ? Colors.v8_1.shadesOfGrey.dark4
-        : Colors.v8_1.shadesOfPurple.purpleLight;
-    default:
-      return undefined;
-  }
-}
-
-export function PxButton(props: IProps) {
-  const {
-    title,
-    wrapperStyle,
-    titleStyle,
-    isRoundedBottomCorner = true,
-    testID,
-    disabled = false,
-    prefix,
-    suffix,
-    type = 'primary',
-    accessibilityLabel,
-    accessibilityHint,
-  } = props;
-
-  const themeContext = useTheme();
-  const theme = props.theme || themeContext.theme;
-  const buttonColors = getButtonColors(props, theme);
-
-  let adaptedPrefix =
-    prefix &&
-    React.cloneElement(prefix as ReactElement, {
-      size: 16,
-      color: getIconColor(type, disabled),
-    });
-
-  adaptedPrefix =
-    prefix && type === 'tertiary' ? (
-      <View
-        style={[
-          styles.iconBackground,
-          { backgroundColor: getIconBackgroundColor(type, disabled) },
-        ]}
-      >
-        {adaptedPrefix}
-      </View>
-    ) : (
-      adaptedPrefix
-    );
-
-  let adaptedSuffix =
-    suffix &&
-    React.cloneElement(suffix as ReactElement, {
-      size: 16,
-      color: getIconColor(type, disabled),
-    });
-
-  adaptedSuffix =
-    suffix && type === 'tertiary' ? (
-      <View
-        style={[
-          styles.iconBackground,
-          { backgroundColor: getIconBackgroundColor(type, disabled) },
-        ]}
-      >
-        {adaptedSuffix}
-      </View>
-    ) : (
-      adaptedSuffix
-    );
-
-  return (
-    <TouchableOpacity
-      {...e2eID(testID)}
-      onPress={props.onPress}
-      focusable={true}
-      disabled={disabled}
-      {...a11y({
-        accessibilityRole: 'button',
-        accessible: true,
-        accessibilityState: {
-          disabled,
-        },
-        accessibilityLabel: accessibilityLabel || title,
-        accessibilityHint,
-      })}
-      style={wrapperStyle}
-    >
-      <View
-        style={[
-          styles.button,
-          {
-            backgroundColor: buttonColors.color,
-            borderColor: buttonColors.borderColor,
-          },
-          disabled && {
-            backgroundColor: buttonColors.disabledColor,
-            borderColor: buttonColors.disabledBorderColor,
-          },
-          isRoundedBottomCorner && {
-            borderBottomRightRadius: 22,
-          },
-          type === 'tertiary' && {
-            paddingVertical: 4,
-            paddingHorizontal: 0,
-          },
-        ]}
-      >
-        {adaptedPrefix}
-        <Header
-          style={[
-            {
-              color: buttonColors.textColor,
-            },
-            disabled && {
-              color: buttonColors.disabledText,
-            },
-            {
-              lineHeight: 21,
-            },
-            titleStyle,
-          ]}
-        >
-          {title}
-        </Header>
-        {adaptedSuffix}
-      </View>
-    </TouchableOpacity>
-  );
-}
-
-const styles = StyleSheet.create({
-  button: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    justifyContent: 'center',
-    borderRadius: 4,
-    paddingHorizontal: 24,
-    paddingVertical: 8,
-    gap: 4,
-  },
-
-  iconBackground: {
-    borderRadius: 16,
-    padding: 4,
-    marginHorizontal: 8,
-  },
-});

package/tsconfig.json

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