@xsolla/xui-b2c-backpack-item-card 0.0.0-stage → 0.230.0

package/native/index.d.mts

@@ -0,0 +1,71 @@
+import React, { ReactNode } from 'react';
+import { ThemeOverrideProps } from '@xsolla/xui-core';
+import { TagLabelProps } from '@xsolla/xui-tag-label';
+
+/** Figma `Rarity`. Tints the top-centre glow of the slot. */
+type BackpackItemCardRarity = "common" | "uncommon" | "rare" | "epic" | "legendary";
+/**
+ * Figma `State`.
+ * - `default` — filled slot at rest.
+ * - `hover` — pointer over the slot (applied automatically on web when the card is interactive).
+ * - `selected` — the slot is the current selection.
+ * - `drag` — the slot is being dragged (lifted, with a drop shadow).
+ * - `dragSlot` — placeholder left behind / drop target while an item is dragged.
+ * - `empty` — inventory slot with no item.
+ * - `skeleton` — loading placeholder.
+ */
+type BackpackItemCardState = "default" | "hover" | "selected" | "drag" | "dragSlot" | "empty" | "skeleton";
+/** Figma `Backpack-item-Desktop` (200 px) vs `Backpack-item-Mobile` (181 px). */
+type BackpackItemCardSize = "default" | "compact";
+/** Figma `Image`: a flat render, or a 3D asset (adds the 3D indicator). */
+type BackpackItemCardImageType = "static" | "3d";
+interface BackpackItemCardProps extends ThemeOverrideProps {
+    /** Item name, shown bottom-left. Required for filled states. */
+    name?: string;
+    /** Quantity shown in the counter chip bottom-right. Hidden when omitted. */
+    count?: number | string;
+    /** Item artwork URL. Rendered centred with `object-fit: contain`. */
+    imageSrc?: string;
+    /** Alt text for the artwork. Decorative by default (the card is already named). */
+    imageAlt?: string;
+    /** Custom artwork node (e.g. a 3D viewer). Takes precedence over `imageSrc`. */
+    image?: ReactNode;
+    /** Figma `Image`. `"3d"` shows the 3D indicator under the download button. */
+    imageType?: BackpackItemCardImageType;
+    /** TagLabel ID series, e.g. `"XLA"`. */
+    series?: string;
+    /** TagLabel ID number, e.g. `"-001-001"`. */
+    number?: string;
+    /**
+     * Extra props forwarded to the compact `TagLabel` (top-left), e.g.
+     * `entityType` or `entityIcon`. `series` / `number` above win over these.
+     */
+    tagLabelProps?: Partial<TagLabelProps>;
+    /** Figma `Rarity`. Defaults to `common`. */
+    rarity?: BackpackItemCardRarity;
+    /** Figma `State`. Defaults to `default`. */
+    state?: BackpackItemCardState;
+    /** `default` = 200 px desktop slot, `compact` = 181 px mobile slot. */
+    size?: BackpackItemCardSize;
+    /**
+     * Overrides the square edge length in px. Figma constrains desktop slots to
+     * 181–380 px and mobile slots to 146–200 px; values are not clamped.
+     */
+    width?: number;
+    /** Makes the slot interactive (select / open the item). */
+    onPress?: () => void;
+    /**
+     * Download handler. When set, a brand `Tag` (xs, icon only) renders top-right.
+     * Pressing it never triggers `onPress`.
+     */
+    onDownload?: () => void;
+    /** Accessible label for the download button. Defaults to `"Download <name>"`. */
+    downloadLabel?: string;
+    /** Accessible name for the slot. Defaults per state (name, rarity, count / "Empty slot" / "Loading item"). */
+    "aria-label"?: string;
+    testID?: string;
+}
+
+declare const BackpackItemCard: React.FC<BackpackItemCardProps>;
+
+export { BackpackItemCard, type BackpackItemCardImageType, type BackpackItemCardProps, type BackpackItemCardRarity, type BackpackItemCardSize, type BackpackItemCardState };

