@xsolla/xui-b2c-other-card 0.202.0

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@xsolla/xui-b2c-other-card",
+  "version": "0.202.0",
+  "main": "./web/index.js",
+  "module": "./web/index.mjs",
+  "types": "./web/index.d.ts",
+  "scripts": {
+    "build": "yarn build:web && yarn build:native",
+    "build:web": "PLATFORM=web tsup",
+    "build:native": "PLATFORM=native tsup",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage"
+  },
+  "dependencies": {
+    "@xsolla/xui-core": "0.202.0",
+    "@xsolla/xui-icons": "0.202.0",
+    "@xsolla/xui-primitives-core": "0.202.0"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^14.1.2",
+    "@vitest/coverage-v8": "^4.0.18",
+    "jsdom": "^24.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "tsup": "^8.0.0",
+    "vitest": "^4.0.18"
+  },
+  "license": "MIT",
+  "sideEffects": false,
+  "react-native": "./native/index.js",
+  "exports": {
+    ".": {
+      "react-native": {
+        "types": "./native/index.d.ts",
+        "import": "./native/index.mjs",
+        "require": "./native/index.js"
+      },
+      "import": {
+        "types": "./web/index.d.ts",
+        "default": "./web/index.mjs"
+      },
+      "require": {
+        "types": "./web/index.d.ts",
+        "default": "./web/index.js"
+      },
+      "default": {
+        "types": "./web/index.d.ts",
+        "default": "./web/index.js"
+      }
+    }
+  }
+}

package/web/index.d.mts

@@ -0,0 +1,49 @@
+import React, { ReactNode } from 'react';
+import { ThemeOverrideProps } from '@xsolla/xui-core';
+
+type OtherCardInteractiveState = "default" | "hover" | "press" | "disabled";
+/**
+ * `brand` is the offer-type tag on the left (e.g. "Passive bonus").
+ * `alert` is the timing tag on the right (e.g. "Active until 10 Jul 2025").
+ */
+type OtherCardTagTone = "brand" | "alert";
+interface OtherCardTagData {
+    label: ReactNode;
+    icon?: ReactNode;
+    tone?: OtherCardTagTone;
+}
+interface OtherCardProps extends ThemeOverrideProps {
+    /** Offer title, e.g. "X2 cashback {item name}". heading/h5 (display, 20/20/700); wraps to at most two lines. */
+    title: ReactNode;
+    /** Optional supporting copy under the title. Clamped to three lines. */
+    description?: ReactNode;
+    /** Publisher / game name that sources the offer, e.g. "PUBG Mobile". */
+    publisherName?: ReactNode;
+    /** Circular publisher avatar (24×24). Paired with `publisherName`; the avatar alone is not enough. */
+    publisherAvatarSrc?: string;
+    publisherAvatarAlt?: string;
+    /** Tag row. The first tag defaults to the `brand` tone, the rest to `alert`. */
+    tags?: OtherCardTagData[];
+    /** Availability label, e.g. "Available". Rendered with the success palette. */
+    status?: ReactNode;
+    /** Verb phrase for the action button, e.g. "Show discount code". */
+    actionLabel?: ReactNode;
+    onActionPress?: () => void;
+    /** Makes the whole card tappable (navigates to the offer detail). */
+    onPress?: () => void;
+    /** Square (1:1) promo image. Omit — or set `imageVisible={false}` — for the text-only variant. */
+    imageSrc?: string;
+    imageAlt?: string;
+    imageVisible?: boolean;
+    /** Interactive state. Web applies hover/press automatically; pass explicitly for design review. */
+    state?: OtherCardInteractiveState;
+    disabled?: boolean;
+    /** Card width. Defaults to the 366 px Figma frame; pass `"100%"` to fill a feed column. */
+    width?: number | string;
+    "aria-label"?: string;
+    testID?: string;
+}
+
+declare const OtherCard: React.FC<OtherCardProps>;
+
+export { OtherCard, type OtherCardInteractiveState, type OtherCardProps, type OtherCardTagData, type OtherCardTagTone };

package/web/index.d.ts

@@ -0,0 +1,49 @@
+import React, { ReactNode } from 'react';
+import { ThemeOverrideProps } from '@xsolla/xui-core';
+
+type OtherCardInteractiveState = "default" | "hover" | "press" | "disabled";
+/**
+ * `brand` is the offer-type tag on the left (e.g. "Passive bonus").
+ * `alert` is the timing tag on the right (e.g. "Active until 10 Jul 2025").
+ */
+type OtherCardTagTone = "brand" | "alert";
+interface OtherCardTagData {
+    label: ReactNode;
+    icon?: ReactNode;
+    tone?: OtherCardTagTone;
+}
+interface OtherCardProps extends ThemeOverrideProps {
+    /** Offer title, e.g. "X2 cashback {item name}". heading/h5 (display, 20/20/700); wraps to at most two lines. */
+    title: ReactNode;
+    /** Optional supporting copy under the title. Clamped to three lines. */
+    description?: ReactNode;
+    /** Publisher / game name that sources the offer, e.g. "PUBG Mobile". */
+    publisherName?: ReactNode;
+    /** Circular publisher avatar (24×24). Paired with `publisherName`; the avatar alone is not enough. */
+    publisherAvatarSrc?: string;
+    publisherAvatarAlt?: string;
+    /** Tag row. The first tag defaults to the `brand` tone, the rest to `alert`. */
+    tags?: OtherCardTagData[];
+    /** Availability label, e.g. "Available". Rendered with the success palette. */
+    status?: ReactNode;
+    /** Verb phrase for the action button, e.g. "Show discount code". */
+    actionLabel?: ReactNode;
+    onActionPress?: () => void;
+    /** Makes the whole card tappable (navigates to the offer detail). */
+    onPress?: () => void;
+    /** Square (1:1) promo image. Omit — or set `imageVisible={false}` — for the text-only variant. */
+    imageSrc?: string;
+    imageAlt?: string;
+    imageVisible?: boolean;
+    /** Interactive state. Web applies hover/press automatically; pass explicitly for design review. */
+    state?: OtherCardInteractiveState;
+    disabled?: boolean;
+    /** Card width. Defaults to the 366 px Figma frame; pass `"100%"` to fill a feed column. */
+    width?: number | string;
+    "aria-label"?: string;
+    testID?: string;
+}
+
+declare const OtherCard: React.FC<OtherCardProps>;
+
+export { OtherCard, type OtherCardInteractiveState, type OtherCardProps, type OtherCardTagData, type OtherCardTagTone };