@xsolla/xui-b2c-currency-tag 0.211.0

package/web/index.d.mts

@@ -0,0 +1,85 @@
+import React, { ReactNode } from 'react';
+import { ThemeOverrideProps, ComponentSize } from '@xsolla/xui-core';
+
+/**
+ * Xsolla virtual currency the tag represents. Maps 1:1 onto the `Type` variant
+ * of the Figma `CurrencyTag` component set.
+ */
+type CurrencyType = "xsolla-points" | "xsolla-tickets" | "xsolla-gold" | "play-time" | "green-orb";
+/** Which side of the value the currency icon sits on. Figma: `Icon`. */
+type CurrencyTagIconPosition = "left" | "right";
+/**
+ * Tag size. Figma's size matrix (`6767:26747`) is XS / S / M / L / XL —
+ * mapped onto the toolkit `ComponentSize` scale. Default `'sm'` matches the
+ * 24px `CurrencyTag` component set.
+ */
+type CurrencyTagSize = ComponentSize;
+interface CurrencyTagProps extends ThemeOverrideProps {
+    /** Currency the tag represents. Default: `'xsolla-points'` */
+    currency?: CurrencyType;
+    /**
+     * Size of the tag. Default: `'sm'` (the Figma `CurrencyTag` chip).
+     * Figma size matrix: XS / S / M / L / XL → `xs` / `sm` / `md` / `lg` / `xl`.
+     */
+    size?: CurrencyTagSize;
+    /** The amount shown in the tag, e.g. `250` or `'+250'` */
+    value?: ReactNode;
+    /**
+     * Previous amount, rendered struck through and dimmed before `value`.
+     * Figma: the `Sublable` boolean property.
+     */
+    sublabel?: ReactNode;
+    /** Side the currency icon sits on. Default: `'left'` */
+    iconPosition?: CurrencyTagIconPosition;
+    /**
+     * Renders the tag on the themed surface with accent-coloured content instead
+     * of a solid accent fill. Figma: `Inverted=Yes`. Default: `false`
+     */
+    inverted?: boolean;
+    /** Replaces the built-in currency icon. Pass `null` to render no icon. */
+    icon?: ReactNode;
+    /** Accessible label for the tag. Falls back to the rendered text. */
+    "aria-label"?: string;
+    /** Test identifier applied to the root element. */
+    testID?: string;
+}
+
+declare const CurrencyTag: React.FC<CurrencyTagProps>;
+
+/**
+ * Per-currency accent palette.
+ *
+ * Values are taken verbatim from the `CurrencyTag` component set in the B2C
+ * Figma library (node `1738:20679`). They are Figma-local variables with no
+ * counterpart in the shared XUI theme tokens, so they live here rather than in
+ * `@xsolla/xui-core`. `bg` is the solid tag fill of the non-inverted variant and
+ * doubles as the content colour of the inverted variant; `border` is the 1px
+ * inside stroke of the non-inverted variant.
+ */
+declare const CURRENCY_TAG_PALETTE: Record<CurrencyType, {
+    bg: string;
+    border: string;
+}>;
+/** Content colour on the solid (non-inverted) tag. Figma: `#000000`. */
+declare const CURRENCY_TAG_SOLID_CONTENT_COLOR = "#000000";
+/**
+ * Geometry extras that stay constant across sizes, plus the Figma `sm` snapshot
+ * (node `1738:20679`, 24px). Height, padding, radius, icon, and type scale
+ * with `theme.sizing.tag(size)` — XS / S / M / L / XL in Figma.
+ */
+declare const CURRENCY_TAG_METRICS: {
+    readonly height: 24;
+    readonly paddingHorizontal: 4;
+    readonly borderRadius: 4;
+    readonly borderWidth: 1;
+    readonly iconSize: 16;
+    readonly textPaddingHorizontal: 2;
+    readonly textGap: 3;
+    readonly fontSize: 14;
+    readonly lineHeight: 16;
+    readonly fontWeight: 500;
+    /** Opacity applied to the struck-through sublabel. */
+    readonly sublabelOpacity: 0.48;
+};
+
+export { CURRENCY_TAG_METRICS, CURRENCY_TAG_PALETTE, CURRENCY_TAG_SOLID_CONTENT_COLOR, CurrencyTag, type CurrencyTagIconPosition, type CurrencyTagProps, type CurrencyTagSize, type CurrencyType };

