@xsolla/xui-b2c-media-card 0.217.0

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@xsolla/xui-b2c-media-card",
+  "version": "0.217.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.217.0",
+    "@xsolla/xui-primitives-core": "0.217.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,64 @@
+import React, { ReactNode } from 'react';
+import { ThemeOverrideProps } from '@xsolla/xui-core';
+
+/**
+ * Figma `Orientation`. `horizontal` is the 319×179 landscape plate used in a
+ * video row; `vertical` is the 95×169 portrait plate used in a shorts rail.
+ */
+type MediaCardOrientation = "horizontal" | "vertical";
+interface MediaCardProps extends ThemeOverrideProps {
+    /** Thumbnail image URL. Fills the whole plate, cropped to cover. */
+    src: string;
+    /**
+     * Human-readable name of the media this card represents, e.g.
+     * `"Chapter 3: The Ascent"`.
+     *
+     * This is what makes a grid of cards usable with a screen reader: the Watch
+     * control is named `"Watch {mediaName}"` rather than a bare `"Watch"`, so ten
+     * cards in a row do not all announce as the same button. Required for that
+     * reason — pass the title even when it is not drawn on the card.
+     */
+    mediaName: string;
+    /**
+     * Alt text for the thumbnail. Defaults to `""` (decorative): the thumbnail is
+     * a picture *of* the media that `mediaName` already names, so describing it
+     * again duplicates the announcement. Pass a value only when the image carries
+     * information the name does not.
+     */
+    alt?: string;
+    /** Figma `Orientation`. Defaults to `horizontal`. */
+    orientation?: MediaCardOrientation;
+    /**
+     * Figma `Rewarded`. Marks the media as granting a reward for watching, which
+     * appends the `rewardIcon` to the Watch control and to its accessible name.
+     */
+    rewarded?: boolean;
+    /**
+     * The reward glyph shown inside the Watch control when `rewarded` is set.
+     * Unopinionated slot — pass the product's own coin/currency icon. Omit it and
+     * the card draws a neutral 16 px placeholder mark instead.
+     */
+    rewardIcon?: ReactNode;
+    /** Figma `Watch Button`. Set `false` to render the bare thumbnail. Defaults to `true`. */
+    showWatchButton?: boolean;
+    /** Visible label on the Watch control. Defaults to `"Watch"`. */
+    watchLabel?: string;
+    /** Called when the Watch control is activated. */
+    onWatchPress?: () => void;
+    /**
+     * Called when the plate itself is pressed. Optional — a card can be a pure
+     * thumbnail whose only action is the Watch control.
+     */
+    onPress?: () => void;
+    /** Removes interactivity from both the plate and the Watch control, and dims the card. */
+    disabled?: boolean;
+    /** Plate width. Defaults to the Figma frame width for the orientation. */
+    width?: number | string;
+    /** Plate height. Overrides the orientation's aspect ratio when supplied. */
+    height?: number | string;
+    testID?: string;
+}
+
+declare const MediaCard: React.FC<MediaCardProps>;
+
+export { MediaCard, type MediaCardOrientation, type MediaCardProps };

package/web/index.d.ts

@@ -0,0 +1,64 @@
+import React, { ReactNode } from 'react';
+import { ThemeOverrideProps } from '@xsolla/xui-core';
+
+/**
+ * Figma `Orientation`. `horizontal` is the 319×179 landscape plate used in a
+ * video row; `vertical` is the 95×169 portrait plate used in a shorts rail.
+ */
+type MediaCardOrientation = "horizontal" | "vertical";
+interface MediaCardProps extends ThemeOverrideProps {
+    /** Thumbnail image URL. Fills the whole plate, cropped to cover. */
+    src: string;
+    /**
+     * Human-readable name of the media this card represents, e.g.
+     * `"Chapter 3: The Ascent"`.
+     *
+     * This is what makes a grid of cards usable with a screen reader: the Watch
+     * control is named `"Watch {mediaName}"` rather than a bare `"Watch"`, so ten
+     * cards in a row do not all announce as the same button. Required for that
+     * reason — pass the title even when it is not drawn on the card.
+     */
+    mediaName: string;
+    /**
+     * Alt text for the thumbnail. Defaults to `""` (decorative): the thumbnail is
+     * a picture *of* the media that `mediaName` already names, so describing it
+     * again duplicates the announcement. Pass a value only when the image carries
+     * information the name does not.
+     */
+    alt?: string;
+    /** Figma `Orientation`. Defaults to `horizontal`. */
+    orientation?: MediaCardOrientation;
+    /**
+     * Figma `Rewarded`. Marks the media as granting a reward for watching, which
+     * appends the `rewardIcon` to the Watch control and to its accessible name.
+     */
+    rewarded?: boolean;
+    /**
+     * The reward glyph shown inside the Watch control when `rewarded` is set.
+     * Unopinionated slot — pass the product's own coin/currency icon. Omit it and
+     * the card draws a neutral 16 px placeholder mark instead.
+     */
+    rewardIcon?: ReactNode;
+    /** Figma `Watch Button`. Set `false` to render the bare thumbnail. Defaults to `true`. */
+    showWatchButton?: boolean;
+    /** Visible label on the Watch control. Defaults to `"Watch"`. */
+    watchLabel?: string;
+    /** Called when the Watch control is activated. */
+    onWatchPress?: () => void;
+    /**
+     * Called when the plate itself is pressed. Optional — a card can be a pure
+     * thumbnail whose only action is the Watch control.
+     */
+    onPress?: () => void;
+    /** Removes interactivity from both the plate and the Watch control, and dims the card. */
+    disabled?: boolean;
+    /** Plate width. Defaults to the Figma frame width for the orientation. */
+    width?: number | string;
+    /** Plate height. Overrides the orientation's aspect ratio when supplied. */
+    height?: number | string;
+    testID?: string;
+}
+
+declare const MediaCard: React.FC<MediaCardProps>;
+
+export { MediaCard, type MediaCardOrientation, type MediaCardProps };