@xsolla/xui-game-card 0.151.0 → 0.153.0

package/native/index.d.mts

@@ -2,21 +2,34 @@ import React from 'react';
 import { ThemeOverrideProps } from '@xsolla/xui-core';
 
 type GameCardSize = "lg" | "md" | "sm";
+type GameCardImageRatio = "16:9" | "1:1" | "2:3" | "3:2" | "4:3" | "9:16" | "custom";
+type GameCardLayout = "horizontal" | "vertical";
+type GameCardPlatform = "mobile" | "desktop";
 interface GameCardProps extends ThemeOverrideProps {
-    /** Game artwork image URL */
-    image: string;
+    /** Game artwork image URL. When omitted, a placeholder is rendered. */
+    image?: string;
     /** Game title */
     title: string;
     /** Game subtitle (e.g., genre tags) */
     subtitle?: string;
     /** Size variant of the card */
     size?: GameCardSize;
+    /** Aspect ratio of the image area (default "16:9") */
+    imageRatio?: GameCardImageRatio;
+    /** Custom width for the image area when imageRatio is "custom" */
+    customImageWidth?: number;
+    /** Custom height for the image area when imageRatio is "custom" */
+    customImageHeight?: number;
     /** Custom badge element displayed above tags on the image (top-left corner) */
     badge?: React.ReactNode;
     /** Custom content for top-left corner tags */
     tagsTopLeft?: React.ReactNode;
     /** Custom content for top-right corner tags */
     tagsTopRight?: React.ReactNode;
+    /** Custom content for bottom-left corner tags */
+    tagsBottomLeft?: React.ReactNode;
+    /** Custom content for bottom-right corner tags */
+    tagsBottomRight?: React.ReactNode;
     /** Custom trailing content (button, price, etc.) - overrides buttonText if provided */
     trailing?: React.ReactNode;
     /** Button label text (used if trailing is not provided) */
@@ -25,6 +38,14 @@ interface GameCardProps extends ThemeOverrideProps {
     onButtonClick?: () => void;
     /** Whether the button is disabled (used if trailing is not provided) */
     buttonDisabled?: boolean;
+    /** Footer layout direction (default "horizontal") */
+    layout?: GameCardLayout;
+    /** Platform variant affecting footer spacing (default "mobile") */
+    platform?: GameCardPlatform;
+    /** When true, hides the footer (title/subtitle/button area) entirely. Useful for image-only cards like XWP presets. */
+    hideFooter?: boolean;
+    /** Hover overlay content rendered at the bottom of the image area on hover */
+    hoverContent?: React.ReactNode;
     /** Card click handler */
     onPress?: () => void;
     /** Alt text for game image */
@@ -35,4 +56,4 @@ interface GameCardProps extends ThemeOverrideProps {
 
 declare const GameCard: React.FC<GameCardProps>;
 
-export { GameCard, type GameCardProps, type GameCardSize };
+export { GameCard, type GameCardImageRatio, type GameCardLayout, type GameCardPlatform, type GameCardProps, type GameCardSize };

package/native/index.d.ts

@@ -2,21 +2,34 @@ import React from 'react';
 import { ThemeOverrideProps } from '@xsolla/xui-core';
 
 type GameCardSize = "lg" | "md" | "sm";
+type GameCardImageRatio = "16:9" | "1:1" | "2:3" | "3:2" | "4:3" | "9:16" | "custom";
+type GameCardLayout = "horizontal" | "vertical";
+type GameCardPlatform = "mobile" | "desktop";
 interface GameCardProps extends ThemeOverrideProps {
-    /** Game artwork image URL */
-    image: string;
+    /** Game artwork image URL. When omitted, a placeholder is rendered. */
+    image?: string;
     /** Game title */
     title: string;
     /** Game subtitle (e.g., genre tags) */
     subtitle?: string;
     /** Size variant of the card */
     size?: GameCardSize;
+    /** Aspect ratio of the image area (default "16:9") */
+    imageRatio?: GameCardImageRatio;
+    /** Custom width for the image area when imageRatio is "custom" */
+    customImageWidth?: number;
+    /** Custom height for the image area when imageRatio is "custom" */
+    customImageHeight?: number;
     /** Custom badge element displayed above tags on the image (top-left corner) */
     badge?: React.ReactNode;
     /** Custom content for top-left corner tags */
     tagsTopLeft?: React.ReactNode;
     /** Custom content for top-right corner tags */
     tagsTopRight?: React.ReactNode;
+    /** Custom content for bottom-left corner tags */
+    tagsBottomLeft?: React.ReactNode;
+    /** Custom content for bottom-right corner tags */
+    tagsBottomRight?: React.ReactNode;
     /** Custom trailing content (button, price, etc.) - overrides buttonText if provided */
     trailing?: React.ReactNode;
     /** Button label text (used if trailing is not provided) */
@@ -25,6 +38,14 @@ interface GameCardProps extends ThemeOverrideProps {
     onButtonClick?: () => void;
     /** Whether the button is disabled (used if trailing is not provided) */
     buttonDisabled?: boolean;
+    /** Footer layout direction (default "horizontal") */
+    layout?: GameCardLayout;
+    /** Platform variant affecting footer spacing (default "mobile") */
+    platform?: GameCardPlatform;
+    /** When true, hides the footer (title/subtitle/button area) entirely. Useful for image-only cards like XWP presets. */
+    hideFooter?: boolean;
+    /** Hover overlay content rendered at the bottom of the image area on hover */
+    hoverContent?: React.ReactNode;
     /** Card click handler */
     onPress?: () => void;
     /** Alt text for game image */
@@ -35,4 +56,4 @@ interface GameCardProps extends ThemeOverrideProps {
 
 declare const GameCard: React.FC<GameCardProps>;
 
-export { GameCard, type GameCardProps, type GameCardSize };
+export { GameCard, type GameCardImageRatio, type GameCardLayout, type GameCardPlatform, type GameCardProps, type GameCardSize };

package/native/index.js

@@ -34,6 +34,9 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
+// src/GameCard.tsx
+var import_react2 = require("react");
+
 // ../../foundation/primitives-native/src/Box.tsx
 var import_react_native = require("react-native");
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -381,76 +384,77 @@ var isWeb = false;
 // src/GameCard.tsx
 var import_xui_core = require("@xsolla/xui-core");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var getSizeConfig = (size) => {
+var IMAGE_RATIOS = {
+  "16:9": 240 / 135,
+  "1:1": 1,
+  "2:3": 240 / 360,
+  "3:2": 240 / 160,
+  "4:3": 360 / 270,
+  "9:16": 135 / 240
+};
+var BORDER_RADIUS = 8;
+var TAG_INSET = 8;
+var TAG_GAP = 4;
+var getSizeConfig = (size, platform) => {
+  const isDesktop = platform === "desktop";
   switch (size) {
     case "lg":
       return {
-        imageAspectRatio: 366 / 206,
-        titleFontSize: 16,
-        titleLineHeight: 20,
-        subtitleFontSize: 12,
-        subtitleLineHeight: 18,
-        padding: 8,
-        footerPadding: 12,
-        footerGap: 12,
-        tagGap: 4,
-        buttonHeight: 32,
-        buttonPaddingX: 20,
-        buttonFontSize: 12,
-        buttonLineHeight: 14,
-        borderRadius: 8,
-        fadeHeight: 64
+        titleFontSize: isDesktop ? 16 : 14,
+        titleLineHeight: isDesktop ? 20 : 18,
+        subtitleFontSize: isDesktop ? 12 : 11,
+        subtitleLineHeight: isDesktop ? 18 : 14
       };
     case "md":
       return {
-        imageAspectRatio: 280 / 158,
-        titleFontSize: 14,
-        titleLineHeight: 18,
-        subtitleFontSize: 11,
-        subtitleLineHeight: 16,
-        padding: 6,
-        footerPadding: 8,
-        footerGap: 8,
-        tagGap: 3,
-        buttonHeight: 28,
-        buttonPaddingX: 16,
-        buttonFontSize: 11,
-        buttonLineHeight: 13,
-        borderRadius: 8,
-        fadeHeight: 48
+        titleFontSize: isDesktop ? 16 : 14,
+        titleLineHeight: isDesktop ? 20 : 18,
+        subtitleFontSize: isDesktop ? 12 : 11,
+        subtitleLineHeight: isDesktop ? 18 : 14
       };
     case "sm":
       return {
-        imageAspectRatio: 200 / 113,
         titleFontSize: 12,
         titleLineHeight: 16,
         subtitleFontSize: 10,
-        subtitleLineHeight: 14,
-        padding: 4,
-        footerPadding: 6,
-        footerGap: 6,
-        tagGap: 2,
-        buttonHeight: 24,
-        buttonPaddingX: 12,
-        buttonFontSize: 10,
-        buttonLineHeight: 12,
-        borderRadius: 8,
-        fadeHeight: 32
+        subtitleLineHeight: 14
       };
   }
 };
+var getFooterPadding = (platform) => platform === "desktop" ? 16 : 12;
+var getFooterGap = () => 12;
+var resolveAspectRatio = (imageRatio, customWidth, customHeight) => {
+  if (imageRatio === "custom" && customWidth && customHeight) {
+    return customWidth / customHeight;
+  }
+  return IMAGE_RATIOS[imageRatio] ?? IMAGE_RATIOS["16:9"];
+};
+var ellipsisStyle = isWeb ? {
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+} : void 0;
 var GameCard = ({
   image,
   title,
   subtitle,
   size = "lg",
+  imageRatio = "16:9",
+  customImageWidth,
+  customImageHeight,
   badge,
   tagsTopLeft,
   tagsTopRight,
+  tagsBottomLeft,
+  tagsBottomRight,
   trailing,
   buttonText,
   onButtonClick,
   buttonDisabled,
+  layout = "horizontal",
+  platform = "mobile",
+  hideFooter = false,
+  hoverContent,
   onPress,
   imageAlt,
   className,
@@ -458,8 +462,247 @@ var GameCard = ({
   themeProductContext
 }) => {
   const { theme } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
-  const config = getSizeConfig(size);
+  const config = getSizeConfig(size, platform);
+  const footerPadding = getFooterPadding(platform);
+  const footerGap = getFooterGap();
+  const aspectRatio = resolveAspectRatio(
+    imageRatio,
+    customImageWidth,
+    customImageHeight
+  );
+  const [isHovered, setIsHovered] = (0, import_react2.useState)(false);
   const wrapperProps = onPress ? { onPress } : {};
+  const hoverHandlers = isWeb && hoverContent ? {
+    onMouseEnter: () => setIsHovered(true),
+    onMouseLeave: () => setIsHovered(false)
+  } : {};
+  const isHorizontal = layout === "horizontal";
+  const renderPlaceholder = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    Box,
+    {
+      width: "100%",
+      height: "100%",
+      backgroundColor: theme.colors.background.secondary,
+      alignItems: "center",
+      justifyContent: "center",
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        Box,
+        {
+          width: imageRatio === "16:9" || imageRatio === "9:16" || imageRatio === "custom" ? 48 : 56,
+          height: imageRatio === "16:9" || imageRatio === "9:16" || imageRatio === "custom" ? 48 : 56,
+          alignItems: "center",
+          justifyContent: "center",
+          style: { opacity: 0.4 },
+          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            Text,
+            {
+              color: theme.colors.content.tertiary,
+              fontSize: 24,
+              style: { textAlign: "center" },
+              children: "\u{1F5BC}"
+            }
+          )
+        }
+      )
+    }
+  );
+  const renderImage = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    Box,
+    {
+      position: "relative",
+      width: "100%",
+      overflow: "hidden",
+      style: { aspectRatio },
+      ...hoverHandlers,
+      children: [
+        image ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            Box,
+            {
+              as: "img",
+              src: image,
+              alt: imageAlt || title,
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: "100%",
+              style: isWeb ? {
+                objectFit: "cover",
+                pointerEvents: "none"
+              } : void 0
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            LinearGradient,
+            {
+              colors: ["transparent", "rgba(0, 0, 0, 0.48)"],
+              start: { x: 0, y: 0 },
+              end: { x: 0, y: 1 },
+              position: "absolute",
+              bottom: 0,
+              left: 0,
+              right: 0,
+              height: "100%",
+              style: { maxHeight: 206 }
+            }
+          )
+        ] }) : renderPlaceholder(),
+        (badge || tagsTopLeft) && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          Box,
+          {
+            position: "absolute",
+            top: TAG_INSET,
+            left: TAG_INSET,
+            flexDirection: "column",
+            gap: TAG_GAP,
+            alignItems: "flex-start",
+            children: [
+              badge,
+              tagsTopLeft
+            ]
+          }
+        ),
+        tagsTopRight && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          Box,
+          {
+            position: "absolute",
+            top: TAG_INSET,
+            right: TAG_INSET,
+            flexDirection: "column",
+            gap: TAG_GAP,
+            alignItems: "flex-end",
+            children: tagsTopRight
+          }
+        ),
+        tagsBottomLeft && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          Box,
+          {
+            position: "absolute",
+            bottom: TAG_INSET,
+            left: TAG_INSET,
+            flexDirection: "column",
+            gap: TAG_GAP,
+            alignItems: "flex-start",
+            children: tagsBottomLeft
+          }
+        ),
+        tagsBottomRight && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          Box,
+          {
+            position: "absolute",
+            bottom: TAG_INSET,
+            right: TAG_INSET,
+            flexDirection: "column",
+            gap: TAG_GAP,
+            alignItems: "flex-end",
+            children: tagsBottomRight
+          }
+        ),
+        isWeb && hoverContent && isHovered && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          Box,
+          {
+            position: "absolute",
+            bottom: 0,
+            left: 0,
+            right: 0,
+            height: 72,
+            flexDirection: "row",
+            alignItems: "center",
+            gap: 8,
+            padding: 16,
+            borderRadius: 4,
+            overflow: "hidden",
+            style: {
+              backdropFilter: "blur(15px)",
+              WebkitBackdropFilter: "blur(15px)",
+              backgroundColor: theme.colors.layer.float
+            },
+            children: hoverContent
+          }
+        )
+      ]
+    }
+  );
+  const renderFooter = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    Box,
+    {
+      backgroundColor: theme.colors.overlay.mono,
+      padding: footerPadding,
+      flexDirection: isHorizontal ? "row" : "column",
+      alignItems: isHorizontal ? "center" : "flex-start",
+      justifyContent: isHorizontal ? void 0 : "center",
+      gap: footerGap,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          Box,
+          {
+            flex: isHorizontal ? 1 : void 0,
+            width: isHorizontal ? void 0 : "100%",
+            flexDirection: "column",
+            style: { minWidth: 0 },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                Text,
+                {
+                  color: theme.colors.content.primary,
+                  fontSize: config.titleFontSize,
+                  lineHeight: config.titleLineHeight,
+                  fontWeight: "500",
+                  numberOfLines: 1,
+                  style: ellipsisStyle,
+                  children: title
+                }
+              ),
+              subtitle && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                Text,
+                {
+                  color: theme.colors.content.tertiary,
+                  fontSize: config.subtitleFontSize,
+                  lineHeight: config.subtitleLineHeight,
+                  fontWeight: "400",
+                  numberOfLines: 1,
+                  style: ellipsisStyle,
+                  children: subtitle
+                }
+              )
+            ]
+          }
+        ),
+        trailing,
+        !trailing && buttonText && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          Box,
+          {
+            onPress: buttonDisabled ? void 0 : onButtonClick,
+            backgroundColor: theme.colors.control.mono.secondary.bg,
+            borderRadius: BORDER_RADIUS,
+            height: 40,
+            paddingHorizontal: 20,
+            alignItems: "center",
+            justifyContent: "center",
+            style: isWeb ? {
+              opacity: buttonDisabled ? 0.4 : 1,
+              backdropFilter: "blur(30px)",
+              WebkitBackdropFilter: "blur(30px)",
+              border: `1px solid ${theme.colors.control.mono.secondary.border}`,
+              cursor: buttonDisabled ? "not-allowed" : onButtonClick ? "pointer" : "default"
+            } : { opacity: buttonDisabled ? 0.4 : 1 },
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              Text,
+              {
+                color: theme.colors.control.mono.text.secondary,
+                fontSize: 14,
+                lineHeight: 18,
+                fontWeight: "500",
+                style: { letterSpacing: 0.4 },
+                children: buttonText
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     Box,
     {
@@ -470,170 +713,22 @@ var GameCard = ({
       children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
         Box,
         {
-          backgroundColor: theme.colors.background.primary,
-          borderRadius: config.borderRadius,
+          borderRadius: BORDER_RADIUS,
           overflow: "hidden",
           flexDirection: "column",
           style: isWeb ? {
-            boxShadow: theme.shadow.surface,
-            borderRadius: `${config.borderRadius}px`,
-            overflow: "hidden"
+            borderRadius: `${BORDER_RADIUS}px`,
+            overflow: "hidden",
+            border: `1px solid ${theme.colors.border.secondary}`
           } : {
-            shadowColor: "#070708",
-            shadowOffset: { width: 0, height: 2 },
-            shadowOpacity: 0.15,
-            shadowRadius: 6,
-            elevation: 4,
-            borderRadius: config.borderRadius,
-            overflow: "hidden"
+            borderRadius: BORDER_RADIUS,
+            overflow: "hidden",
+            borderWidth: 1,
+            borderColor: theme.colors.border.secondary
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-              Box,
-              {
-                position: "relative",
-                width: "100%",
-                overflow: "hidden",
-                style: {
-                  aspectRatio: config.imageAspectRatio,
-                  borderTopLeftRadius: config.borderRadius,
-                  borderTopRightRadius: config.borderRadius
-                },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                    Box,
-                    {
-                      as: "img",
-                      src: image,
-                      alt: imageAlt || title,
-                      position: "absolute",
-                      top: 0,
-                      left: 0,
-                      width: "100%",
-                      height: "100%",
-                      style: isWeb ? { objectFit: "cover" } : void 0
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                    LinearGradient,
-                    {
-                      colors: ["transparent", "rgba(0, 0, 0, 0.48)"],
-                      start: { x: 0, y: 0 },
-                      end: { x: 0, y: 1 },
-                      position: "absolute",
-                      bottom: 0,
-                      left: 0,
-                      right: 0,
-                      height: config.fadeHeight
-                    }
-                  ),
-                  (badge || tagsTopLeft) && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-                    Box,
-                    {
-                      position: "absolute",
-                      top: config.padding,
-                      left: config.padding,
-                      flexDirection: "column",
-                      gap: config.tagGap,
-                      alignItems: "flex-start",
-                      children: [
-                        badge,
-                        tagsTopLeft
-                      ]
-                    }
-                  ),
-                  tagsTopRight && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                    Box,
-                    {
-                      position: "absolute",
-                      top: config.padding,
-                      right: config.padding,
-                      flexDirection: "column",
-                      gap: config.tagGap,
-                      alignItems: "flex-end",
-                      children: tagsTopRight
-                    }
-                  )
-                ]
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-              Box,
-              {
-                backgroundColor: theme.colors.overlay.mono,
-                padding: config.footerPadding,
-                flexDirection: "row",
-                alignItems: "center",
-                gap: config.footerGap,
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Box, { flex: 1, flexDirection: "column", style: { minWidth: 0 }, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                      Text,
-                      {
-                        color: theme.colors.content.primary,
-                        fontSize: config.titleFontSize,
-                        lineHeight: config.titleLineHeight,
-                        fontWeight: "500",
-                        numberOfLines: 1,
-                        style: isWeb ? {
-                          overflow: "hidden",
-                          textOverflow: "ellipsis",
-                          whiteSpace: "nowrap"
-                        } : void 0,
-                        children: title
-                      }
-                    ),
-                    subtitle && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                      Text,
-                      {
-                        color: theme.colors.content.tertiary,
-                        fontSize: config.subtitleFontSize,
-                        lineHeight: config.subtitleLineHeight,
-                        fontWeight: "400",
-                        numberOfLines: 1,
-                        style: isWeb ? {
-                          overflow: "hidden",
-                          textOverflow: "ellipsis",
-                          whiteSpace: "nowrap"
-                        } : void 0,
-                        children: subtitle
-                      }
-                    )
-                  ] }),
-                  trailing,
-                  !trailing && buttonText && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                    Box,
-                    {
-                      onPress: buttonDisabled ? void 0 : onButtonClick,
-                      backgroundColor: theme.colors.control.mono.secondary.bg,
-                      borderRadius: config.borderRadius,
-                      height: config.buttonHeight,
-                      paddingHorizontal: config.buttonPaddingX,
-                      alignItems: "center",
-                      justifyContent: "center",
-                      opacity: buttonDisabled ? 0.4 : 1,
-                      style: isWeb ? {
-                        backdropFilter: "blur(30px)",
-                        WebkitBackdropFilter: "blur(30px)",
-                        border: `1px solid ${theme.colors.control.mono.secondary.border}`,
-                        cursor: buttonDisabled ? "not-allowed" : onButtonClick ? "pointer" : "default"
-                      } : void 0,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                        Text,
-                        {
-                          color: theme.colors.control.mono.text.secondary,
-                          fontSize: config.buttonFontSize,
-                          lineHeight: config.buttonLineHeight,
-                          fontWeight: "500",
-                          letterSpacing: 0.4,
-                          children: buttonText
-                        }
-                      )
-                    }
-                  )
-                ]
-              }
-            )
+            renderImage(),
+            !hideFooter && renderFooter()
           ]
         }
       )