package/web/index.d.ts

@@ -0,0 +1,85 @@
+import React, { ReactNode } from 'react';
+import { ThemeOverrideProps, ComponentSize } from '@xsolla/xui-core';
+
+/**
+ * Xsolla virtual currency the tag represents. Maps 1:1 onto the `Type` variant
+ * of the Figma `CurrencyTag` component set.
+ */
+type CurrencyType = "xsolla-points" | "xsolla-tickets" | "xsolla-gold" | "play-time" | "green-orb";
+/** Which side of the value the currency icon sits on. Figma: `Icon`. */
+type CurrencyTagIconPosition = "left" | "right";
+/**
+ * Tag size. Figma's size matrix (`6767:26747`) is XS / S / M / L / XL —
+ * mapped onto the toolkit `ComponentSize` scale. Default `'sm'` matches the
+ * 24px `CurrencyTag` component set.
+ */
+type CurrencyTagSize = ComponentSize;
+interface CurrencyTagProps extends ThemeOverrideProps {
+    /** Currency the tag represents. Default: `'xsolla-points'` */
+    currency?: CurrencyType;
+    /**
+     * Size of the tag. Default: `'sm'` (the Figma `CurrencyTag` chip).
+     * Figma size matrix: XS / S / M / L / XL → `xs` / `sm` / `md` / `lg` / `xl`.
+     */
+    size?: CurrencyTagSize;
+    /** The amount shown in the tag, e.g. `250` or `'+250'` */
+    value?: ReactNode;
+    /**
+     * Previous amount, rendered struck through and dimmed before `value`.
+     * Figma: the `Sublable` boolean property.
+     */
+    sublabel?: ReactNode;
+    /** Side the currency icon sits on. Default: `'left'` */
+    iconPosition?: CurrencyTagIconPosition;
+    /**
+     * Renders the tag on the themed surface with accent-coloured content instead
+     * of a solid accent fill. Figma: `Inverted=Yes`. Default: `false`
+     */
+    inverted?: boolean;
+    /** Replaces the built-in currency icon. Pass `null` to render no icon. */
+    icon?: ReactNode;
+    /** Accessible label for the tag. Falls back to the rendered text. */
+    "aria-label"?: string;
+    /** Test identifier applied to the root element. */
+    testID?: string;
+}
+
+declare const CurrencyTag: React.FC<CurrencyTagProps>;
+
+/**
+ * Per-currency accent palette.
+ *
+ * Values are taken verbatim from the `CurrencyTag` component set in the B2C
+ * Figma library (node `1738:20679`). They are Figma-local variables with no
+ * counterpart in the shared XUI theme tokens, so they live here rather than in
+ * `@xsolla/xui-core`. `bg` is the solid tag fill of the non-inverted variant and
+ * doubles as the content colour of the inverted variant; `border` is the 1px
+ * inside stroke of the non-inverted variant.
+ */
+declare const CURRENCY_TAG_PALETTE: Record<CurrencyType, {
+    bg: string;
+    border: string;
+}>;
+/** Content colour on the solid (non-inverted) tag. Figma: `#000000`. */
+declare const CURRENCY_TAG_SOLID_CONTENT_COLOR = "#000000";
+/**
+ * Geometry extras that stay constant across sizes, plus the Figma `sm` snapshot
+ * (node `1738:20679`, 24px). Height, padding, radius, icon, and type scale
+ * with `theme.sizing.tag(size)` — XS / S / M / L / XL in Figma.
+ */
+declare const CURRENCY_TAG_METRICS: {
+    readonly height: 24;
+    readonly paddingHorizontal: 4;
+    readonly borderRadius: 4;
+    readonly borderWidth: 1;
+    readonly iconSize: 16;
+    readonly textPaddingHorizontal: 2;
+    readonly textGap: 3;
+    readonly fontSize: 14;
+    readonly lineHeight: 16;
+    readonly fontWeight: 500;
+    /** Opacity applied to the struck-through sublabel. */
+    readonly sublabelOpacity: 0.48;
+};
+
+export { CURRENCY_TAG_METRICS, CURRENCY_TAG_PALETTE, CURRENCY_TAG_SOLID_CONTENT_COLOR, CurrencyTag, type CurrencyTagIconPosition, type CurrencyTagProps, type CurrencyTagSize, type CurrencyType };