@proximus/lavender-pokecard-native 1.2.4-alpha.10

package/dist/PxCardActions.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface PxCardActionsProps {
+    buttons?: React.ReactNode;
+    moreAction?: React.ReactNode;
+    testID?: string;
+}
+export declare function PxCardActions({ buttons, moreAction, testID, }: PxCardActionsProps): React.JSX.Element | null;
+//# sourceMappingURL=PxCardActions.d.ts.map

package/dist/PxCardActions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PxCardActions.d.ts","sourceRoot":"","sources":["../src/PxCardActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,WAAW,kBAAkB;IACjC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,UAAU,EACV,MAAM,GACP,EAAE,kBAAkB,4BA6BpB"}

package/dist/PxCardActions.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { View } from 'react-native';
+import { useTheme } from '@proximus/lavender-styling-native';
+import { e2eID } from '@proximus/lavender-common-native';
+export function PxCardActions({ buttons, moreAction, testID, }) {
+    const { theme } = useTheme();
+    if (!buttons && !moreAction) {
+        return null;
+    }
+    return (React.createElement(View, { ...e2eID(testID), style: {
+            flexDirection: 'row',
+            gap: theme.t('SpacingXsMobile').number,
+            alignItems: 'center',
+        } },
+        React.createElement(View, { style: {
+                flex: 1,
+                flexDirection: 'row',
+                gap: theme.t('SpacingSMobile').number,
+                alignItems: 'center',
+            } }, buttons),
+        moreAction));
+}

package/dist/PxCardContainer.d.ts

@@ -0,0 +1,59 @@
+import React from 'react';
+import { AccessibilityProps, ImageResizeMode, ImageSourcePropType, StyleProp, ViewStyle } from 'react-native';
+import { type MediaContainerAspectRatio } from '@proximus/lavender-mediacontainer-native';
+export declare const PxCardBackgroundColor: {
+    readonly Light: "ColorBackgroundSurfaceLight";
+    readonly Default: "ColorBackgroundSurfaceDefault";
+    readonly Strong: "ColorBackgroundSurfaceStrong";
+    readonly Stronger: "ColorBackgroundSurfaceStronger";
+    readonly Dark: "ColorBackgroundSurfaceDark";
+    readonly Brand: "ColorBackgroundSurfaceBrand";
+    readonly BrandLight: "ColorBackgroundSurfaceBrandLight";
+};
+export type PxCardBackgroundColor = (typeof PxCardBackgroundColor)[keyof typeof PxCardBackgroundColor];
+export interface PxCardContainerProps extends AccessibilityProps {
+    inverted?: boolean;
+    children?: React.ReactNode;
+    containerStyle?: StyleProp<ViewStyle>;
+    testID?: string;
+    onPress?: () => void;
+    disabled?: boolean;
+    /**
+     * Image source for the card media.
+     * The container handles rendering and sizing the image based on `mediaPosition`.
+     */
+    src?: ImageSourcePropType;
+    /**
+     * Controls where the `src` image is positioned inside the card.
+     * - `'none'` (default): no media is rendered.
+     * - `'top'`: image is rendered above the content in a full-width wrapper (respects `aspectRatio`).
+     * - `'left'`: image is rendered to the left of the content, taking up 33.33% width.
+     */
+    mediaPosition?: 'none' | 'top' | 'left';
+    /**
+     * How the media image should be resized. Defaults to `'cover'`.
+     */
+    resizeMode?: ImageResizeMode;
+    /**
+     * Alt text for the media image.
+     */
+    alternativeText?: string;
+    /**
+     * Image source for a small circular artwork icon rendered to the left of children.
+     */
+    artwork?: ImageSourcePropType;
+    paddingSize?: 's' | 'm' | 'l';
+    aspectRatio?: MediaContainerAspectRatio;
+    /**
+     * Explicit numeric aspect ratio (width / height) for the media container.
+     * Used when `aspectRatio` is `'auto'` to provide a pre-known value
+     * (e.g. parsed from an image URL) instead of waiting for `Image.getSize`.
+     * Ignored when `aspectRatio` is a named preset.
+     */
+    numericAspectRatio?: number;
+    hasBorder?: boolean;
+    backgroundColor?: PxCardBackgroundColor;
+    backgroundImage?: ImageSourcePropType;
+}
+export declare function PxCardContainer(props: PxCardContainerProps): React.JSX.Element;
+//# sourceMappingURL=PxCardContainer.d.ts.map

package/dist/PxCardContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PxCardContainer.d.ts","sourceRoot":"","sources":["../src/PxCardContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EACL,kBAAkB,EAGlB,eAAe,EACf,mBAAmB,EACnB,SAAS,EAIT,SAAS,EACV,MAAM,cAAc,CAAC;AAOtB,OAAO,EAEL,KAAK,yBAAyB,EAC/B,MAAM,0CAA0C,CAAC;AAElD,eAAO,MAAM,qBAAqB;;;;;;;;CAQxB,CAAC;AAEX,MAAM,MAAM,qBAAqB,GAC/B,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,OAAO,qBAAqB,CAAC,CAAC;AAErE,MAAM,WAAW,oBAAqB,SAAQ,kBAAkB;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,GAAG,CAAC,EAAE,mBAAmB,CAAC;IAC1B;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;IACxC;;OAEG;IACH,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,WAAW,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAC9B,WAAW,CAAC,EAAE,yBAAyB,CAAC;IACxC;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,qBAAqB,CAAC;IACxC,eAAe,CAAC,EAAE,mBAAmB,CAAC;CACvC;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,qBAwM1D"}