package/native/index.d.ts

@@ -0,0 +1,71 @@
+import React, { ReactNode } from 'react';
+import { ThemeOverrideProps } from '@xsolla/xui-core';
+import { TagLabelProps } from '@xsolla/xui-tag-label';
+
+/** Figma `Rarity`. Tints the top-centre glow of the slot. */
+type BackpackItemCardRarity = "common" | "uncommon" | "rare" | "epic" | "legendary";
+/**
+ * Figma `State`.
+ * - `default` — filled slot at rest.
+ * - `hover` — pointer over the slot (applied automatically on web when the card is interactive).
+ * - `selected` — the slot is the current selection.
+ * - `drag` — the slot is being dragged (lifted, with a drop shadow).
+ * - `dragSlot` — placeholder left behind / drop target while an item is dragged.
+ * - `empty` — inventory slot with no item.
+ * - `skeleton` — loading placeholder.
+ */
+type BackpackItemCardState = "default" | "hover" | "selected" | "drag" | "dragSlot" | "empty" | "skeleton";
+/** Figma `Backpack-item-Desktop` (200 px) vs `Backpack-item-Mobile` (181 px). */
+type BackpackItemCardSize = "default" | "compact";
+/** Figma `Image`: a flat render, or a 3D asset (adds the 3D indicator). */
+type BackpackItemCardImageType = "static" | "3d";
+interface BackpackItemCardProps extends ThemeOverrideProps {
+    /** Item name, shown bottom-left. Required for filled states. */
+    name?: string;
+    /** Quantity shown in the counter chip bottom-right. Hidden when omitted. */
+    count?: number | string;
+    /** Item artwork URL. Rendered centred with `object-fit: contain`. */
+    imageSrc?: string;
+    /** Alt text for the artwork. Decorative by default (the card is already named). */
+    imageAlt?: string;
+    /** Custom artwork node (e.g. a 3D viewer). Takes precedence over `imageSrc`. */
+    image?: ReactNode;
+    /** Figma `Image`. `"3d"` shows the 3D indicator under the download button. */
+    imageType?: BackpackItemCardImageType;
+    /** TagLabel ID series, e.g. `"XLA"`. */
+    series?: string;
+    /** TagLabel ID number, e.g. `"-001-001"`. */
+    number?: string;
+    /**
+     * Extra props forwarded to the compact `TagLabel` (top-left), e.g.
+     * `entityType` or `entityIcon`. `series` / `number` above win over these.
+     */
+    tagLabelProps?: Partial<TagLabelProps>;
+    /** Figma `Rarity`. Defaults to `common`. */
+    rarity?: BackpackItemCardRarity;
+    /** Figma `State`. Defaults to `default`. */
+    state?: BackpackItemCardState;
+    /** `default` = 200 px desktop slot, `compact` = 181 px mobile slot. */
+    size?: BackpackItemCardSize;
+    /**
+     * Overrides the square edge length in px. Figma constrains desktop slots to
+     * 181–380 px and mobile slots to 146–200 px; values are not clamped.
+     */
+    width?: number;
+    /** Makes the slot interactive (select / open the item). */
+    onPress?: () => void;
+    /**
+     * Download handler. When set, a brand `Tag` (xs, icon only) renders top-right.
+     * Pressing it never triggers `onPress`.
+     */
+    onDownload?: () => void;
+    /** Accessible label for the download button. Defaults to `"Download <name>"`. */
+    downloadLabel?: string;
+    /** Accessible name for the slot. Defaults per state (name, rarity, count / "Empty slot" / "Loading item"). */
+    "aria-label"?: string;
+    testID?: string;
+}
+
+declare const BackpackItemCard: React.FC<BackpackItemCardProps>;
+
+export { BackpackItemCard, type BackpackItemCardImageType, type BackpackItemCardProps, type BackpackItemCardRarity, type BackpackItemCardSize, type BackpackItemCardState };