@xsolla/xui-b2c-currency-tag 0.211.0

package/README.md

@@ -0,0 +1,3 @@
+# @xsolla/xui-b2c-currency-tag
+
+B2C currency tag — a compact chip pairing an Xsolla virtual-currency icon with an amount, for prices and rewards.

package/native/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/native/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 };

package/native/index.js

@@ -0,0 +1,475 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  CURRENCY_TAG_METRICS: () => CURRENCY_TAG_METRICS,
+  CURRENCY_TAG_PALETTE: () => CURRENCY_TAG_PALETTE,
+  CURRENCY_TAG_SOLID_CONTENT_COLOR: () => CURRENCY_TAG_SOLID_CONTENT_COLOR,
+  CurrencyTag: () => CurrencyTag
+});
+module.exports = __toCommonJS(index_exports);
+
+// ../../foundation/primitives-native/src/Box.tsx
+var import_react_native = require("react-native");
+var import_jsx_runtime = require("react/jsx-runtime");
+var roleToAccessibilityRole = {
+  button: "button",
+  link: "link",
+  img: "image",
+  image: "image",
+  summary: "summary",
+  switch: "switch",
+  checkbox: "checkbox",
+  radio: "radio",
+  heading: "header",
+  text: "text",
+  search: "search",
+  alert: "alert",
+  none: "none",
+  presentation: "none",
+  progressbar: "progressbar",
+  scrollbar: "scrollbar",
+  adjustable: "adjustable",
+  tab: "tab",
+  menu: "menu",
+  menuitem: "menuitem",
+  list: "list",
+  timer: "timer"
+};
+var toGapValue = (gap) => {
+  if (gap === void 0) return void 0;
+  if (typeof gap === "number") return gap;
+  const pxMatch = /^(\d+(?:\.\d+)?)px$/.exec(gap);
+  if (pxMatch) return Number(pxMatch[1]);
+  const asNumber = Number(gap);
+  return Number.isFinite(asNumber) ? asNumber : void 0;
+};
+var Box = ({
+  children,
+  onPress,
+  onLayout,
+  onMoveShouldSetResponder,
+  onResponderGrant,
+  onResponderMove,
+  onResponderRelease,
+  onResponderTerminate,
+  backgroundColor,
+  borderColor,
+  borderWidth,
+  borderBottomWidth,
+  borderBottomColor,
+  borderTopWidth,
+  borderTopColor,
+  borderLeftWidth,
+  borderLeftColor,
+  borderRightWidth,
+  borderRightColor,
+  borderRadius,
+  borderStyle,
+  height,
+  padding,
+  paddingHorizontal,
+  paddingVertical,
+  margin,
+  marginTop,
+  marginBottom,
+  marginLeft,
+  marginRight,
+  flexDirection,
+  flexWrap,
+  alignItems,
+  justifyContent,
+  alignSelf,
+  position,
+  top,
+  bottom,
+  left,
+  right,
+  width,
+  minWidth,
+  minHeight,
+  maxWidth,
+  maxHeight,
+  flex,
+  flexShrink,
+  gap,
+  overflow,
+  opacity,
+  zIndex,
+  hoverStyle,
+  pressStyle,
+  style,
+  disabled,
+  "data-testid": dataTestId,
+  testID,
+  as,
+  src,
+  alt,
+  ...rest
+}) => {
+  const getContainerStyle = (pressed) => ({
+    backgroundColor: pressed && pressStyle?.backgroundColor ? pressStyle.backgroundColor : backgroundColor,
+    borderColor,
+    borderWidth,
+    borderBottomWidth,
+    borderBottomColor,
+    borderTopWidth,
+    borderTopColor,
+    borderLeftWidth,
+    borderLeftColor,
+    borderRightWidth,
+    borderRightColor,
+    borderRadius,
+    borderStyle,
+    overflow,
+    opacity: opacity ?? (disabled ? 0.5 : void 0),
+    zIndex,
+    height,
+    width,
+    minWidth,
+    minHeight,
+    maxWidth,
+    maxHeight,
+    padding,
+    paddingHorizontal,
+    paddingVertical,
+    margin,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    flexDirection,
+    flexWrap,
+    alignItems,
+    justifyContent,
+    alignSelf,
+    position,
+    top,
+    bottom,
+    left,
+    right,
+    flex,
+    flexShrink,
+    gap: toGapValue(gap),
+    ...style
+  });
+  const finalTestID = dataTestId || testID;
+  const {
+    role,
+    tabIndex,
+    onKeyDown,
+    onKeyUp,
+    "aria-label": ariaLabel,
+    "aria-labelledby": _ariaLabelledBy,
+    "aria-current": _ariaCurrent,
+    "aria-disabled": ariaDisabled,
+    "aria-live": ariaLive,
+    "aria-busy": ariaBusy,
+    className,
+    "data-testid": _dataTestId,
+    cursor: _cursor,
+    type: _type,
+    ...nativeRest
+  } = rest;
+  const accessibilityRole = typeof role === "string" && roleToAccessibilityRole[role] || (as === "button" ? "button" : void 0);
+  const isDisabled = Boolean(disabled || ariaDisabled);
+  const accessibilityState = {
+    disabled: isDisabled || void 0,
+    busy: Boolean(ariaBusy) || void 0
+  };
+  const accessibilityLiveRegion = ariaLive === "polite" || ariaLive === "assertive" ? ariaLive : void 0;
+  if (as === "img" && src) {
+    const imageStyle = {
+      width,
+      height,
+      borderRadius,
+      position,
+      top,
+      bottom,
+      left,
+      right,
+      ...style
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_native.Image,
+      {
+        source: { uri: src },
+        style: imageStyle,
+        testID: finalTestID,
+        accessibilityLabel: typeof ariaLabel === "string" ? ariaLabel : alt,
+        resizeMode: "cover",
+        ...nativeRest
+      }
+    );
+  }
+  if (onPress || as === "button") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_native.Pressable,
+      {
+        onPress: !isDisabled && onPress ? onPress : void 0,
+        disabled: isDisabled,
+        onLayout,
+        onMoveShouldSetResponder,
+        onResponderGrant,
+        onResponderMove,
+        onResponderRelease,
+        onResponderTerminate,
+        style: ({ pressed }) => getContainerStyle(pressed),
+        testID: finalTestID,
+        accessibilityRole,
+        accessibilityLabel: typeof ariaLabel === "string" ? ariaLabel : void 0,
+        accessibilityState,
+        accessibilityLiveRegion,
+        ...nativeRest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_native.View,
+    {
+      style: getContainerStyle(),
+      testID: finalTestID,
+      onLayout,
+      onMoveShouldSetResponder,
+      onResponderGrant,
+      onResponderMove,
+      onResponderRelease,
+      onResponderTerminate,
+      accessibilityRole,
+      accessibilityLabel: typeof ariaLabel === "string" ? ariaLabel : void 0,
+      accessibilityState,
+      accessibilityLiveRegion,
+      ...nativeRest,
+      children
+    }
+  );
+};
+
+// ../../foundation/primitives-native/src/Text.tsx
+var import_react_native2 = require("react-native");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var roleMap = {
+  alert: "alert",
+  heading: "header",
+  button: "button",
+  link: "link",
+  text: "text"
+};
+var parseNumericValue = (value) => {
+  if (value === void 0) return void 0;
+  if (typeof value === "number") return value;
+  const parsed = parseFloat(value);
+  return isNaN(parsed) ? void 0 : parsed;
+};
+var Text = ({
+  children,
+  color,
+  fontSize,
+  fontWeight,
+  fontFamily,
+  textAlign,
+  lineHeight,
+  numberOfLines,
+  id,
+  role,
+  testID,
+  "data-testid": dataTestId,
+  style: styleProp,
+  ...props
+}) => {
+  let resolvedFontFamily = fontFamily ? fontFamily.split(",")[0].replace(/['"]/g, "").trim() : void 0;
+  if (resolvedFontFamily === "Pilat Wide" || resolvedFontFamily === "Pilat Wide Bold" || resolvedFontFamily === "Aktiv Grotesk") {
+    resolvedFontFamily = void 0;
+  }
+  const incomingStyle = import_react_native2.StyleSheet.flatten(styleProp);
+  const baseStyle = {
+    color: color ?? incomingStyle?.color,
+    fontSize: typeof fontSize === "number" ? fontSize : void 0,
+    fontWeight,
+    fontFamily: resolvedFontFamily,
+    textDecorationLine: props.textDecoration,
+    textAlign: textAlign ?? incomingStyle?.textAlign,
+    lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),
+    marginTop: parseNumericValue(
+      incomingStyle?.marginTop
+    ),
+    marginBottom: parseNumericValue(
+      incomingStyle?.marginBottom
+    )
+  };
+  const accessibilityRole = role ? roleMap[role] : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react_native2.Text,
+    {
+      style: baseStyle,
+      numberOfLines,
+      testID: dataTestId || testID || id,
+      accessibilityRole,
+      children
+    }
+  );
+};
+
+// src/CurrencyTag.tsx
+var import_xui_core = require("@xsolla/xui-core");
+var import_xui_icons_currency = require("@xsolla/xui-icons-currency");
+
+// src/tokens.ts
+var CURRENCY_TAG_PALETTE = {
+  "xsolla-points": { bg: "#55dcf6", border: "#31cae8" },
+  "xsolla-tickets": { bg: "#ffb2bf", border: "#ff8095" },
+  "xsolla-gold": { bg: "#f6db55", border: "#e8ca31" },
+  "play-time": { bg: "#9580ff", border: "#7055f6" },
+  "green-orb": { bg: "#d9ff66", border: "#c7f53d" }
+};
+var CURRENCY_TAG_SOLID_CONTENT_COLOR = "#000000";
+var CURRENCY_TAG_METRICS = {
+  height: 24,
+  paddingHorizontal: 4,
+  borderRadius: 4,
+  borderWidth: 1,
+  iconSize: 16,
+  textPaddingHorizontal: 2,
+  textGap: 3,
+  fontSize: 14,
+  lineHeight: 16,
+  fontWeight: 500,
+  /** Opacity applied to the struck-through sublabel. */
+  sublabelOpacity: 0.48
+};
+
+// src/CurrencyTag.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var CURRENCY_ICONS = {
+  "xsolla-points": import_xui_icons_currency.XsollaPoint,
+  "xsolla-tickets": import_xui_icons_currency.XsollaTicket,
+  "xsolla-gold": import_xui_icons_currency.XsollaGold,
+  "play-time": import_xui_icons_currency.PlayTime,
+  "green-orb": import_xui_icons_currency.GreenOrb
+};
+var CURRENCY_LABELS = {
+  "xsolla-points": "Xsolla Points",
+  "xsolla-tickets": "Xsolla Tickets",
+  "xsolla-gold": "Xsolla Gold",
+  "play-time": "Play Time",
+  "green-orb": "Green Orb"
+};
+var CurrencyTag = ({
+  currency = "xsolla-points",
+  size = "sm",
+  value,
+  sublabel,
+  iconPosition = "left",
+  inverted = false,
+  icon,
+  "aria-label": ariaLabel,
+  testID,
+  themeMode,
+  themeProductContext = "b2c"
+}) => {
+  const { theme } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
+  const sizeStyles = theme.sizing.tag(size);
+  const palette = CURRENCY_TAG_PALETTE[currency];
+  const backgroundColor = inverted ? theme.colors.background.primary : palette.bg;
+  const borderColor = inverted ? theme.colors.border.secondary : palette.border;
+  const contentColor = inverted ? palette.bg : CURRENCY_TAG_SOLID_CONTENT_COLOR;
+  const CurrencyIcon = CURRENCY_ICONS[currency];
+  const renderedIcon = icon !== void 0 ? icon : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    CurrencyIcon,
+    {
+      variant: "mono",
+      size: sizeStyles.iconSize,
+      color: contentColor,
+      "aria-hidden": true
+    }
+  );
+  const text = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    Box,
+    {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      paddingLeft: CURRENCY_TAG_METRICS.textPaddingHorizontal,
+      paddingRight: CURRENCY_TAG_METRICS.textPaddingHorizontal,
+      gap: CURRENCY_TAG_METRICS.textGap,
+      children: [
+        sublabel !== void 0 && sublabel !== null && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          Text,
+          {
+            color: contentColor,
+            fontSize: sizeStyles.fontSize,
+            lineHeight: sizeStyles.lineHeight,
+            fontWeight: CURRENCY_TAG_METRICS.fontWeight,
+            textDecoration: "line-through",
+            whiteSpace: "nowrap",
+            style: { opacity: CURRENCY_TAG_METRICS.sublabelOpacity },
+            testID: testID ? `${testID}-sublabel` : "currency-tag-sublabel",
+            children: sublabel
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          Text,
+          {
+            color: contentColor,
+            fontSize: sizeStyles.fontSize,
+            lineHeight: sizeStyles.lineHeight,
+            fontWeight: CURRENCY_TAG_METRICS.fontWeight,
+            whiteSpace: "nowrap",
+            testID: testID ? `${testID}-value` : "currency-tag-value",
+            children: value
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    Box,
+    {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      height: sizeStyles.height,
+      paddingLeft: sizeStyles.padding,
+      paddingRight: sizeStyles.padding,
+      borderRadius: sizeStyles.radius,
+      borderWidth: sizeStyles.borderWidth,
+      borderStyle: "solid",
+      borderColor,
+      backgroundColor,
+      "aria-label": ariaLabel || CURRENCY_LABELS[currency],
+      testID: testID || "currency-tag",
+      children: [
+        iconPosition === "left" && renderedIcon,
+        text,
+        iconPosition === "right" && renderedIcon
+      ]
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CURRENCY_TAG_METRICS,
+  CURRENCY_TAG_PALETTE,
+  CURRENCY_TAG_SOLID_CONTENT_COLOR,
+  CurrencyTag
+});
+//# sourceMappingURL=index.js.map