package/dist/PxCardContainer.js

@@ -0,0 +1,115 @@
+import React, { useMemo } from 'react';
+import { Image, ImageBackground, StyleSheet, TouchableOpacity, View, } from 'react-native';
+import { useTheme } from '@proximus/lavender-styling-native';
+import { a11y, e2eID, useImageAspectRatio, } from '@proximus/lavender-common-native';
+import { PxMediaContainer, } from '@proximus/lavender-mediacontainer-native';
+export const PxCardBackgroundColor = {
+    Light: 'ColorBackgroundSurfaceLight',
+    Default: 'ColorBackgroundSurfaceDefault',
+    Strong: 'ColorBackgroundSurfaceStrong',
+    Stronger: 'ColorBackgroundSurfaceStronger',
+    Dark: 'ColorBackgroundSurfaceDark',
+    Brand: 'ColorBackgroundSurfaceBrand',
+    BrandLight: 'ColorBackgroundSurfaceBrandLight',
+};
+export function PxCardContainer(props) {
+    const { inverted = false, children, containerStyle, testID, onPress, disabled = false, accessibilityLabel, accessibilityHint, accessibilityRole, src, mediaPosition = 'none', resizeMode = 'cover', alternativeText, artwork, paddingSize = 's', aspectRatio, numericAspectRatio: numericAspectRatioProp, hasBorder = true, backgroundColor, backgroundImage, ...rest } = props;
+    const { theme } = useTheme();
+    const hasMedia = !!src && mediaPosition !== 'none';
+    const hasTopMedia = hasMedia && mediaPosition === 'top';
+    const hasLeftMedia = hasMedia && mediaPosition === 'left';
+    const needsInnerPadding = hasMedia || !!backgroundImage;
+    const isAutoAspectRatio = aspectRatio === 'auto';
+    const hookAspectRatio = useImageAspectRatio(isAutoAspectRatio && hasTopMedia && numericAspectRatioProp == null
+        ? src
+        : undefined);
+    const resolvedImageAspectRatio = numericAspectRatioProp ?? hookAspectRatio;
+    const customBackgroundColor = backgroundColor
+        ? theme.t(backgroundColor)
+        : theme.t(inverted
+            ? 'ColorBackgroundSurfaceDark'
+            : 'ColorBackgroundSurfaceDefault');
+    const borderColor = theme.t(inverted ? 'ColorBorderMainInverted' : 'ColorBorderMainDefault');
+    const paddingToken = {
+        s: 'PaddingSMobile',
+        m: 'PaddingMMobile',
+        l: 'PaddingLMobile',
+    }[paddingSize];
+    const padding = theme.t(paddingToken).number;
+    const gap = theme.t('SpacingSMobile').number;
+    const style = useMemo(() => [
+        {
+            backgroundColor: customBackgroundColor,
+            borderRadius: theme.t('RadiusMain').number,
+            padding: needsInnerPadding ? 0 : padding,
+            gap: needsInnerPadding ? 0 : gap,
+            overflow: 'hidden',
+            borderWidth: hasBorder ? 1 : 0,
+            borderColor,
+            flexDirection: hasLeftMedia ? 'row' : 'column',
+        },
+        containerStyle,
+    ], [
+        customBackgroundColor,
+        theme,
+        needsInnerPadding,
+        hasLeftMedia,
+        padding,
+        gap,
+        hasBorder,
+        borderColor,
+        containerStyle,
+    ]);
+    const sharedA11yProps = a11y({
+        accessibilityRole: onPress
+            ? accessibilityRole || 'button'
+            : accessibilityRole,
+        accessible: onPress ? true : !!accessibilityLabel,
+        ...(onPress && { accessibilityState: { disabled } }),
+        accessibilityLabel,
+        accessibilityHint,
+        ...rest,
+    });
+    const mediaImage = src ? (React.createElement(Image, { source: src, resizeMode: resizeMode, accessibilityLabel: alternativeText, style: hasLeftMedia ? StyleSheet.absoluteFill : styles.mediaImage, ...(testID && e2eID(`${testID}-media-image`)) })) : null;
+    const artworkImage = artwork ? (React.createElement(Image, { source: artwork, style: [styles.artwork, { borderRadius: theme.t('RadiusPill').number }], ...(testID && e2eID(`${testID}-artwork`)) })) : null;
+    const wrappedChildren = artworkImage ? (React.createElement(View, { style: styles.artworkRow },
+        artworkImage,
+        React.createElement(View, { style: styles.artworkContent }, children))) : (children);
+    const innerContent = (React.createElement(React.Fragment, null,
+        hasTopMedia && (React.createElement(PxMediaContainer, { aspectRatio: aspectRatio, numericAspectRatio: isAutoAspectRatio ? resolvedImageAspectRatio : undefined, testID: testID ? `${testID}-media-wrapper` : undefined }, mediaImage)),
+        hasLeftMedia && (React.createElement(View, { style: styles.leftMediaWrapper, ...(testID && e2eID(`${testID}-media-wrapper`)) }, mediaImage)),
+        hasMedia ? (React.createElement(View, { style: {
+                padding,
+                gap,
+                flex: hasLeftMedia ? 1 : undefined,
+            }, ...(testID && e2eID(`${testID}-content-wrapper`)) }, wrappedChildren)) : backgroundImage ? (React.createElement(View, { style: { padding, gap } }, wrappedChildren)) : (wrappedChildren)));
+    const content = backgroundImage ? (React.createElement(ImageBackground, { source: backgroundImage, resizeMode: "cover", style: styles.backgroundImage, ...(testID && e2eID(`${testID}-background-image`)) }, innerContent)) : (innerContent);
+    if (onPress) {
+        return (React.createElement(TouchableOpacity, { ...e2eID(testID), onPress: onPress, disabled: disabled, focusable: true, ...sharedA11yProps, style: style }, content));
+    }
+    return (React.createElement(View, { ...e2eID(testID), ...sharedA11yProps, style: style }, content));
+}
+const styles = StyleSheet.create({
+    backgroundImage: {
+        flex: 1,
+    },
+    leftMediaWrapper: {
+        width: '33.33%',
+    },
+    mediaImage: {
+        width: '100%',
+        height: '100%',
+    },
+    artwork: {
+        width: 48,
+        height: 48,
+    },
+    artworkRow: {
+        flexDirection: 'row',
+        gap: 12,
+        alignItems: 'center',
+    },
+    artworkContent: {
+        flex: 1,
+    },
+});

