@xsolla/xui-radio-group 0.216.1 → 0.217.0

package/README.md

@@ -82,6 +82,70 @@ export default function RadioGroupWithDescriptions() {
 }
 ```
 
+### Card View
+
+`RadioCard` renders each option as a selectable card with a title, a
+description and a radio indicator. The **whole card** is the click target, and
+the selected card is filled with the brand-tinted control surface.
+
+```tsx
+import * as React from "react";
+import { RadioGroup, RadioCard } from "@xsolla/xui-radio-group";
+
+export default function DistributionModelPicker() {
+  const [model, setModel] = React.useState("p2p");
+
+  return (
+    <RadioGroup view="card" value={model} onChange={setModel}>
+      <RadioCard
+        value="f2p"
+        title="Free-to-play (F2P)"
+        description="Players have free access to the game after downloading the launcher."
+      />
+      <RadioCard
+        value="p2p"
+        title="Pay-to-play (P2P)"
+        description="Players must purchase the game to access it."
+      />
+      <RadioCard
+        value="s2p"
+        title="Subscribe-to-play (S2P)"
+        description="Players must buy a subscription to access the game."
+      />
+    </RadioGroup>
+  );
+}
+```
+
+### Two-Column Card Layout
+
+`columns` lays the cards out side by side. Children are distributed
+round-robin, so the reading order stays left-to-right then top-to-bottom.
+
+```tsx
+import * as React from "react";
+import { RadioGroup, RadioCard } from "@xsolla/xui-radio-group";
+
+export default function SalesChannelPicker() {
+  const [channel, setChannel] = React.useState("launcher");
+
+  return (
+    <RadioGroup view="card" columns={2} value={channel} onChange={setChannel}>
+      <RadioCard
+        value="launcher"
+        title="Sell in launcher"
+        description="Players buy the game inside the launcher."
+      />
+      <RadioCard
+        value="web"
+        title="Sell on the web"
+        description="Players buy the game on your web store."
+      />
+    </RadioGroup>
+  );
+}
+```
+
 ### Disabled Radio Group
 
 ```tsx
@@ -234,7 +298,30 @@ Container component that provides selection context to Radio children.
 | size          | `"sm" \| "md" \| "lg" \| "xl"` | `"md"`     | Size applied to all child Radio components.                                                                   |
 | disabled      | `boolean`                      | `false`    | Whether all radios are disabled.                                                                              |
 | flexDirection | `"row" \| "column"`            | `"column"` | Layout direction of the group.                                                                                |
-| gap           | `number`                       | `12`       | Gap between radio items in pixels.                                                                            |
+| gap           | `number`                       | `12` / `4` | Gap between items in pixels. Defaults to `4` when `view="card"`.                                              |
+| view          | `"default" \| "card"`          | `"default"`| Visual treatment of the options. `"card"` is for `RadioCard` children.                                        |
+| columns       | `number`                       | `1`        | Number of equal-width columns. Values above `1` take precedence over `flexDirection`.                         |
+
+### RadioCard
+
+A selectable card option. Renders a title, an optional description and a radio
+indicator, with the whole card as the click target. Must be used inside a
+`RadioGroup`, which owns the selected value.
+
+**RadioCard Props:**
+
+| Prop          | Type                           | Default | Description                                                                                       |
+| :------------ | :----------------------------- | :------ | :------------------------------------------------------------------------------------------------ |
+| `testID`      | `string`                       | —       | Test ID for testing frameworks.                                                                   |
+| value         | `string`                       | -       | **Required.** Value this card selects in the parent group.                                        |
+| title         | `string`                       | -       | **Required.** Primary line of the card.                                                           |
+| description   | `string`                       | -       | Supporting line rendered under the title.                                                         |
+| size          | `"sm" \| "md" \| "lg" \| "xl"` | group   | Size of the card and its indicator. Falls back to the group's `size`.                             |
+| checked       | `boolean`                      | group   | Selected state. Normally derived from the parent group's `value`.                                 |
+| disabled      | `boolean`                      | `false` | Disables this card only. The group's `disabled` disables every card.                              |
+| padding       | `number \| string`             | by size | Overrides the size-derived internal padding (`8`/`12`/`16`/`16` vertical, `12`/`16`/`16`/`20` horizontal). |
+| onPress       | `() => void`                   | -       | Called after the card is selected, in addition to the group's `onChange`.                         |
+| themeMode     | `ThemeMode`                    | context | Per-component theme mode override.                                                                |
 
 ### RadioGroup Context
 
