@xsolla/xui-b2c-card-selector 0.217.0

package/native/index.mjs

@@ -0,0 +1,752 @@
+// src/CardSelector.tsx
+import { useCallback, useEffect, useRef, useState } from "react";
+
+// ../../foundation/primitives-native/src/Box.tsx
+import {
+  View,
+  Pressable,
+  Image
+} from "react-native";
+import { jsx } from "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__ */ jsx(
+      Image,
+      {
+        source: { uri: src },
+        style: imageStyle,
+        testID: finalTestID,
+        accessibilityLabel: typeof ariaLabel === "string" ? ariaLabel : alt,
+        resizeMode: "cover",
+        ...nativeRest
+      }
+    );
+  }
+  if (onPress || as === "button") {
+    return /* @__PURE__ */ jsx(
+      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__ */ jsx(
+    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
+import {
+  Text as RNText,
+  StyleSheet
+} from "react-native";
+import { jsx as jsx2 } from "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 = 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__ */ jsx2(
+    RNText,
+    {
+      style: baseStyle,
+      numberOfLines,
+      testID: dataTestId || testID || id,
+      accessibilityRole,
+      children
+    }
+  );
+};
+
+// src/CardSelector.tsx
+import { useResolvedTheme, radiusScale } from "@xsolla/xui-core";
+
+// src/CardSelectorGroupContext.tsx
+import { createContext, useContext } from "react";
+var CardSelectorGroupContext = createContext(null);
+var useCardSelectorGroup = () => useContext(CardSelectorGroupContext);
+
+// src/CardSelector.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var platformMetrics = {
+  mobile: {
+    controlSize: "md",
+    controlBox: 18,
+    controlIcon: 12,
+    titleFontSize: 14,
+    titleLineHeight: 16,
+    descriptionFontSize: 12,
+    descriptionLineHeight: 16,
+    padding: 8,
+    gap: 8,
+    radius: 8
+  },
+  desktop: {
+    controlSize: "lg",
+    controlBox: 20,
+    controlIcon: 14,
+    titleFontSize: 16,
+    titleLineHeight: 20,
+    descriptionFontSize: 12,
+    descriptionLineHeight: 16,
+    padding: 10,
+    gap: 8,
+    radius: 8
+  }
+};
+var CheckGlyph = ({
+  size,
+  color
+}) => /* @__PURE__ */ jsx3(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 12 12",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    focusable: "false",
+    children: /* @__PURE__ */ jsx3(
+      "path",
+      {
+        d: "M10.6699 4.2959L6.00293 8.96387C5.72637 9.24043 5.27761 9.24031 5.00098 8.96387L2 5.96289L3.2959 4.66699L5.50098 6.87207L9.37402 3L10.6699 4.2959Z",
+        fill: color
+      }
+    )
+  }
+);
+var SelectionControl = ({ type, checked, disabled, metrics, theme }) => {
+  const check = theme.colors.control.check;
+  const faint = theme.colors.control.faint;
+  const backgroundColor = disabled ? check.bgDisable : checked ? check.bg : faint.bg;
+  const borderColor = disabled ? check.borderDisable : checked ? check.border : faint.border;
+  const iconColor = disabled ? theme.colors.control.text.disable : check.icon;
+  return /* @__PURE__ */ jsx3(
+    Box,
+    {
+      width: metrics.controlBox,
+      height: metrics.controlBox,
+      flexShrink: 0,
+      alignItems: "center",
+      justifyContent: "center",
+      borderWidth: 1,
+      borderStyle: "solid",
+      borderColor,
+      backgroundColor,
+      borderRadius: type === "radio" ? radiusScale["999"] : theme.shape.checkbox[metrics.controlSize].borderRadius,
+      "aria-hidden": "true",
+      testID: "card-selector-control",
+      children: checked && (type === "radio" ? /* @__PURE__ */ jsx3(
+        Box,
+        {
+          width: metrics.controlIcon,
+          height: metrics.controlIcon,
+          borderRadius: radiusScale["999"],
+          backgroundColor: iconColor
+        }
+      ) : /* @__PURE__ */ jsx3(CheckGlyph, { size: metrics.controlIcon, color: iconColor }))
+    }
+  );
+};
+var asPlainText = (value) => typeof value === "string" ? value : void 0;
+var CardSelector = ({
+  title,
+  description,
+  imageSrc,
+  imageAlt = "",
+  value,
+  type: typeProp,
+  control: controlProp,
+  platform: platformProp,
+  checked: checkedProp,
+  defaultChecked = false,
+  onChange,
+  state = "default",
+  disabled,
+  width = "100%",
+  "aria-label": ariaLabel,
+  testID,
+  themeMode,
+  themeProductContext = "b2c"
+}) => {
+  const { theme } = useResolvedTheme({ themeMode, themeProductContext });
+  const group = useCardSelectorGroup();
+  const nodeRef = useRef(null);
+  const type = typeProp ?? group?.type ?? "radio";
+  const control = controlProp ?? group?.control ?? "text";
+  const platform = platformProp ?? group?.platform ?? "mobile";
+  const metrics = platformMetrics[platform];
+  const isDisabled = Boolean(disabled) || state === "disabled" || Boolean(group?.disabled);
+  const [internalChecked, setInternalChecked] = useState(defaultChecked);
+  const isGroupControlled = group !== null && type === "radio" && value !== void 0;
+  const isControlled = checkedProp !== void 0;
+  const checked = isControlled ? Boolean(checkedProp) : isGroupControlled ? group?.selectedValue === value : internalChecked;
+  const toggle = useCallback(() => {
+    if (isDisabled) return;
+    if (type === "radio" && checked && isGroupControlled) return;
+    const next = type === "radio" ? true : !checked;
+    if (!isControlled && !isGroupControlled) {
+      setInternalChecked(next);
+    }
+    if (group && isGroupControlled && value !== void 0) {
+      group.select(value);
+    }
+    onChange?.(next, value);
+  }, [
+    checked,
+    group,
+    isControlled,
+    isDisabled,
+    isGroupControlled,
+    onChange,
+    type,
+    value
+  ]);
+  const focus = useCallback(() => {
+    const node = nodeRef.current;
+    if (node && typeof node.focus === "function") node.focus();
+  }, []);
+  const itemRef = useRef({
+    value: value ?? "",
+    disabled: Boolean(isDisabled),
+    focus
+  });
+  useEffect(() => {
+    itemRef.current.value = value ?? "";
+    itemRef.current.disabled = isDisabled;
+    itemRef.current.focus = focus;
+  });
+  const registerItem = group?.register;
+  useEffect(() => {
+    if (!registerItem) return void 0;
+    return registerItem(itemRef.current);
+  }, [registerItem]);
+  const handleKeyDown = (event) => {
+    if (isDisabled) return;
+    const key = event.key;
+    if (key === " " || key === "Spacebar" || key === "Space" || key === "Enter") {
+      event.preventDefault();
+      toggle();
+      return;
+    }
+    if (!group || type !== "radio") return;
+    const delta = key === "ArrowRight" || key === "ArrowDown" ? 1 : key === "ArrowLeft" || key === "ArrowUp" ? -1 : 0;
+    if (delta === 0) return;
+    event.preventDefault();
+    group.moveFocus(value, delta);
+  };
+  const showControl = control === "text" || checked;
+  const isOnImage = control === "onImage";
+  const surfaceBackground = checked ? theme.colors.overlay.brand : state === "press" ? theme.colors.overlay.brand : state === "hover" ? theme.colors.overlay.monoHover : theme.colors.overlay.mono;
+  const titleColor = isOnImage && checked ? theme.colors.control.check.bg : theme.colors.content.primary;
+  const derivedLabel = [asPlainText(title), asPlainText(description)].filter(Boolean).join(", ");
+  const media = /* @__PURE__ */ jsxs(
+    Box,
+    {
+      position: "relative",
+      width: "100%",
+      overflow: "hidden",
+      borderRadius: isOnImage ? metrics.radius : 0,
+      style: { aspectRatio: 1 },
+      testID: "card-selector-media",
+      children: [
+        imageSrc && /* @__PURE__ */ jsx3(
+          Box,
+          {
+            as: "img",
+            src: imageSrc,
+            alt: imageAlt,
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            style: { objectFit: "cover", pointerEvents: "none" },
+            testID: "card-selector-image"
+          }
+        ),
+        isOnImage && showControl && /* @__PURE__ */ jsx3(
+          Box,
+          {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            alignItems: "center",
+            justifyContent: "center",
+            zIndex: 1,
+            children: /* @__PURE__ */ jsx3(
+              SelectionControl,
+              {
+                type,
+                checked,
+                disabled: isDisabled,
+                metrics,
+                theme
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+  const label = /* @__PURE__ */ jsxs(Box, { flexDirection: "column", gap: 2, flexShrink: 1, overflow: "hidden", children: [
+    /* @__PURE__ */ jsx3(
+      Text,
+      {
+        color: titleColor,
+        fontFamily: theme.fonts.body,
+        fontSize: metrics.titleFontSize,
+        lineHeight: metrics.titleLineHeight,
+        fontWeight: "500",
+        numberOfLines: 1,
+        testID: "card-selector-title",
+        children: title
+      }
+    ),
+    description && /* @__PURE__ */ jsx3(
+      Text,
+      {
+        color: theme.colors.content.tertiary,
+        fontFamily: theme.fonts.body,
+        fontSize: metrics.descriptionFontSize,
+        lineHeight: metrics.descriptionLineHeight,
+        fontWeight: "400",
+        numberOfLines: 1,
+        testID: "card-selector-description",
+        children: description
+      }
+    )
+  ] });
+  const hasGroupSelection = group?.selectedValue !== void 0;
+  const isRovingTarget = checked || !hasGroupSelection && Boolean(group?.isFirstEnabled(value));
+  const isRovingRadio = Boolean(group) && type === "radio";
+  const tabIndex = isDisabled || isRovingRadio && !isRovingTarget ? -1 : 0;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ref: nodeRef,
+      width,
+      flexDirection: "column",
+      gap: isOnImage ? metrics.gap : 0,
+      opacity: isDisabled ? 0.48 : 1,
+      cursor: isDisabled ? "not-allowed" : "pointer",
+      role: type === "radio" ? "radio" : "checkbox",
+      "aria-checked": checked,
+      "aria-disabled": isDisabled || void 0,
+      "aria-label": ariaLabel || derivedLabel || void 0,
+      tabIndex,
+      onPress: isDisabled ? void 0 : toggle,
+      onKeyDown: handleKeyDown,
+      focusStyle: {
+        outlineColor: theme.colors.border.brand,
+        outlineWidth: 2,
+        outlineOffset: 2,
+        outlineStyle: "solid"
+      },
+      testID: testID || "card-selector",
+      children: [
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            flexDirection: "column",
+            overflow: "hidden",
+            borderRadius: metrics.radius,
+            borderWidth: 2,
+            borderStyle: "solid",
+            borderColor: checked ? theme.colors.border.brand : "transparent",
+            backgroundColor: surfaceBackground,
+            hoverStyle: !isDisabled && !checked && !isOnImage ? { backgroundColor: theme.colors.overlay.monoHover } : void 0,
+            pressStyle: !isDisabled && !isOnImage ? { backgroundColor: theme.colors.overlay.brand } : void 0,
+            testID: "card-selector-surface",
+            children: [
+              media,
+              !isOnImage && /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  flexDirection: "row",
+                  alignItems: "center",
+                  gap: metrics.gap,
+                  padding: metrics.padding,
+                  testID: "card-selector-bar",
+                  children: [
+                    /* @__PURE__ */ jsx3(
+                      SelectionControl,
+                      {
+                        type,
+                        checked,
+                        disabled: isDisabled,
+                        metrics,
+                        theme
+                      }
+                    ),
+                    label
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        isOnImage && label
+      ]
+    }
+  );
+};
+
+// src/CardSelectorGroup.tsx
+import { useCallback as useCallback2, useMemo, useState as useState2 } from "react";
+import { useResolvedTheme as useResolvedTheme2 } from "@xsolla/xui-core";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var CardSelectorGroup = ({
+  children,
+  type = "radio",
+  value,
+  defaultValue,
+  onValueChange,
+  platform,
+  control,
+  disabled = false,
+  gap = 12,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  testID,
+  themeMode,
+  themeProductContext = "b2c"
+}) => {
+  useResolvedTheme2({ themeMode, themeProductContext });
+  const [items, setItems] = useState2([]);
+  const [internalValue, setInternalValue] = useState2(defaultValue);
+  const isControlled = value !== void 0;
+  const selectedValue = isControlled ? value : internalValue;
+  const register = useCallback2((item) => {
+    setItems((prev) => [...prev, item]);
+    return () => setItems((prev) => prev.filter((entry) => entry !== item));
+  }, []);
+  const select = useCallback2(
+    (next) => {
+      if (!isControlled) setInternalValue(next);
+      onValueChange?.(next);
+    },
+    [isControlled, onValueChange]
+  );
+  const moveFocus = useCallback2(
+    (fromValue, delta) => {
+      const enabled = items.filter((item) => !item.disabled);
+      if (enabled.length === 0) return;
+      const currentIndex = enabled.findIndex(
+        (item) => item.value === fromValue
+      );
+      const nextIndex = currentIndex === -1 ? 0 : (currentIndex + delta + enabled.length) % enabled.length;
+      const next = enabled[nextIndex];
+      if (!next) return;
+      next.focus();
+      if (type === "radio" && next.value) select(next.value);
+    },
+    [items, select, type]
+  );
+  const isFirstEnabled = useCallback2(
+    (candidate) => {
+      const first = items.find((item) => !item.disabled);
+      return Boolean(first) && first?.value === candidate;
+    },
+    [items]
+  );
+  const contextValue = useMemo(
+    () => ({
+      type,
+      platform,
+      control,
+      disabled,
+      selectedValue,
+      select,
+      register,
+      moveFocus,
+      isFirstEnabled
+    }),
+    [
+      control,
+      disabled,
+      isFirstEnabled,
+      moveFocus,
+      platform,
+      register,
+      select,
+      selectedValue,
+      type
+    ]
+  );
+  return /* @__PURE__ */ jsx4(CardSelectorGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx4(
+    Box,
+    {
+      role: type === "radio" ? "radiogroup" : "group",
+      "aria-label": ariaLabelledBy ? void 0 : ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-disabled": disabled || void 0,
+      flexDirection: "row",
+      flexWrap: "wrap",
+      alignItems: "flex-start",
+      gap,
+      testID: testID || "card-selector-group",
+      children
+    }
+  ) });
+};
+export {
+  CardSelector,
+  CardSelectorGroup
+};
+//# sourceMappingURL=index.mjs.map