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

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 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.2](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-switch-native@0.1.0-alpha.1...@proximus/lavender-switch-native@0.1.0-alpha.2) (2025-09-05)
+
+### Features
+
+- **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))
+
+# [0.1.0-alpha.1](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-switch-native@0.1.0-alpha.0...@proximus/lavender-switch-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

package/dist/PxSwitch.d.ts

@@ -1,19 +1,12 @@
 import React, { Component } from 'react';
 import { AccessibilityProps, Animated, StyleProp, ViewStyle } from 'react-native';
+import { IThemeContext } from '@proximus/lavender-styling-native';
 export interface ISwitchProps extends AccessibilityProps {
     onValueChange: (value: boolean) => void;
     disabled?: boolean;
     lookOnlyProps?: boolean;
     value?: boolean;
-    isPending?: boolean;
-    circleColors?: Array<string>;
-    circleStyle?: StyleProp<ViewStyle>;
-    trackColors?: Array<string>;
-    trackStyle?: StyleProp<ViewStyle>;
-    disabledStyle?: StyleProp<ViewStyle>;
     testID?: string;
-    height?: number;
-    type?: 'order' | 'primary';
     labelAccessibilityProp?: AccessibilityProps;
     containerStyle?: StyleProp<ViewStyle>;
     hasLabel?: boolean;
@@ -22,9 +15,6 @@ interface IState {
     value: boolean;
     transformSwitch: Animated.Value;
     containerBackgroundColor: Animated.Value;
-    yesLabelOpacity: Animated.Value;
-    pendingOpacity: Animated.Value;
-    noLabelOpacity: Animated.Value;
 }
 export declare class PxSwitch extends Component<ISwitchProps, IState> {
     static defaultProps: {
@@ -32,7 +22,7 @@ export declare class PxSwitch extends Component<ISwitchProps, IState> {
         value: boolean;
         type: string;
     };
-    static contextType: React.Context<import("@proximus/lavender-styling-native").IThemeContext>;
+    static contextType: React.Context<IThemeContext>;
     constructor(props: ISwitchProps);
     componentDidUpdate(prevProps: ISwitchProps): void;
     _handleSwitch: (activate?: boolean) => void;

package/dist/PxSwitch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PxSwitch.d.ts","sourceRoot":"","sources":["../src/PxSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EACL,kBAAkB,EAClB,QAAQ,EACR,SAAS,EAIT,SAAS,EACV,MAAM,cAAc,CAAC;AAWtB,MAAM,WAAW,YAAa,SAAQ,kBAAkB;IACtD,aAAa,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC7B,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACnC,WAAW,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC5B,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC3B,sBAAsB,CAAC,EAAE,kBAAkB,CAAC;IAC5C,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,MAAM;IACd,KAAK,EAAE,OAAO,CAAC;IACf,eAAe,EAAE,QAAQ,CAAC,KAAK,CAAC;IAChC,wBAAwB,EAAE,QAAQ,CAAC,KAAK,CAAC;IACzC,eAAe,EAAE,QAAQ,CAAC,KAAK,CAAC;IAChC,cAAc,EAAE,QAAQ,CAAC,KAAK,CAAC;IAC/B,cAAc,EAAE,QAAQ,CAAC,KAAK,CAAC;CAChC;AAQD,qBAAa,QAAS,SAAQ,SAAS,CAAC,YAAY,EAAE,MAAM,CAAC;IAC3D,MAAM,CAAC,YAAY;;;;MAIjB;IAEF,MAAM,CAAC,WAAW,2EAAgB;gBAEtB,KAAK,EAAE,YAAY;IA0B/B,kBAAkB,CAAC,SAAS,EAAE,YAAY;IAS1C,aAAa,GAAI,WAAW,OAAO,UAkBjC;IAEF,cAAc,GAAI,OAAO,OAAO,UA+B9B;IAEF,MAAM;CAwIP"}
+{"version":3,"file":"PxSwitch.d.ts","sourceRoot":"","sources":["../src/PxSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EACL,kBAAkB,EAClB,QAAQ,EACR,SAAS,EAIT,SAAS,EACV,MAAM,cAAc,CAAC;AAStB,OAAO,EAEL,aAAa,EAEd,MAAM,mCAAmC,CAAC;AAE3C,MAAM,WAAW,YAAa,SAAQ,kBAAkB;IACtD,aAAa,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sBAAsB,CAAC,EAAE,kBAAkB,CAAC;IAC5C,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,MAAM;IACd,KAAK,EAAE,OAAO,CAAC;IACf,eAAe,EAAE,QAAQ,CAAC,KAAK,CAAC;IAChC,wBAAwB,EAAE,QAAQ,CAAC,KAAK,CAAC;CAC1C;AAQD,qBAAa,QAAS,SAAQ,SAAS,CAAC,YAAY,EAAE,MAAM,CAAC;IAC3D,MAAM,CAAC,YAAY;;;;MAIjB;IAEF,MAAM,CAAC,WAAW,+BAAgB;gBAEtB,KAAK,EAAE,YAAY;IAe/B,kBAAkB,CAAC,SAAS,EAAE,YAAY;IAS1C,aAAa,GAAI,WAAW,OAAO,UAkBjC;IAEF,cAAc,GAAI,OAAO,OAAO,UAc9B;IAEF,MAAM;CA6GP"}

package/package.json

@@ -1,10 +1,9 @@
 {
   "name": "@proximus/lavender-switch-native",
-  "version": "0.1.0-alpha.0",
+  "version": "0.1.0-alpha.2",
   "description": "Lavender react native switch component",
   "license": "MIT",
   "main": "src/index.ts",
-  "types": "dist/index.d.ts",
   "type": "module",
   "scripts": {
     "clean": "rm -rf dist",
@@ -19,10 +18,10 @@
     "react-native-gesture-handler": "*"
   },
   "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": "0.1.0-alpha.2",
+    "@proximus/lavender-icon-native": "0.1.0-alpha.2",
+    "@proximus/lavender-styling-native": "0.1.0-alpha.2",
+    "@proximus/lavender-texts-native": "0.1.0-alpha.2"
   },
   "publishConfig": {
     "access": "public"
@@ -38,5 +37,5 @@
       }
     }
   },
-  "gitHead": "27525289a448a6e4f3c2d36a88b9dc54d0f15fbf"
+  "gitHead": "38a67765befa2567a3f5f57976b7933cf5b85a24"
 }

package/src/PxSwitch.tsx

@@ -16,22 +16,18 @@ import {
 
 import { a11y, e2eID } from '@proximus/lavender-common-native';
 
-import { ThemeContext } from '@proximus/lavender-styling-native';
+import {
+  ITheme,
+  IThemeContext,
+  ThemeContext,
+} from '@proximus/lavender-styling-native';
 
 export interface ISwitchProps extends AccessibilityProps {
   onValueChange: (value: boolean) => void;
   disabled?: boolean;
   lookOnlyProps?: boolean;
   value?: boolean;
-  isPending?: boolean;
-  circleColors?: Array<string>; // Deprecated
-  circleStyle?: StyleProp<ViewStyle>; // Deprecated
-  trackColors?: Array<string>;
-  trackStyle?: StyleProp<ViewStyle>;
-  disabledStyle?: StyleProp<ViewStyle>;
   testID?: string;
-  height?: number;
-  type?: 'order' | 'primary';
   labelAccessibilityProp?: AccessibilityProps;
   containerStyle?: StyleProp<ViewStyle>;
   hasLabel?: boolean;
@@ -41,9 +37,6 @@ interface IState {
   value: boolean;
   transformSwitch: Animated.Value;
   containerBackgroundColor: Animated.Value;
-  yesLabelOpacity: Animated.Value;
-  pendingOpacity: Animated.Value;
-  noLabelOpacity: Animated.Value;
 }
 
 const defaults = {
@@ -64,24 +57,13 @@ export class PxSwitch extends Component<ISwitchProps, IState> {
   constructor(props: ISwitchProps) {
     super(props);
 
-    const { value, isPending, disabled } = props;
+    const { value } = props;
     this.state = {
       containerBackgroundColor: new Animated.Value(
-        value || isPending
-          ? defaults.interpolationRange
-          : -defaults.interpolationRange
+        value ? defaults.interpolationRange : -defaults.interpolationRange
       ),
       transformSwitch: new Animated.Value(
-        value || isPending
-          ? defaults.circleSize - 10
-          : -defaults.circleSize + 10
-      ),
-      yesLabelOpacity: new Animated.Value(
-        disabled || !props.value || isPending ? 0 : 1
-      ),
-      pendingOpacity: new Animated.Value(isPending && !disabled ? 1 : 0),
-      noLabelOpacity: new Animated.Value(
-        disabled || value || isPending ? 0 : 1
+        value ? defaults.circleSize - 10 : -defaults.circleSize + 10
       ),
       value: value || false,
     };
@@ -117,34 +99,17 @@ export class PxSwitch extends Component<ISwitchProps, IState> {
   };
 
   _animateSwitch = (value: boolean) => {
-    const { isPending } = this.props;
     Animated.parallel([
       Animated.spring(this.state.transformSwitch, {
-        useNativeDriver: false,
-        toValue:
-          value || isPending
-            ? defaults.circleSize - 10
-            : -defaults.circleSize + 10,
+        useNativeDriver: true,
+        toValue: value ? defaults.circleSize - 10 : -defaults.circleSize + 10,
       }),
       Animated.timing(this.state.containerBackgroundColor, {
         duration: defaults.duration,
-        useNativeDriver: false,
-        toValue:
-          value || isPending
-            ? defaults.interpolationRange
-            : -defaults.interpolationRange,
-      }),
-      Animated.spring(this.state.yesLabelOpacity, {
-        useNativeDriver: false,
-        toValue: value && !isPending ? 1 : 0,
-      }),
-      Animated.spring(this.state.noLabelOpacity, {
-        useNativeDriver: false,
-        toValue: value || isPending ? 0 : 1,
-      }),
-      Animated.spring(this.state.pendingOpacity, {
-        useNativeDriver: false,
-        toValue: isPending ? 1 : 0,
+        useNativeDriver: true,
+        toValue: value
+          ? defaults.interpolationRange
+          : -defaults.interpolationRange,
       }),
     ]).start();
   };
@@ -152,33 +117,21 @@ export class PxSwitch extends Component<ISwitchProps, IState> {
   render() {
     const { containerBackgroundColor, value } = this.state;
 
-    const {
-      circleStyle,
-      trackColors,
-      trackStyle,
-      testID,
-      disabled,
-      isPending,
-      height = 28,
-      type,
-      ...accessibilityProps
-    } = this.props;
+    const { testID, disabled, ...accessibilityProps } = this.props;
 
     const containerBackground = containerBackgroundColor.interpolate({
       inputRange: [-defaults.interpolationRange, defaults.interpolationRange],
-      outputRange: trackColors || [
-        // @ts-ignore
-        this.context?.theme?.t('BackgroundColorActionNeutralStrongDefault'),
-        type === 'order'
-          ? // @ts-ignore
-            this.context?.theme?.switchActiveForOrder
-          : // @ts-ignore
-            this.context?.theme?.t('BackgroundColorPurposeSuccessDefault'),
+      outputRange: [
+        ((this.context as IThemeContext)?.theme as ITheme)?.t(
+          'ColorBackgroundContainerStrongDefault'
+        ),
+        ((this.context as IThemeContext)?.theme as ITheme)?.t(
+          'ColorBackgroundPurposeSuccessDefault'
+        ),
       ],
     });
 
     return (
-      // @ts-ignore
       <FlingGestureHandler
         direction={Directions.LEFT}
         numberOfPointers={1}
@@ -188,8 +141,6 @@ export class PxSwitch extends Component<ISwitchProps, IState> {
           }
         }}
       >
-        {/*
-        // @ts-ignore */}
         <FlingGestureHandler
           direction={Directions.RIGHT}
           numberOfPointers={1}
@@ -199,7 +150,7 @@ export class PxSwitch extends Component<ISwitchProps, IState> {
             }
           }}
         >
-          <View style={[{ height }, this.props.containerStyle]}>
+          <View style={[this.props.containerStyle]}>
             <TouchableWithoutFeedback
               disabled={disabled}
               onPress={() => this._handleSwitch()}
@@ -224,60 +175,47 @@ export class PxSwitch extends Component<ISwitchProps, IState> {
                   styles.track,
                   {
                     backgroundColor: containerBackground,
-                  },
-                  trackStyle,
-                  isPending && {
-                    // @ts-ignore
-                    backgroundColor: this.context?.theme?.switchPending,
+                    borderRadius: (
+                      (this.context as IThemeContext)?.theme as ITheme
+                    )?.t('RadiusPill').number,
+                    width: (
+                      (this.context as IThemeContext)?.theme as ITheme
+                    )?.t('SizeActionInputSwitchWidth').number,
+                    padding: (
+                      (this.context as IThemeContext)?.theme as ITheme
+                    )?.t('Padding3xsMobile').number,
                   },
                   disabled && {
-                    // @ts-ignore
-                    backgroundColor: this.context?.theme?.t(
-                      'BackgroundColorActionDisabledDefault'
-                    ),
+                    backgroundColor: (
+                      (this.context as IThemeContext)?.theme as ITheme
+                    )?.t('ColorBackgroundStateDisabledDefault'),
                   },
                 ]}
               >
                 <Animated.View
                   style={[
-                    styles.circle,
                     {
-                      // @ts-ignore
-                      width: this.context?.theme?.t('AssetsSizeS').number,
-                      // @ts-ignore
-                      height: this.context?.theme?.t('AssetsSizeS').number,
-                      // @ts-ignore
-                      borderRadius: this.context?.theme?.t('RadiusPill').number,
+                      width: (
+                        (this.context as IThemeContext)?.theme as ITheme
+                      )?.t('SizeIconM').number,
+                      height: (
+                        (this.context as IThemeContext)?.theme as ITheme
+                      )?.t('SizeIconM').number,
+
+                      borderRadius: (
+                        (this.context as IThemeContext)?.theme as ITheme
+                      )?.t('RadiusPill').number,
                       backgroundColor: disabled
-                        ? // @ts-ignore
-                          this.context?.theme?.t(
-                            'BackgroundColorActionDisabledDefault'
+                        ? ((this.context as IThemeContext)?.theme as ITheme)?.t(
+                            'ColorBackgroundStateDisabledDefault'
                           )
-                        : // @ts-ignore
-                          this.context?.theme?.t(
-                            'BackgroundColorContainerNeutralBareDefault'
+                        : ((this.context as IThemeContext)?.theme as ITheme)?.t(
+                            'ColorBackgroundContainerLightDefault'
                           ),
-                      left: this.state.transformSwitch,
+                      transform: [{ translateX: this.state.transformSwitch }],
                     },
-                    circleStyle,
                   ]}
                 ></Animated.View>
-                <Animated.View
-                  style={{
-                    position: 'absolute',
-                    opacity: this.state.yesLabelOpacity,
-                    left: 9,
-                  }}
-                ></Animated.View>
-                {!disabled && (
-                  <Animated.View
-                    style={{
-                      position: 'absolute',
-                      opacity: this.state.noLabelOpacity,
-                      right: 6,
-                    }}
-                  ></Animated.View>
-                )}
               </Animated.View>
             </TouchableWithoutFeedback>
           </View>
@@ -288,27 +226,8 @@ export class PxSwitch extends Component<ISwitchProps, IState> {
 }
 
 const styles = StyleSheet.create({
-  circle: {
-    borderRadius: 14,
-    alignItems: 'center',
-    // height: defaults.circleSize,
-    // width: defaults.circleSize,
-  },
-  disabled: {
-    bottom: 0,
-    left: 0,
-    opacity: 0.5,
-    position: 'absolute',
-    right: 0,
-    top: 0,
-  },
   track: {
-    alignItems: 'center',
-    borderRadius: 14,
-    flex: 1,
     flexDirection: 'row',
-    height: 30,
     justifyContent: 'center',
-    width: 48,
   },
 });