package/dist/PxCardHeading.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface PxCardHeaderProps {
+    title: string;
+    subtitle?: string;
+    inverted?: boolean;
+    testID?: string;
+    size?: 'default' | 'large';
+}
+/** @deprecated Use PxCardHeaderProps instead. */
+export type CardHeadingProps = PxCardHeaderProps;
+export declare function PxCardHeading({ title, subtitle, inverted, testID, size, }: PxCardHeaderProps): React.JSX.Element;
+/** @deprecated Use PxCardHeader instead. */
+export declare const CardHeading: typeof PxCardHeading;
+//# sourceMappingURL=PxCardHeading.d.ts.map

package/dist/PxCardHeading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PxCardHeading.d.ts","sourceRoot":"","sources":["../src/PxCardHeading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;CAC5B;AAED,iDAAiD;AACjD,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,CAAC;AAEjD,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,IAAgB,GACjB,EAAE,iBAAiB,qBA2CnB;AAED,4CAA4C;AAC5C,eAAO,MAAM,WAAW,sBAAgB,CAAC"}

package/dist/PxCardHeading.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { View } from 'react-native';
+import { Header, Body } from '@proximus/lavender-texts-native';
+import { e2eID } from '@proximus/lavender-common-native';
+import { useTheme } from '@proximus/lavender-styling-native';
+export function PxCardHeading({ title, subtitle, inverted, testID, size = 'default', }) {
+    const { theme } = useTheme();
+    const isLarge = size === 'large';
+    const titleFontSize = isLarge
+        ? theme.t('TextSizeHeading2xlMobile').number
+        : theme.t('TextSizeHeadingLMobile').number;
+    const subtitleFontSize = theme.t('TextSizeBodyLMobile').number;
+    const lineHeightRatio = theme.t('LineHeightRatioL');
+    const gap = theme.t('Spacing2xsMobile').number;
+    return (React.createElement(View, { style: {
+            gap,
+            alignItems: 'flex-start',
+            flex: 1,
+        } },
+        React.createElement(Header, { inverted: inverted, style: {
+                fontSize: titleFontSize,
+                lineHeight: titleFontSize * lineHeightRatio,
+            }, ...(testID && e2eID(`${testID}-title`)) }, title),
+        subtitle && (React.createElement(Body, { inverted: inverted, style: {
+                fontSize: subtitleFontSize,
+                lineHeight: subtitleFontSize * lineHeightRatio,
+            }, ...(testID && e2eID(`${testID}-subtitle`)) }, subtitle))));
+}
+/** @deprecated Use PxCardHeader instead. */
+export const CardHeading = PxCardHeading;

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from './PxCardContainer';
+export * from './PxCardHeading';
+export * from './PxCardActions';
+//# 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,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export * from './PxCardContainer';
+export * from './PxCardHeading';
+export * from './PxCardActions';

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@proximus/lavender-pokecard-native",
+  "version": "1.2.4-alpha.10",
+  "description": "Pokecard component",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "@proximus/lavender-button-native": "*",
+    "@proximus/lavender-buttonicon-native": "*",
+    "@proximus/lavender-common-native": "*",
+    "@proximus/lavender-mediacontainer-native": "*",
+    "@proximus/lavender-styling-native": "*",
+    "@proximus/lavender-texts-native": "*"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}