@proximus/lavender-skeleton-native 0.1.0-alpha.0 → 0.1.0-alpha.10

package/dist/CardSkeleton.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ISkeletonProps } from './types';
-export declare function PxCardSkeleton({ inverted, containerStyle }: ISkeletonProps): React.JSX.Element;
+export declare function PxCardSkeleton({ inverted, containerStyle, testID, }: ISkeletonProps): React.JSX.Element;
 //# sourceMappingURL=CardSkeleton.d.ts.map

package/dist/CardSkeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardSkeleton.d.ts","sourceRoot":"","sources":["../src/CardSkeleton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAE,EAAE,cAAc,qBAsB1E"}
+{"version":3,"file":"CardSkeleton.d.ts","sourceRoot":"","sources":["../src/CardSkeleton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAGzC,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,cAAc,EACd,MAAM,GACP,EAAE,cAAc,qBAuBhB"}

package/dist/CardSkeleton.js

@@ -0,0 +1,19 @@
+import { View } from 'react-native';
+import { PxSkeleton } from './Skeleton';
+import React from 'react';
+import { useTheme } from '@proximus/lavender-styling-native';
+import { e2eID } from '@proximus/lavender-common-native';
+export function PxCardSkeleton({ inverted, containerStyle, testID, }) {
+    const { theme } = useTheme();
+    return (React.createElement(View, { style: [containerStyle, { borderRadius: theme.t('RadiusMain').number }], ...e2eID(testID) },
+        React.createElement(PxSkeleton, { variant: 'assetL', inverted: inverted, expand: true }),
+        React.createElement(View, { style: {
+                gap: theme.t('SpacingSMobile').number,
+                borderBottomEndRadius: theme.t('RadiusMain').number,
+                borderBottomStartRadius: theme.t('RadiusMain').number,
+                padding: theme.t('PaddingSMobile').number,
+                backgroundColor: theme.t('ColorBackgroundSurfaceLight'),
+            } },
+            React.createElement(PxSkeleton, { variant: 'headingS', inverted: inverted }),
+            React.createElement(PxSkeleton, { variant: 'body', inverted: inverted }))));
+}

package/dist/CarouselSkeleton.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ISkeletonProps } from './types';
-export declare function PxCarouselSkeleton({ inverted, itemsVisible, containerStyle, }: {
+export declare function PxCarouselSkeleton({ inverted, itemsVisible, containerStyle, testID, }: {
     itemsVisible?: number;
 } & ISkeletonProps): React.JSX.Element;
 //# sourceMappingURL=CarouselSkeleton.d.ts.map

package/dist/CarouselSkeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselSkeleton.d.ts","sourceRoot":"","sources":["../src/CarouselSkeleton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,YAAgB,EAChB,cAAc,GACf,EAAE;IACD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,GAAG,cAAc,qBAqCjB"}
+{"version":3,"file":"CarouselSkeleton.d.ts","sourceRoot":"","sources":["../src/CarouselSkeleton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAGzC,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,YAAgB,EAChB,cAAc,EACd,MAAM,GACP,EAAE;IACD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,GAAG,cAAc,qBAsCjB"}

package/dist/CarouselSkeleton.js

@@ -0,0 +1,29 @@
+import { View } from 'react-native';
+import { PxSkeleton } from './Skeleton';
+import React from 'react';
+import { useTheme } from '@proximus/lavender-styling-native';
+import { e2eID } from '@proximus/lavender-common-native';
+export function PxCarouselSkeleton({ inverted, itemsVisible = 1, containerStyle, testID, }) {
+    const { theme } = useTheme();
+    const panelVariant = itemsVisible === 1 ? 'panel' : 'panelS';
+    return (React.createElement(View, { style: [
+            containerStyle,
+            {
+                gap: theme.t('SpacingSMobile').number,
+                borderRadius: theme.t('RadiusMain').number,
+            },
+        ], ...e2eID(testID) },
+        React.createElement(View, { style: {
+                flexDirection: 'row',
+                gap: theme.t('SpacingSMobile').number,
+                overflow: 'hidden',
+            } },
+            React.createElement(PxSkeleton, { inverted: inverted, variant: panelVariant }),
+            React.createElement(PxSkeleton, { inverted: inverted, variant: panelVariant }),
+            React.createElement(PxSkeleton, { inverted: inverted, variant: panelVariant })),
+        React.createElement(View, { style: {
+                justifyContent: 'center',
+                flexDirection: 'row',
+            } },
+            React.createElement(PxSkeleton, { inverted: inverted, variant: 'body' }))));
+}

package/dist/DataUsageSkeleton.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ISkeletonProps } from './types';
-export declare function PxDataUsageSkeleton({ inverted, containerStyle, }: ISkeletonProps): React.JSX.Element;
+export declare function PxDataUsageSkeleton({ inverted, containerStyle, testID, }: ISkeletonProps): React.JSX.Element;
 //# sourceMappingURL=DataUsageSkeleton.d.ts.map

package/dist/DataUsageSkeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataUsageSkeleton.d.ts","sourceRoot":"","sources":["../src/DataUsageSkeleton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,cAAc,GACf,EAAE,cAAc,qBAkChB"}
+{"version":3,"file":"DataUsageSkeleton.d.ts","sourceRoot":"","sources":["../src/DataUsageSkeleton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAGzC,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,cAAc,EACd,MAAM,GACP,EAAE,cAAc,qBAmChB"}

package/dist/DataUsageSkeleton.js

@@ -0,0 +1,29 @@
+import { View } from 'react-native';
+import { PxSkeleton } from './Skeleton';
+import React from 'react';
+import { useTheme } from '@proximus/lavender-styling-native';
+import { PxStatusSkeleton } from './StatusSkeleton';
+import { e2eID } from '@proximus/lavender-common-native';
+export function PxDataUsageSkeleton({ inverted, containerStyle, testID, }) {
+    const { theme } = useTheme();
+    return (React.createElement(View, { style: [
+            containerStyle,
+            {
+                gap: theme.t('SpacingDefaultMobile').number,
+                borderRadius: theme.t('RadiusMain').number,
+                padding: theme.t('PaddingSMobile').number,
+                backgroundColor: theme.t('ColorBackgroundSurfaceLight'),
+            },
+        ], ...e2eID(testID) },
+        React.createElement(View, { style: {
+                gap: theme.t('SpacingXsMobile').number,
+            } },
+            React.createElement(PxSkeleton, { variant: 'headingS', inverted: inverted }),
+            React.createElement(PxSkeleton, { variant: 'body', inverted: inverted })),
+        React.createElement(View, { style: {
+                gap: theme.t('SpacingXsMobile').number,
+            } },
+            React.createElement(PxSkeleton, { variant: 'headingS', inverted: inverted }),
+            React.createElement(PxSkeleton, { variant: 'body', inverted: inverted, expand: true }),
+            React.createElement(PxStatusSkeleton, null))));
+}

package/dist/MessageCardSkeleton.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ISkeletonProps } from './types';
-export declare function PxMessageCardSkeleton({ inverted, containerStyle, }: ISkeletonProps): React.JSX.Element;
+export declare function PxMessageCardSkeleton({ inverted, containerStyle, testID, }: ISkeletonProps): React.JSX.Element;
 //# sourceMappingURL=MessageCardSkeleton.d.ts.map

package/dist/MessageCardSkeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageCardSkeleton.d.ts","sourceRoot":"","sources":["../src/MessageCardSkeleton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,cAAc,GACf,EAAE,cAAc,qBAiChB"}
+{"version":3,"file":"MessageCardSkeleton.d.ts","sourceRoot":"","sources":["../src/MessageCardSkeleton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAGzC,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,cAAc,EACd,MAAM,GACP,EAAE,cAAc,qBAkChB"}

package/dist/MessageCardSkeleton.js

@@ -0,0 +1,28 @@
+import { View } from 'react-native';
+import { PxSkeleton } from './Skeleton';
+import React from 'react';
+import { useTheme } from '@proximus/lavender-styling-native';
+import { e2eID } from '@proximus/lavender-common-native';
+export function PxMessageCardSkeleton({ inverted, containerStyle, testID, }) {
+    const { theme } = useTheme();
+    return (React.createElement(View, { style: [
+            containerStyle,
+            {
+                backgroundColor: theme.t('ColorBackgroundSurfaceLight'),
+                borderRadius: theme.t('RadiusMain').number,
+                padding: theme.t('PaddingSMobile').number,
+                gap: theme.t('SpacingSMobile').number,
+            },
+        ], ...e2eID(testID) },
+        React.createElement(View, { style: {
+                flexDirection: 'row',
+                gap: theme.t('SpacingSMobile').number,
+            } },
+            React.createElement(PxSkeleton, { variant: 'assetS', inverted: inverted }),
+            React.createElement(View, { style: { flex: 1, gap: theme.t('SpacingSMobile').number } },
+                React.createElement(PxSkeleton, { variant: 'headingS', inverted: inverted }),
+                React.createElement(PxSkeleton, { variant: 'body', inverted: inverted })),
+            React.createElement(PxSkeleton, { variant: 'actionS', inverted: inverted })),
+        React.createElement(View, null,
+            React.createElement(PxSkeleton, { variant: 'actionL', inverted: inverted }))));
+}

package/dist/Skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../src/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,EAIL,SAAS,EAGT,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AAOtB,MAAM,MAAM,qBAAqB,GAAG,SAAS,GAAG;IAC9C,uBAAuB;IACvB,OAAO,EACH,UAAU,GACV,UAAU,GACV,UAAU,GACV,MAAM,GACN,OAAO,GACP,SAAS,GACT,SAAS,GACT,SAAS,GACT,QAAQ,GACR,QAAQ,GACR,OAAO,GACP,QAAQ,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAeF,wBAAgB,UAAU,CAAC,KAAK,EAAE,qBAAqB,qBA+EtD"}
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../src/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,EAIL,SAAS,EAGT,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AAQtB,MAAM,MAAM,qBAAqB,GAAG,SAAS,GAAG;IAC9C,uBAAuB;IACvB,OAAO,EACH,UAAU,GACV,UAAU,GACV,UAAU,GACV,MAAM,GACN,OAAO,GACP,SAAS,GACT,SAAS,GACT,SAAS,GACT,QAAQ,GACR,QAAQ,GACR,OAAO,GACP,QAAQ,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAeF,wBAAgB,UAAU,CAAC,KAAK,EAAE,qBAAqB,qBAsFtD"}

package/dist/Skeleton.js

@@ -0,0 +1,126 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Animated, Easing, StyleSheet, View, } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import { useTheme } from '@proximus/lavender-styling-native';
+import { e2eID } from '@proximus/lavender-common-native';
+const DURATION = 1500;
+const ANGLE = 18;
+function useColors({ inverted }) {
+    const { theme } = useTheme();
+    const invertedSuffix = inverted ? 'Inverted' : 'Default';
+    const backgroundColor = theme.t(`ColorBackgroundStateDisabled${invertedSuffix}`);
+    const highlightColor = inverted ? 'rgba(0,0,0,1)' : 'rgba(255,255,255,1)';
+    const highlightColorWithOpacity = inverted
+        ? 'rgba(0,0,0,0.24)'
+        : 'rgba(255,255,250,.24)';
+    return { backgroundColor, highlightColor, highlightColorWithOpacity };
+}
+export function PxSkeleton(props) {
+    const { inverted = false, containerStyle, variant, expand = false, testID, } = props;
+    const [layout, setLayout] = useState({ width: 0, height: 0 });
+    const translateX = useRef(new Animated.Value(0)).current;
+    const { theme } = useTheme();
+    const { backgroundColor, highlightColor, highlightColorWithOpacity } = useColors({ inverted });
+    const loopRef = useRef(null);
+    useEffect(() => {
+        if (layout.width <= 0)
+            return;
+        // Stop any previous loop before starting a new one
+        loopRef.current?.stop();
+        translateX.setValue(-layout.width * 1.5);
+        const loop = Animated.loop(Animated.timing(translateX, {
+            toValue: layout.width,
+            easing: Easing.cubic,
+            duration: DURATION,
+            useNativeDriver: true,
+        }));
+        loopRef.current = loop;
+        loop.start();
+        return () => {
+            loop.stop();
+            loopRef.current = null;
+        };
+    }, [translateX, layout]);
+    return (React.createElement(View, { style: [
+            containerStyle,
+            {
+                backgroundColor,
+                borderRadius: ['actionS', 'actionL'].includes(variant)
+                    ? theme.t('RadiusPill').number
+                    : theme.t('RadiusMain').number,
+                overflow: 'hidden',
+            },
+            styles[props.variant],
+            { ...(expand ? { width: '100%', maxWidth: undefined } : undefined) },
+        ], onLayout: (e) => {
+            const { width, height } = e.nativeEvent.layout;
+            setLayout({ width, height });
+        }, ...e2eID(testID) },
+        React.createElement(Animated.View, { style: {
+                position: 'absolute',
+                top: -3 * layout.height, // ensure coverage when rotated
+                bottom: -3 * layout.height,
+                width: layout.width,
+                transform: [{ translateX }, { rotate: `${ANGLE}deg` }],
+            } }, layout.width > 0 && ( // Render gradient only when layout is measured will crash otherwise
+        React.createElement(LinearGradient, { style: { flex: 1 }, pointerEvents: "none", colors: [
+                highlightColorWithOpacity,
+                highlightColor,
+                highlightColorWithOpacity,
+            ], locations: [0, 0.5, 1], start: { x: 0, y: 0 }, end: { x: 1, y: 0 } })))));
+}
+const styles = StyleSheet.create({
+    headingS: {
+        height: 24,
+        minWidth: 120,
+        maxWidth: 240,
+    },
+    headingM: {
+        height: 32,
+        minWidth: 120,
+        maxWidth: 240,
+    },
+    headingL: {
+        height: 40,
+        minWidth: 120,
+        maxWidth: 240,
+    },
+    body: {
+        height: 16,
+        maxWidth: 300,
+        minWidth: 120,
+    },
+    bodyS: {
+        height: 16,
+        maxWidth: 180,
+        minWidth: 120,
+    },
+    actionS: {
+        height: 40,
+        width: 40,
+    },
+    actionL: {
+        height: 48,
+        width: 160,
+    },
+    assetS: {
+        height: 40,
+        width: 40,
+    },
+    assetXS: {
+        height: 16,
+        width: 16,
+    },
+    assetL: {
+        height: 80,
+        width: 80,
+    },
+    panel: {
+        height: 200,
+        width: 300,
+    },
+    panelS: {
+        height: 133,
+        width: 144,
+    },
+});

package/dist/StatusSkeleton.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ISkeletonProps } from './types';
-export declare function PxStatusSkeleton({ inverted, containerStyle }: ISkeletonProps): React.JSX.Element;
+export declare function PxStatusSkeleton({ inverted, containerStyle, testID, }: ISkeletonProps): React.JSX.Element;
 //# sourceMappingURL=StatusSkeleton.d.ts.map

package/dist/StatusSkeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusSkeleton.d.ts","sourceRoot":"","sources":["../src/StatusSkeleton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAE,EAAE,cAAc,qBAc5E"}
+{"version":3,"file":"StatusSkeleton.d.ts","sourceRoot":"","sources":["../src/StatusSkeleton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAGzC,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,cAAc,EACd,MAAM,GACP,EAAE,cAAc,qBAehB"}

package/dist/StatusSkeleton.js

@@ -0,0 +1,14 @@
+import { View } from 'react-native';
+import { PxSkeleton } from './Skeleton';
+import React from 'react';
+import { useTheme } from '@proximus/lavender-styling-native';
+import { e2eID } from '@proximus/lavender-common-native';
+export function PxStatusSkeleton({ inverted, containerStyle, testID, }) {
+    const { theme } = useTheme();
+    return (React.createElement(View, { style: [
+            containerStyle,
+            { flexDirection: 'row', gap: theme.t('Spacing2xsMobile').number },
+        ], ...e2eID(testID) },
+        React.createElement(PxSkeleton, { variant: 'assetXS', inverted: inverted }),
+        React.createElement(PxSkeleton, { variant: 'body', inverted: inverted })));
+}

package/dist/TileSkeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TileSkeleton.d.ts","sourceRoot":"","sources":["../src/TileSkeleton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAsBzC,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAE,EAAE,cAAc,qBAmB3E"}
+{"version":3,"file":"TileSkeleton.d.ts","sourceRoot":"","sources":["../src/TileSkeleton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAuBzC,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAE,EAAE,cAAc,qBAmB3E"}

package/dist/TileSkeleton.js

@@ -0,0 +1,31 @@
+import { View } from 'react-native';
+import { PxSkeleton } from './Skeleton';
+import React from 'react';
+import { useTheme } from '@proximus/lavender-styling-native';
+import { e2eID } from '@proximus/lavender-common-native';
+function PxTileSkeleton({ inverted, testID }) {
+    const { theme } = useTheme();
+    return (React.createElement(View, { style: {
+            alignItems: 'center',
+            gap: theme.t('SpacingSMobile').number,
+            borderRadius: theme.t('RadiusMain').number,
+            padding: theme.t('PaddingSMobile').number,
+            backgroundColor: theme.t('ColorBackgroundSurfaceLight'),
+        }, ...e2eID(testID) },
+        React.createElement(PxSkeleton, { variant: 'assetS', inverted: inverted }),
+        React.createElement(PxSkeleton, { variant: 'headingS', inverted: inverted })));
+}
+export function PxTilesSkeleton({ inverted, containerStyle }) {
+    const { theme } = useTheme();
+    return (React.createElement(View, { style: [
+            containerStyle,
+            {
+                gap: theme.t('SpacingSMobile').number,
+                flexDirection: 'row',
+                overflow: 'hidden',
+            },
+        ] },
+        React.createElement(PxTileSkeleton, { inverted: inverted }),
+        React.createElement(PxTileSkeleton, { inverted: inverted }),
+        React.createElement(PxTileSkeleton, { inverted: inverted })));
+}

package/dist/types.d.ts

@@ -2,5 +2,6 @@ import { StyleProp, ViewStyle } from 'react-native';
 export interface ISkeletonProps {
     inverted?: boolean;
     containerStyle?: StyleProp<ViewStyle>;
+    testID?: string;
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACvC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,38 +1,18 @@
 {
   "name": "@proximus/lavender-skeleton-native",
-  "version": "0.1.0-alpha.0",
+  "version": "0.1.0-alpha.10",
   "description": "Lavender skeleton component",
   "license": "MIT",
-  "main": "src/index.ts",
-  "type": "module",
-  "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.4",
-    "@proximus/lavender-styling-native": "0.1.0-alpha.3",
-    "@proximus/lavender-texts-native": "0.1.0-alpha.4"
+    "@proximus/lavender-common-native": "*",
+    "@proximus/lavender-styling-native": "*",
+    "@proximus/lavender-texts-native": "*"
   },
   "publishConfig": {
     "access": "public"
-  },
-  "lerna": {
-    "command": {
-      "publish": {
-        "assets": [
-          "dist",
-          "src",
-          "package.json"
-        ]
-      }
-    }
-  },
-  "gitHead": "8794f25d197ead361646d6e655ce64ba1c7f60c0"
+  }
 }

package/CHANGELOG.md

@@ -1,10 +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.0 (2025-09-24)
-
-### Features
-
-- **BCRI-4333430:** skeleton components ([#23](https://github.com/Pxs-Corporate/react-native-lavender/issues/23)) ([184f02f](https://github.com/Pxs-Corporate/react-native-lavender/commit/184f02f4f58dd825288b4db905b4bcbe74756ff8))

package/src/CardSkeleton.tsx

@@ -1,29 +0,0 @@
-import { View } from 'react-native';
-import { PxSkeleton } from './Skeleton';
-import React from 'react';
-import { useTheme } from '@proximus/lavender-styling-native';
-import { ISkeletonProps } from './types';
-
-export function PxCardSkeleton({ inverted, containerStyle }: ISkeletonProps) {
-  const { theme } = useTheme();
-
-  return (
-    <View
-      style={[containerStyle, { borderRadius: theme.t('RadiusMain').number }]}
-    >
-      <PxSkeleton variant={'assetL'} inverted={inverted} expand />
-      <View
-        style={{
-          gap: theme.t('SpacingSMobile').number,
-          borderBottomEndRadius: theme.t('RadiusMain').number,
-          borderBottomStartRadius: theme.t('RadiusMain').number,
-          padding: theme.t('PaddingSMobile').number,
-          backgroundColor: theme.t('ColorBackgroundSurfaceLight'),
-        }}
-      >
-        <PxSkeleton variant={'headingS'} inverted={inverted} />
-        <PxSkeleton variant={'body'} inverted={inverted} />
-      </View>
-    </View>
-  );
-}

package/src/CarouselSkeleton.tsx

@@ -1,50 +0,0 @@
-import { View } from 'react-native';
-import { PxSkeleton } from './Skeleton';
-import React from 'react';
-import { useTheme } from '@proximus/lavender-styling-native';
-import { ISkeletonProps } from './types';
-
-export function PxCarouselSkeleton({
-  inverted,
-  itemsVisible = 1,
-  containerStyle,
-}: {
-  itemsVisible?: number;
-} & ISkeletonProps) {
-  const { theme } = useTheme();
-
-  const panelVariant = itemsVisible === 1 ? 'panel' : 'panelS';
-
-  return (
-    <View
-      style={[
-        containerStyle,
-        {
-          gap: theme.t('SpacingSMobile').number,
-          borderRadius: theme.t('RadiusMain').number,
-        },
-      ]}
-    >
-      <View
-        style={{
-          flexDirection: 'row',
-          gap: theme.t('SpacingSMobile').number,
-          overflow: 'hidden',
-        }}
-      >
-        <PxSkeleton inverted={inverted} variant={panelVariant} />
-        <PxSkeleton inverted={inverted} variant={panelVariant} />
-        <PxSkeleton inverted={inverted} variant={panelVariant} />
-      </View>
-
-      <View
-        style={{
-          justifyContent: 'center',
-          flexDirection: 'row',
-        }}
-      >
-        <PxSkeleton inverted={inverted} variant={'body'} />
-      </View>
-    </View>
-  );
-}

package/src/DataUsageSkeleton.tsx

@@ -1,45 +0,0 @@
-import { View } from 'react-native';
-import { PxSkeleton } from './Skeleton';
-import React from 'react';
-import { useTheme } from '@proximus/lavender-styling-native';
-import { PxStatusSkeleton } from './StatusSkeleton';
-import { ISkeletonProps } from './types';
-
-export function PxDataUsageSkeleton({
-  inverted,
-  containerStyle,
-}: ISkeletonProps) {
-  const { theme } = useTheme();
-
-  return (
-    <View
-      style={[
-        containerStyle,
-        {
-          gap: theme.t('SpacingDefaultMobile').number,
-          borderRadius: theme.t('RadiusMain').number,
-          padding: theme.t('PaddingSMobile').number,
-          backgroundColor: theme.t('ColorBackgroundSurfaceLight'),
-        },
-      ]}
-    >
-      <View
-        style={{
-          gap: theme.t('SpacingXsMobile').number,
-        }}
-      >
-        <PxSkeleton variant={'headingS'} inverted={inverted} />
-        <PxSkeleton variant={'body'} inverted={inverted} />
-      </View>
-      <View
-        style={{
-          gap: theme.t('SpacingXsMobile').number,
-        }}
-      >
-        <PxSkeleton variant={'headingS'} inverted={inverted} />
-        <PxSkeleton variant={'body'} inverted={inverted} expand />
-        <PxStatusSkeleton />
-      </View>
-    </View>
-  );
-}

package/src/MessageCardSkeleton.tsx

@@ -1,43 +0,0 @@
-import { View } from 'react-native';
-import { PxSkeleton } from './Skeleton';
-import React from 'react';
-import { useTheme } from '@proximus/lavender-styling-native';
-import { ISkeletonProps } from './types';
-
-export function PxMessageCardSkeleton({
-  inverted,
-  containerStyle,
-}: ISkeletonProps) {
-  const { theme } = useTheme();
-
-  return (
-    <View
-      style={[
-        containerStyle,
-        {
-          backgroundColor: theme.t('ColorBackgroundSurfaceLight'),
-          borderRadius: theme.t('RadiusMain').number,
-          padding: theme.t('PaddingSMobile').number,
-          gap: theme.t('SpacingSMobile').number,
-        },
-      ]}
-    >
-      <View
-        style={{
-          flexDirection: 'row',
-          gap: theme.t('SpacingSMobile').number,
-        }}
-      >
-        <PxSkeleton variant={'assetS'} inverted={inverted} />
-        <View style={{ flex: 1, gap: theme.t('SpacingSMobile').number }}>
-          <PxSkeleton variant={'headingS'} inverted={inverted} />
-          <PxSkeleton variant={'body'} inverted={inverted} />
-        </View>
-        <PxSkeleton variant={'actionS'} inverted={inverted} />
-      </View>
-      <View>
-        <PxSkeleton variant={'actionL'} inverted={inverted} />
-      </View>
-    </View>
-  );
-}

package/src/Skeleton.tsx

@@ -1,187 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import {
-  Animated,
-  Easing,
-  LayoutChangeEvent,
-  StyleProp,
-  StyleSheet,
-  View,
-  ViewProps,
-  ViewStyle,
-} from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
-import { useTheme } from '@proximus/lavender-styling-native';
-
-const DURATION = 1500;
-const ANGLE = 18;
-
-export type SkeletonGradientProps = ViewProps & {
-  /** Predefined shape */
-  variant:
-    | 'headingS'
-    | 'headingM'
-    | 'headingL'
-    | 'body'
-    | 'bodyS'
-    | 'actionS'
-    | 'actionL'
-    | 'assetXS'
-    | 'assetS'
-    | 'assetL'
-    | 'panel'
-    | 'panelS';
-  width?: number | string;
-  containerStyle?: StyleProp<ViewStyle>;
-  expand?: boolean;
-  inverted?: boolean;
-};
-
-function useColors({ inverted }: { inverted: boolean }) {
-  const { theme } = useTheme();
-  const invertedSuffix = inverted ? 'Inverted' : 'Default';
-  const backgroundColor = theme.t(
-    `ColorBackgroundStateDisabled${invertedSuffix}`
-  );
-  const highlightColor = inverted ? 'rgba(0,0,0,1)' : 'rgba(255,255,255,1)';
-  const highlightColorWithOpacity = inverted
-    ? 'rgba(0,0,0,0.24)'
-    : 'rgba(255,255,250,.24)';
-  return { backgroundColor, highlightColor, highlightColorWithOpacity };
-}
-
-export function PxSkeleton(props: SkeletonGradientProps) {
-  const { inverted = false, containerStyle, variant, expand = false } = props;
-  const [layout, setLayout] = useState({ width: 0, height: 0 });
-  const translateX = useRef(new Animated.Value(0)).current;
-  const { theme } = useTheme();
-  const { backgroundColor, highlightColor, highlightColorWithOpacity } =
-    useColors({ inverted });
-  const loopRef = useRef<Animated.CompositeAnimation | null>(null);
-
-  useEffect(() => {
-    if (layout.width <= 0) return;
-
-    // Stop any previous loop before starting a new one
-    loopRef.current?.stop();
-
-    translateX.setValue(-layout.width * 1.5);
-
-    const loop = Animated.loop(
-      Animated.timing(translateX, {
-        toValue: layout.width,
-        easing: Easing.cubic,
-        duration: DURATION,
-        useNativeDriver: true,
-      })
-    );
-    loopRef.current = loop;
-    loop.start();
-    return () => {
-      loop.stop();
-      loopRef.current = null;
-    };
-  }, [translateX, layout]);
-
-  return (
-    <View
-      style={[
-        containerStyle,
-        {
-          backgroundColor,
-          borderRadius: ['actionS', 'actionL'].includes(variant)
-            ? theme.t('RadiusPill').number
-            : theme.t('RadiusMain').number,
-          overflow: 'hidden',
-        },
-        styles[props.variant],
-        { ...(expand ? { width: '100%', maxWidth: undefined } : undefined) },
-      ]}
-      onLayout={(e: LayoutChangeEvent) => {
-        const { width, height } = e.nativeEvent.layout;
-        setLayout({ width, height });
-      }}
-    >
-      <Animated.View
-        style={{
-          position: 'absolute',
-
-          top: -3 * layout.height, // ensure coverage when rotated
-          bottom: -3 * layout.height,
-          width: layout.width,
-          transform: [{ translateX }, { rotate: `${ANGLE}deg` }],
-        }}
-      >
-        {layout.width > 0 && ( // Render gradient only when layout is measured will crash otherwise
-          <LinearGradient
-            style={{ flex: 1 }}
-            pointerEvents="none"
-            colors={[
-              highlightColorWithOpacity,
-              highlightColor,
-              highlightColorWithOpacity,
-            ]}
-            locations={[0, 0.5, 1]}
-            start={{ x: 0, y: 0 }}
-            end={{ x: 1, y: 0 }}
-          />
-        )}
-      </Animated.View>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  headingS: {
-    height: 24,
-    minWidth: 120,
-    maxWidth: 240,
-  },
-  headingM: {
-    height: 32,
-    minWidth: 120,
-    maxWidth: 240,
-  },
-  headingL: {
-    height: 40,
-    minWidth: 120,
-    maxWidth: 240,
-  },
-  body: {
-    height: 16,
-    maxWidth: 300,
-    minWidth: 120,
-  },
-  bodyS: {
-    height: 16,
-    maxWidth: 180,
-    minWidth: 120,
-  },
-  actionS: {
-    height: 40,
-    width: 40,
-  },
-  actionL: {
-    height: 48,
-    width: 160,
-  },
-  assetS: {
-    height: 40,
-    width: 40,
-  },
-  assetXS: {
-    height: 16,
-    width: 16,
-  },
-  assetL: {
-    height: 80,
-    width: 80,
-  },
-  panel: {
-    height: 200,
-    width: 300,
-  },
-  panelS: {
-    height: 133,
-    width: 144,
-  },
-});

package/src/StatusSkeleton.tsx

@@ -1,21 +0,0 @@
-import { View } from 'react-native';
-import { PxSkeleton } from './Skeleton';
-import React from 'react';
-import { useTheme } from '@proximus/lavender-styling-native';
-import { ISkeletonProps } from './types';
-
-export function PxStatusSkeleton({ inverted, containerStyle }: ISkeletonProps) {
-  const { theme } = useTheme();
-
-  return (
-    <View
-      style={[
-        containerStyle,
-        { flexDirection: 'row', gap: theme.t('Spacing2xsMobile').number },
-      ]}
-    >
-      <PxSkeleton variant={'assetXS'} inverted={inverted} />
-      <PxSkeleton variant={'body'} inverted={inverted} />
-    </View>
-  );
-}

package/src/TileSkeleton.tsx

@@ -1,46 +0,0 @@
-import { View } from 'react-native';
-import { PxSkeleton } from './Skeleton';
-import React from 'react';
-import { useTheme } from '@proximus/lavender-styling-native';
-import { ISkeletonProps } from './types';
-
-function PxTileSkeleton({ inverted }: ISkeletonProps) {
-  const { theme } = useTheme();
-
-  return (
-    <View
-      style={{
-        alignItems: 'center',
-        gap: theme.t('SpacingSMobile').number,
-        borderBottomEndRadius: theme.t('RadiusMain').number,
-        borderBottomStartRadius: theme.t('RadiusMain').number,
-        padding: theme.t('PaddingSMobile').number,
-        backgroundColor: theme.t('ColorBackgroundSurfaceLight'),
-      }}
-    >
-      <PxSkeleton variant={'assetS'} inverted={inverted} />
-      <PxSkeleton variant={'headingS'} inverted={inverted} />
-    </View>
-  );
-}
-
-export function PxTilesSkeleton({ inverted, containerStyle }: ISkeletonProps) {
-  const { theme } = useTheme();
-
-  return (
-    <View
-      style={[
-        containerStyle,
-        {
-          gap: theme.t('SpacingSMobile').number,
-          flexDirection: 'row',
-          overflow: 'hidden',
-        },
-      ]}
-    >
-      <PxTileSkeleton inverted={inverted} />
-      <PxTileSkeleton inverted={inverted} />
-      <PxTileSkeleton inverted={inverted} />
-    </View>
-  );
-}

package/src/types.ts

@@ -1,6 +0,0 @@
-import { StyleProp, ViewStyle } from 'react-native';
-
-export interface ISkeletonProps {
-  inverted?: boolean;
-  containerStyle?: StyleProp<ViewStyle>;
-}

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"]
-}