@@ -246,6 +333,7 @@ interface RadioGroupContextProps {
   onChange?: (value: string) => void; // Selection handler
   size?: "sm" | "md" | "lg" | "xl"; // Size for radios
   disabled?: boolean; // Disabled state
+  view?: "default" | "card"; // Visual treatment
 }
 ```
 
@@ -257,8 +345,11 @@ Child Radio components automatically:
 
 ## Accessibility
 
-- RadioGroup provides proper grouping semantics
+- RadioGroup renders `role="radiogroup"` and provides proper grouping semantics
 - Only one radio can be selected at a time
+- `RadioCard` carries the `role="radio"` semantics and the tab stop itself, so
+  its indicator is presentational and never becomes a second tab stop
+- `RadioCard` responds to both <kbd>Space</kbd> and <kbd>Enter</kbd>
 - Arrow keys navigate between options when focused
 - Tab key moves focus to/from the group
 - Disabled state properly communicated to all children

package/native/index.d.mts

@@ -1,10 +1,21 @@
 import React from 'react';
+import { ThemeOverrideProps } from '@xsolla/xui-core';
 
+/**
+ * Visual treatment of the group's options.
+ *
+ * - `default` — bare `Radio` rows, the historical behaviour.
+ * - `card` — each option is a selectable card (`RadioCard`) with a title, a
+ *   description and a radio indicator, where the whole card is the click
+ *   target.
+ */
+type RadioGroupView = "default" | "card";
 interface RadioGroupContextProps {
     value?: string;
     onChange?: (value: string) => void;
     size?: "sm" | "md" | "lg" | "xl";
     disabled?: boolean;
+    view?: RadioGroupView;
     testID?: string;
 }
 declare const useRadioGroup: () => RadioGroupContextProps;
@@ -16,9 +27,65 @@ interface RadioGroupProps {
     children: React.ReactNode;
     flexDirection?: "row" | "column";
     gap?: number;
+    /**
+     * Visual treatment of the options. `card` renders `RadioCard` children as
+     * selectable cards; it does not change the selection semantics.
+     */
+    view?: RadioGroupView;
+    /**
+     * Number of side-by-side columns. Values above `1` lay the options out as a
+     * row of equal-width columns, which is how the Pentagram screens present a
+     * short option list. Children are distributed round-robin so the visual
+     * reading order stays left-to-right, then top-to-bottom.
+     *
+     * Takes precedence over `flexDirection`.
+     */
+    columns?: number;
     /** Test ID for testing frameworks */
     testID?: string;
 }
 declare const RadioGroup: React.FC<RadioGroupProps>;
 
-export { RadioGroup, type RadioGroupContextProps, type RadioGroupProps, useRadioGroup };
+type RadioCardSize = "sm" | "md" | "lg" | "xl";
+interface RadioCardProps extends ThemeOverrideProps {
+    /** Value this card selects in the parent `RadioGroup`. */
+    value: string;
+    /** Primary line of the card. */
+    title: string;
+    /** Supporting line rendered under the title. */
+    description?: string;
+    /** Size of the card and its radio indicator. Falls back to the group's size. */
+    size?: RadioCardSize;
+    /** Selected state. Normally derived from the parent `RadioGroup`. */
+    checked?: boolean;
+    /** Disables this card only. The group's `disabled` disables every card. */
+    disabled?: boolean;
+    /**
+     * Overrides the size-derived internal padding. Accepts anything `Box`'s
+     * `padding` accepts.
+     */
+    padding?: number | string;
+    /** Called after the card is selected, in addition to the group's `onChange`. */
+    onPress?: () => void;
+    /** Accessible label, when `title` is not descriptive enough on its own. */
+    "aria-label"?: string;
+    /** Test ID for testing frameworks */
+    testID?: string;
+}
+/**
+ * A selectable card option for `RadioGroup`.
+ *
+ * The whole card is the click target — not just the radio dot — and the
+ * selected card is filled with the brand-tinted control surface. Compose them
+ * inside a `RadioGroup` exactly like `Radio`:
+ *
+ * ```tsx
+ * <RadioGroup view="card" value={value} onChange={setValue}>
+ *   <RadioCard value="f2p" title="Free-to-play (F2P)" description="..." />
+ *   <RadioCard value="p2p" title="Pay-to-play (P2P)" description="..." />
+ * </RadioGroup>
+ * ```
+ */
+declare const RadioCard: React.FC<RadioCardProps>;
+
+export { RadioCard, type RadioCardProps, RadioGroup, type RadioGroupContextProps, type RadioGroupProps, type RadioGroupView, useRadioGroup };

package/native/index.d.ts

@@ -1,10 +1,21 @@
 import React from 'react';
+import { ThemeOverrideProps } from '@xsolla/xui-core';
 
+/**
+ * Visual treatment of the group's options.
+ *
+ * - `default` — bare `Radio` rows, the historical behaviour.
+ * - `card` — each option is a selectable card (`RadioCard`) with a title, a
+ *   description and a radio indicator, where the whole card is the click
+ *   target.
+ */
+type RadioGroupView = "default" | "card";
 interface RadioGroupContextProps {
     value?: string;
     onChange?: (value: string) => void;
     size?: "sm" | "md" | "lg" | "xl";
     disabled?: boolean;
+    view?: RadioGroupView;
     testID?: string;
 }
 declare const useRadioGroup: () => RadioGroupContextProps;
@@ -16,9 +27,65 @@ interface RadioGroupProps {
     children: React.ReactNode;
     flexDirection?: "row" | "column";
     gap?: number;
+    /**
+     * Visual treatment of the options. `card` renders `RadioCard` children as
+     * selectable cards; it does not change the selection semantics.
+     */
+    view?: RadioGroupView;
+    /**
+     * Number of side-by-side columns. Values above `1` lay the options out as a
+     * row of equal-width columns, which is how the Pentagram screens present a
+     * short option list. Children are distributed round-robin so the visual
+     * reading order stays left-to-right, then top-to-bottom.
+     *
+     * Takes precedence over `flexDirection`.
+     */
+    columns?: number;
     /** Test ID for testing frameworks */
     testID?: string;
 }
 declare const RadioGroup: React.FC<RadioGroupProps>;
 
-export { RadioGroup, type RadioGroupContextProps, type RadioGroupProps, useRadioGroup };
+type RadioCardSize = "sm" | "md" | "lg" | "xl";
+interface RadioCardProps extends ThemeOverrideProps {
+    /** Value this card selects in the parent `RadioGroup`. */
+    value: string;
+    /** Primary line of the card. */
+    title: string;
+    /** Supporting line rendered under the title. */
+    description?: string;
+    /** Size of the card and its radio indicator. Falls back to the group's size. */
+    size?: RadioCardSize;
+    /** Selected state. Normally derived from the parent `RadioGroup`. */
+    checked?: boolean;
+    /** Disables this card only. The group's `disabled` disables every card. */
+    disabled?: boolean;
+    /**
+     * Overrides the size-derived internal padding. Accepts anything `Box`'s
+     * `padding` accepts.
+     */
+    padding?: number | string;
+    /** Called after the card is selected, in addition to the group's `onChange`. */
+    onPress?: () => void;
+    /** Accessible label, when `title` is not descriptive enough on its own. */
+    "aria-label"?: string;
+    /** Test ID for testing frameworks */
+    testID?: string;
+}
+/**
+ * A selectable card option for `RadioGroup`.
+ *
+ * The whole card is the click target — not just the radio dot — and the
+ * selected card is filled with the brand-tinted control surface. Compose them
+ * inside a `RadioGroup` exactly like `Radio`:
+ *
+ * ```tsx
+ * <RadioGroup view="card" value={value} onChange={setValue}>
+ *   <RadioCard value="f2p" title="Free-to-play (F2P)" description="..." />
+ *   <RadioCard value="p2p" title="Pay-to-play (P2P)" description="..." />
+ * </RadioGroup>
+ * ```
+ */
+declare const RadioCard: React.FC<RadioCardProps>;
+
+export { RadioCard, type RadioCardProps, RadioGroup, type RadioGroupContextProps, type RadioGroupProps, type RadioGroupView, useRadioGroup };

package/native/index.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,18 +17,27 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.tsx
 var index_exports = {};
 __export(index_exports, {
+  RadioCard: () => RadioCard,
   RadioGroup: () => RadioGroup,
   useRadioGroup: () => useRadioGroup
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/RadioGroup.tsx
-var import_react = require("react");
+var import_react = __toESM(require("react"));
 
 // ../../foundation/primitives-native/src/Box.tsx
 var import_react_native = require("react-native");
@@ -265,10 +276,77 @@ var Box = ({
   );
 };
 
-// src/RadioGroup.tsx
+// ../../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/RadioGroup.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var RadioGroupContext = (0, import_react.createContext)({});
 var useRadioGroup = () => (0, import_react.useContext)(RadioGroupContext);
+var DEFAULT_GAP = 12;
+var CARD_GAP = 4;
 var RadioGroup = ({
   value,
   onChange,
@@ -276,12 +354,208 @@ var RadioGroup = ({
   disabled = false,
   children,
   flexDirection = "column",
-  gap = 12
+  gap,
+  view = "default",
+  columns = 1,
+  testID
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RadioGroupContext.Provider, { value: { value, onChange, size, disabled }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Box, { flexDirection, gap, children }) });
+  const resolvedGap = gap ?? (view === "card" ? CARD_GAP : DEFAULT_GAP);
+  const columnBuckets = (0, import_react.useMemo)(() => {
+    if (columns <= 1) return null;
+    const items = import_react.default.Children.toArray(children);
+    const buckets = Array.from(
+      { length: columns },
+      () => []
+    );
+    items.forEach((child, index) => {
+      buckets[index % columns].push(child);
+    });
+    return buckets;
+  }, [children, columns]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    RadioGroupContext.Provider,
+    {
+      value: { value, onChange, size, disabled, view },
+      children: columnBuckets ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        Box,
+        {
+          testID,
+          role: "radiogroup",
+          "aria-disabled": disabled || void 0,
+          flexDirection: "row",
+          alignItems: "flex-start",
+          gap: resolvedGap,
+          children: columnBuckets.map((bucket, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            Box,
+            {
+              flexDirection: "column",
+              gap: resolvedGap,
+              flex: 1,
+              style: { minWidth: 0 },
+              children: bucket
+            },
+            index
+          ))
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        Box,
+        {
+          testID,
+          role: "radiogroup",
+          "aria-disabled": disabled || void 0,
+          flexDirection,
+          gap: resolvedGap,
+          children
+        }
+      )
+    }
+  );
+};
+
+// src/RadioCard.tsx
+var import_xui_core = require("@xsolla/xui-core");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var CARD_PADDING = {
+  sm: { vertical: 8, horizontal: 12 },
+  md: { vertical: 12, horizontal: 16 },
+  lg: { vertical: 16, horizontal: 16 },
+  xl: { vertical: 16, horizontal: 20 }
+};
+var CONTENT_GAP = 12;
+var RadioCard = ({
+  value,
+  title,
+  description,
+  size: propSize,
+  checked: propChecked,
+  disabled = false,
+  padding,
+  onPress,
+  "aria-label": ariaLabel,
+  testID,
+  themeMode,
+  themeProductContext
+}) => {
+  const { theme } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
+  const radioGroup = useRadioGroup();
+  const size = propSize || radioGroup.size || "md";
+  const checked = propChecked !== void 0 ? propChecked : radioGroup.value === value;
+  const isDisabled = disabled || Boolean(radioGroup.disabled);
+  const sizing = theme.sizing.radio(size);
+  const checkColors = theme.colors.control.check;
+  const faintColors = theme.colors.control.faint;
+  const textColors = theme.colors.control.text;
+  const brandSurface = theme.colors.control.brand.secondary;
+  const spacing = CARD_PADDING[size];
+  const surfaceColor = checked ? brandSurface.bg : theme.colors.background.secondary;
+  const overlay = theme.colors.overlay.mono;
+  const hoverStyle = isDisabled ? void 0 : {
+    background: `linear-gradient(0deg, ${overlay} 0%, ${overlay} 100%), ${surfaceColor}`
+  };
+  const handlePress = () => {
+    if (isDisabled) return;
+    if (radioGroup.onChange) {
+      radioGroup.onChange(value);
+    }
+    if (onPress) {
+      onPress();
+    }
+  };
+  const handleKeyDown = (event) => {
+    if (isDisabled) return;
+    if (event.key === " " || event.key === "Enter") {
+      event.preventDefault();
+      handlePress();
+    }
+  };
+  const indicatorBg = isDisabled ? checkColors.bgDisable : checked ? checkColors.bg : faintColors.bg;
+  const indicatorBorder = isDisabled ? checkColors.borderDisable : checked ? checkColors.border : faintColors.border;
+  const dotColor = isDisabled ? textColors.disable : checkColors.icon;
+  const titleColor = isDisabled ? textColors.disable : textColors.primary;
+  const descriptionColor = isDisabled ? textColors.disable : theme.colors.content.tertiary;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    Box,
+    {
+      testID,
+      role: "radio",
+      "aria-checked": checked,
+      "aria-disabled": isDisabled || void 0,
+      "aria-label": ariaLabel,
+      tabIndex: isDisabled ? -1 : 0,
+      onPress: handlePress,
+      onKeyDown: handleKeyDown,
+      cursor: isDisabled ? "not-allowed" : "pointer",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: CONTENT_GAP,
+      width: "100%",
+      backgroundColor: surfaceColor,
+      borderRadius: theme.shape.cell.borderRadius,
+      padding,
+      paddingVertical: padding === void 0 ? spacing.vertical : void 0,
+      paddingHorizontal: padding === void 0 ? spacing.horizontal : void 0,
+      hoverStyle,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          Box,
+          {
+            flexDirection: "column",
+            gap: sizing.textGap,
+            style: { flex: 1, minWidth: 0 },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                Text,
+                {
+                  color: titleColor,
+                  fontSize: sizing.fontSize,
+                  lineHeight: sizing.lineHeight,
+                  fontWeight: "400",
+                  children: title
+                }
+              ),
+              description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                Text,
+                {
+                  color: descriptionColor,
+                  fontSize: sizing.descriptionFontSize,
+                  lineHeight: sizing.descriptionLineHeight,
+                  children: description
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          Box,
+          {
+            width: sizing.size,
+            height: sizing.size,
+            backgroundColor: indicatorBg,
+            borderColor: indicatorBorder,
+            borderWidth: sizing.borderWidth,
+            borderRadius: import_xui_core.radiusScale["999"],
+            alignItems: "center",
+            justifyContent: "center",
+            style: { flexShrink: 0 },
+            children: checked && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              Box,
+              {
+                width: sizing.iconSize,
+                height: sizing.iconSize,
+                backgroundColor: dotColor,
+                borderRadius: import_xui_core.radiusScale["999"]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  RadioCard,
   RadioGroup,
   useRadioGroup
 });