@xsolla/xui-cell 0.118.0 → 0.119.0

package/native/index.mjs

@@ -1,5 +1,5 @@
 // src/Cell.tsx
-import { forwardRef } from "react";
+import { forwardRef, useMemo } from "react";
 
 // ../primitives-native/src/Box.tsx
 import {
@@ -171,13 +171,106 @@ var Box = ({
   );
 };
 
+// ../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,
+  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,
+    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: id,
+      accessibilityRole,
+      children
+    }
+  );
+};
+
 // src/Cell.tsx
 import { useDesignSystem } from "@xsolla/xui-core";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var CellRoot = forwardRef(
-  ({ children, withBoard = false, ...props }, ref) => {
+  ({ children, view: viewProp, withBoard, style, ...props }, ref) => {
     const { theme } = useDesignSystem();
-    return /* @__PURE__ */ jsx2(
+    const view = viewProp ?? (withBoard ? "stroke" : "default");
+    const viewStyles = useMemo(() => {
+      const hoverBg = theme.colors.background.secondary;
+      switch (view) {
+        case "stroke":
+          return {
+            borderRadius: 8,
+            borderWidth: 1,
+            borderColor: theme.colors.border.secondary,
+            padding: 12,
+            hoverStyle: { backgroundColor: hoverBg }
+          };
+        case "surface":
+          return {
+            backgroundColor: theme.colors.background.secondary,
+            borderRadius: 8,
+            padding: 12,
+            hoverStyle: { backgroundColor: hoverBg }
+          };
+        default:
+          return {
+            minHeight: 56,
+            hoverStyle: { backgroundColor: hoverBg }
+          };
+      }
+    }, [view, theme]);
+    const hasPress = props.onPress != null;
+    return /* @__PURE__ */ jsx3(
       Box,
       {
         ref,
@@ -185,18 +278,10 @@ var CellRoot = forwardRef(
         width: "100%",
         flexDirection: "row",
         gap: 12,
-        paddingHorizontal: 16,
-        minHeight: 56,
-        ...withBoard ? {
-          backgroundColor: theme.colors.background.secondary,
-          borderRadius: 8,
-          borderWidth: 1,
-          borderColor: theme.colors.border.secondary,
-          paddingVertical: 12
-        } : {
-          paddingVertical: 8
-        },
+        cursor: hasPress ? "pointer" : void 0,
+        ...viewStyles,
         ...props,
+        style: { color: theme.colors.content.primary, ...style },
         children
       }
     );
@@ -205,7 +290,7 @@ var CellRoot = forwardRef(
 CellRoot.displayName = "Cell";
 var CellSlot = forwardRef(
   ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx2(
+    return /* @__PURE__ */ jsx3(
       Box,
       {
         ref,
@@ -222,7 +307,7 @@ var CellSlot = forwardRef(
 CellSlot.displayName = "Cell.Slot";
 var CellContent = forwardRef(
   ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx2(
+    return /* @__PURE__ */ jsx3(
       Box,
       {
         ref,
@@ -236,9 +321,123 @@ var CellContent = forwardRef(
   }
 );
 CellContent.displayName = "Cell.Content";
+var CellTextRow = ({
+  left,
+  right,
+  leftProps,
+  rightProps
+}) => {
+  if (!left && !right) return null;
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "row", gap: 12, alignItems: "center", width: "100%", children: [
+    left != null && /* @__PURE__ */ jsx3(
+      Box,
+      {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 2,
+        style: { flex: 1, minWidth: 0, minHeight: 1 },
+        children: typeof left === "string" ? /* @__PURE__ */ jsx3(Text, { ...leftProps, children: left }) : left
+      }
+    ),
+    right != null && /* @__PURE__ */ jsx3(
+      Box,
+      {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        gap: 2,
+        style: { flex: 1, minWidth: 0, minHeight: 1 },
+        children: typeof right === "string" ? /* @__PURE__ */ jsx3(Text, { ...rightProps, children: right }) : right
+      }
+    )
+  ] });
+};
+var CellText = forwardRef(
+  ({
+    title,
+    titleRight,
+    description,
+    descriptionRight,
+    caption,
+    captionRight,
+    ...props
+  }, ref) => {
+    const { theme } = useDesignSystem();
+    const hasDescriptions = description != null || descriptionRight != null;
+    const hasCaptions = caption != null || captionRight != null;
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        ref,
+        flexDirection: "column",
+        justifyContent: "center",
+        gap: 2,
+        ...props,
+        style: { flex: 1, minWidth: 0, minHeight: 1, ...props.style },
+        children: [
+          /* @__PURE__ */ jsx3(
+            CellTextRow,
+            {
+              left: title,
+              right: titleRight,
+              leftProps: {
+                fontWeight: "500",
+                fontSize: 16,
+                lineHeight: 20
+              },
+              rightProps: {
+                fontWeight: "400",
+                fontSize: 12,
+                lineHeight: 18
+              }
+            }
+          ),
+          hasDescriptions && /* @__PURE__ */ jsx3(
+            CellTextRow,
+            {
+              left: description,
+              right: descriptionRight,
+              leftProps: {
+                fontWeight: "400",
+                fontSize: 12,
+                lineHeight: 18
+              },
+              rightProps: {
+                fontWeight: "400",
+                fontSize: 12,
+                lineHeight: 18
+              }
+            }
+          ),
+          hasCaptions && /* @__PURE__ */ jsx3(
+            CellTextRow,
+            {
+              left: caption,
+              right: captionRight,
+              leftProps: {
+                fontWeight: "400",
+                fontSize: 12,
+                lineHeight: 18,
+                color: theme.colors.content.tertiary
+              },
+              rightProps: {
+                fontWeight: "400",
+                fontSize: 12,
+                lineHeight: 18,
+                color: theme.colors.content.tertiary
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+CellText.displayName = "Cell.Text";
 var Cell = Object.assign(CellRoot, {
   Slot: CellSlot,
-  Content: CellContent
+  Content: CellContent,
+  Text: CellText
 });
 export {
   Cell

package/native/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Cell.tsx","../../../primitives-native/src/Box.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem } from \"@xsolla/xui-core\";\nimport { CellContentProps, CellProps, CellSlotProps } from \"./types\";\n\nconst CellRoot = forwardRef<any, CellProps>(\n  ({ children, withBoard = false, ...props }, ref) => {\n    const { theme } = useDesignSystem();\n\n    return (\n      <Box\n        ref={ref}\n        alignItems=\"center\"\n        width=\"100%\"\n        flexDirection=\"row\"\n        gap={12}\n        paddingHorizontal={16}\n        minHeight={56}\n        {...(withBoard\n          ? {\n              backgroundColor: theme.colors.background.secondary,\n              borderRadius: 8,\n              borderWidth: 1,\n              borderColor: theme.colors.border.secondary,\n              paddingVertical: 12,\n            }\n          : {\n              paddingVertical: 8,\n            })}\n        {...props}\n      >\n        {children}\n      </Box>\n    );\n  }\n);\n\nCellRoot.displayName = \"Cell\";\n\nconst CellSlot = forwardRef<any, CellSlotProps>(\n  ({ children, ...props }, ref) => {\n    return (\n      <Box\n        ref={ref}\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        flexDirection=\"row\"\n        {...props}\n        style={{ flexShrink: 0, ...props.style }}\n      >\n        {children}\n      </Box>\n    );\n  }\n);\n\nCellSlot.displayName = \"Cell.Slot\";\n\nconst CellContent = forwardRef<any, CellContentProps>(\n  ({ children, ...props }, ref) => {\n    return (\n      <Box\n        ref={ref}\n        flexDirection=\"column\"\n        justifyContent=\"center\"\n        {...props}\n        style={{ flex: 1, ...props.style }}\n      >\n        {children}\n      </Box>\n    );\n  }\n);\n\nCellContent.displayName = \"Cell.Content\";\n\nexport const Cell = Object.assign(CellRoot, {\n  Slot: CellSlot,\n  Content: CellContent,\n});\n","import React from \"react\";\nimport {\n  View,\n  Pressable,\n  Image,\n  ViewStyle,\n  ImageStyle,\n  DimensionValue,\n  AnimatableNumericValue,\n} from \"react-native\";\nimport { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Box: React.FC<BoxProps> = ({\n  children,\n  onPress,\n  onLayout,\n  onMoveShouldSetResponder,\n  onResponderGrant,\n  onResponderMove,\n  onResponderRelease,\n  onResponderTerminate,\n  backgroundColor,\n  borderColor,\n  borderWidth,\n  borderBottomWidth,\n  borderBottomColor,\n  borderTopWidth,\n  borderTopColor,\n  borderLeftWidth,\n  borderLeftColor,\n  borderRightWidth,\n  borderRightColor,\n  borderRadius,\n  borderStyle,\n  height,\n  padding,\n  paddingHorizontal,\n  paddingVertical,\n  margin,\n  marginTop,\n  marginBottom,\n  marginLeft,\n  marginRight,\n  flexDirection,\n  alignItems,\n  justifyContent,\n  position,\n  top,\n  bottom,\n  left,\n  right,\n  width,\n  flex,\n  overflow,\n  zIndex,\n  hoverStyle,\n  pressStyle,\n  style,\n  \"data-testid\": dataTestId,\n  testID,\n  as,\n  src,\n  alt,\n  ...rest\n}) => {\n  const getContainerStyle = (pressed?: boolean): ViewStyle => ({\n    backgroundColor:\n      pressed && pressStyle?.backgroundColor\n        ? pressStyle.backgroundColor\n        : backgroundColor,\n    borderColor,\n    borderWidth,\n    borderBottomWidth,\n    borderBottomColor,\n    borderTopWidth,\n    borderTopColor,\n    borderLeftWidth,\n    borderLeftColor,\n    borderRightWidth,\n    borderRightColor,\n    borderRadius: borderRadius as AnimatableNumericValue,\n    borderStyle: borderStyle as ViewStyle[\"borderStyle\"],\n    overflow,\n    zIndex,\n    height: height as DimensionValue,\n    width: width as DimensionValue,\n    padding: padding as DimensionValue,\n    paddingHorizontal: paddingHorizontal as DimensionValue,\n    paddingVertical: paddingVertical as DimensionValue,\n    margin: margin as DimensionValue,\n    marginTop: marginTop as DimensionValue,\n    marginBottom: marginBottom as DimensionValue,\n    marginLeft: marginLeft as DimensionValue,\n    marginRight: marginRight as DimensionValue,\n    flexDirection,\n    alignItems,\n    justifyContent,\n    position: position as ViewStyle[\"position\"],\n    top: top as DimensionValue,\n    bottom: bottom as DimensionValue,\n    left: left as DimensionValue,\n    right: right as DimensionValue,\n    flex,\n    ...(style as ViewStyle),\n  });\n\n  const finalTestID = dataTestId || testID;\n\n  // Destructure and drop web-only props from rest before passing to RN components\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const {\n    role,\n    tabIndex,\n    onKeyDown,\n    onKeyUp,\n    \"aria-label\": _ariaLabel,\n    \"aria-labelledby\": _ariaLabelledBy,\n    \"aria-current\": _ariaCurrent,\n    \"aria-disabled\": _ariaDisabled,\n    \"aria-live\": _ariaLive,\n    className,\n    \"data-testid\": _dataTestId,\n    ...nativeRest\n  } = rest as Record<string, unknown>;\n\n  // Handle as=\"img\" for React Native\n  if (as === \"img\" && src) {\n    const imageStyle: ImageStyle = {\n      width: width as DimensionValue,\n      height: height as DimensionValue,\n      borderRadius: borderRadius as number,\n      position: position as ImageStyle[\"position\"],\n      top: top as DimensionValue,\n      bottom: bottom as DimensionValue,\n      left: left as DimensionValue,\n      right: right as DimensionValue,\n      ...(style as ImageStyle),\n    };\n\n    return (\n      <Image\n        source={{ uri: src }}\n        style={imageStyle}\n        testID={finalTestID}\n        resizeMode=\"cover\"\n        {...nativeRest}\n      />\n    );\n  }\n\n  if (onPress) {\n    return (\n      <Pressable\n        onPress={onPress}\n        onLayout={onLayout}\n        onMoveShouldSetResponder={onMoveShouldSetResponder}\n        onResponderGrant={onResponderGrant}\n        onResponderMove={onResponderMove}\n        onResponderRelease={onResponderRelease}\n        onResponderTerminate={onResponderTerminate}\n        style={({ pressed }) => getContainerStyle(pressed)}\n        testID={finalTestID}\n        {...nativeRest}\n      >\n        {children}\n      </Pressable>\n    );\n  }\n\n  return (\n    <View\n      style={getContainerStyle()}\n      testID={finalTestID}\n      onLayout={onLayout}\n      onMoveShouldSetResponder={onMoveShouldSetResponder}\n      onResponderGrant={onResponderGrant}\n      onResponderMove={onResponderMove}\n      onResponderRelease={onResponderRelease}\n      onResponderTerminate={onResponderTerminate}\n      {...nativeRest}\n    >\n      {children}\n    </View>\n  );\n};\n"],"mappings":"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","names":["jsx"]}
+{"version":3,"sources":["../../src/Cell.tsx","../../../primitives-native/src/Box.tsx","../../../primitives-native/src/Text.tsx"],"sourcesContent":["import { forwardRef, useMemo } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem } from \"@xsolla/xui-core\";\nimport {\n  CellContentProps,\n  CellProps,\n  CellSlotProps,\n  CellTextProps,\n  CellView,\n} from \"./types\";\n\nconst CellRoot = forwardRef<any, CellProps>(\n  ({ children, view: viewProp, withBoard, style, ...props }, ref) => {\n    const { theme } = useDesignSystem();\n\n    const view: CellView = viewProp ?? (withBoard ? \"stroke\" : \"default\");\n\n    const viewStyles = useMemo(() => {\n      const hoverBg = theme.colors.background.secondary;\n\n      switch (view) {\n        case \"stroke\":\n          return {\n            borderRadius: 8,\n            borderWidth: 1,\n            borderColor: theme.colors.border.secondary,\n            padding: 12,\n            hoverStyle: { backgroundColor: hoverBg },\n          };\n        case \"surface\":\n          return {\n            backgroundColor: theme.colors.background.secondary,\n            borderRadius: 8,\n            padding: 12,\n            hoverStyle: { backgroundColor: hoverBg },\n          };\n        default:\n          return {\n            minHeight: 56,\n            hoverStyle: { backgroundColor: hoverBg },\n          };\n      }\n    }, [view, theme]);\n\n    const hasPress = props.onPress != null;\n\n    return (\n      <Box\n        ref={ref}\n        alignItems=\"center\"\n        width=\"100%\"\n        flexDirection=\"row\"\n        gap={12}\n        cursor={hasPress ? \"pointer\" : undefined}\n        {...viewStyles}\n        {...props}\n        style={{ color: theme.colors.content.primary, ...style }}\n      >\n        {children}\n      </Box>\n    );\n  }\n);\n\nCellRoot.displayName = \"Cell\";\n\nconst CellSlot = forwardRef<any, CellSlotProps>(\n  ({ children, ...props }, ref) => {\n    return (\n      <Box\n        ref={ref}\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        flexDirection=\"row\"\n        {...props}\n        style={{ flexShrink: 0, ...props.style }}\n      >\n        {children}\n      </Box>\n    );\n  }\n);\n\nCellSlot.displayName = \"Cell.Slot\";\n\nconst CellContent = forwardRef<any, CellContentProps>(\n  ({ children, ...props }, ref) => {\n    return (\n      <Box\n        ref={ref}\n        flexDirection=\"column\"\n        justifyContent=\"center\"\n        {...props}\n        style={{ flex: 1, ...props.style }}\n      >\n        {children}\n      </Box>\n    );\n  }\n);\n\nCellContent.displayName = \"Cell.Content\";\n\nconst CellTextRow = ({\n  left,\n  right,\n  leftProps,\n  rightProps,\n}: {\n  left?: React.ReactNode;\n  right?: React.ReactNode;\n  leftProps?: Record<string, unknown>;\n  rightProps?: Record<string, unknown>;\n}) => {\n  if (!left && !right) return null;\n  return (\n    <Box flexDirection=\"row\" gap={12} alignItems=\"center\" width=\"100%\">\n      {left != null && (\n        <Box\n          flexDirection=\"row\"\n          alignItems=\"center\"\n          gap={2}\n          style={{ flex: 1, minWidth: 0, minHeight: 1 }}\n        >\n          {typeof left === \"string\" ? <Text {...leftProps}>{left}</Text> : left}\n        </Box>\n      )}\n      {right != null && (\n        <Box\n          flexDirection=\"row\"\n          alignItems=\"center\"\n          justifyContent=\"flex-end\"\n          gap={2}\n          style={{ flex: 1, minWidth: 0, minHeight: 1 }}\n        >\n          {typeof right === \"string\" ? (\n            <Text {...rightProps}>{right}</Text>\n          ) : (\n            right\n          )}\n        </Box>\n      )}\n    </Box>\n  );\n};\n\nconst CellText = forwardRef<any, CellTextProps>(\n  (\n    {\n      title,\n      titleRight,\n      description,\n      descriptionRight,\n      caption,\n      captionRight,\n      ...props\n    },\n    ref\n  ) => {\n    const { theme } = useDesignSystem();\n\n    const hasDescriptions = description != null || descriptionRight != null;\n    const hasCaptions = caption != null || captionRight != null;\n\n    return (\n      <Box\n        ref={ref}\n        flexDirection=\"column\"\n        justifyContent=\"center\"\n        gap={2}\n        {...props}\n        style={{ flex: 1, minWidth: 0, minHeight: 1, ...props.style }}\n      >\n        <CellTextRow\n          left={title}\n          right={titleRight}\n          leftProps={{\n            fontWeight: \"500\",\n            fontSize: 16,\n            lineHeight: 20,\n          }}\n          rightProps={{\n            fontWeight: \"400\",\n            fontSize: 12,\n            lineHeight: 18,\n          }}\n        />\n        {hasDescriptions && (\n          <CellTextRow\n            left={description}\n            right={descriptionRight}\n            leftProps={{\n              fontWeight: \"400\",\n              fontSize: 12,\n              lineHeight: 18,\n            }}\n            rightProps={{\n              fontWeight: \"400\",\n              fontSize: 12,\n              lineHeight: 18,\n            }}\n          />\n        )}\n        {hasCaptions && (\n          <CellTextRow\n            left={caption}\n            right={captionRight}\n            leftProps={{\n              fontWeight: \"400\",\n              fontSize: 12,\n              lineHeight: 18,\n              color: theme.colors.content.tertiary,\n            }}\n            rightProps={{\n              fontWeight: \"400\",\n              fontSize: 12,\n              lineHeight: 18,\n              color: theme.colors.content.tertiary,\n            }}\n          />\n        )}\n      </Box>\n    );\n  }\n);\n\nCellText.displayName = \"Cell.Text\";\n\nexport const Cell = Object.assign(CellRoot, {\n  Slot: CellSlot,\n  Content: CellContent,\n  Text: CellText,\n});\n","import React from \"react\";\nimport {\n  View,\n  Pressable,\n  Image,\n  ViewStyle,\n  ImageStyle,\n  DimensionValue,\n  AnimatableNumericValue,\n} from \"react-native\";\nimport { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Box: React.FC<BoxProps> = ({\n  children,\n  onPress,\n  onLayout,\n  onMoveShouldSetResponder,\n  onResponderGrant,\n  onResponderMove,\n  onResponderRelease,\n  onResponderTerminate,\n  backgroundColor,\n  borderColor,\n  borderWidth,\n  borderBottomWidth,\n  borderBottomColor,\n  borderTopWidth,\n  borderTopColor,\n  borderLeftWidth,\n  borderLeftColor,\n  borderRightWidth,\n  borderRightColor,\n  borderRadius,\n  borderStyle,\n  height,\n  padding,\n  paddingHorizontal,\n  paddingVertical,\n  margin,\n  marginTop,\n  marginBottom,\n  marginLeft,\n  marginRight,\n  flexDirection,\n  alignItems,\n  justifyContent,\n  position,\n  top,\n  bottom,\n  left,\n  right,\n  width,\n  flex,\n  overflow,\n  zIndex,\n  hoverStyle,\n  pressStyle,\n  style,\n  \"data-testid\": dataTestId,\n  testID,\n  as,\n  src,\n  alt,\n  ...rest\n}) => {\n  const getContainerStyle = (pressed?: boolean): ViewStyle => ({\n    backgroundColor:\n      pressed && pressStyle?.backgroundColor\n        ? pressStyle.backgroundColor\n        : backgroundColor,\n    borderColor,\n    borderWidth,\n    borderBottomWidth,\n    borderBottomColor,\n    borderTopWidth,\n    borderTopColor,\n    borderLeftWidth,\n    borderLeftColor,\n    borderRightWidth,\n    borderRightColor,\n    borderRadius: borderRadius as AnimatableNumericValue,\n    borderStyle: borderStyle as ViewStyle[\"borderStyle\"],\n    overflow,\n    zIndex,\n    height: height as DimensionValue,\n    width: width as DimensionValue,\n    padding: padding as DimensionValue,\n    paddingHorizontal: paddingHorizontal as DimensionValue,\n    paddingVertical: paddingVertical as DimensionValue,\n    margin: margin as DimensionValue,\n    marginTop: marginTop as DimensionValue,\n    marginBottom: marginBottom as DimensionValue,\n    marginLeft: marginLeft as DimensionValue,\n    marginRight: marginRight as DimensionValue,\n    flexDirection,\n    alignItems,\n    justifyContent,\n    position: position as ViewStyle[\"position\"],\n    top: top as DimensionValue,\n    bottom: bottom as DimensionValue,\n    left: left as DimensionValue,\n    right: right as DimensionValue,\n    flex,\n    ...(style as ViewStyle),\n  });\n\n  const finalTestID = dataTestId || testID;\n\n  // Destructure and drop web-only props from rest before passing to RN components\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const {\n    role,\n    tabIndex,\n    onKeyDown,\n    onKeyUp,\n    \"aria-label\": _ariaLabel,\n    \"aria-labelledby\": _ariaLabelledBy,\n    \"aria-current\": _ariaCurrent,\n    \"aria-disabled\": _ariaDisabled,\n    \"aria-live\": _ariaLive,\n    className,\n    \"data-testid\": _dataTestId,\n    ...nativeRest\n  } = rest as Record<string, unknown>;\n\n  // Handle as=\"img\" for React Native\n  if (as === \"img\" && src) {\n    const imageStyle: ImageStyle = {\n      width: width as DimensionValue,\n      height: height as DimensionValue,\n      borderRadius: borderRadius as number,\n      position: position as ImageStyle[\"position\"],\n      top: top as DimensionValue,\n      bottom: bottom as DimensionValue,\n      left: left as DimensionValue,\n      right: right as DimensionValue,\n      ...(style as ImageStyle),\n    };\n\n    return (\n      <Image\n        source={{ uri: src }}\n        style={imageStyle}\n        testID={finalTestID}\n        resizeMode=\"cover\"\n        {...nativeRest}\n      />\n    );\n  }\n\n  if (onPress) {\n    return (\n      <Pressable\n        onPress={onPress}\n        onLayout={onLayout}\n        onMoveShouldSetResponder={onMoveShouldSetResponder}\n        onResponderGrant={onResponderGrant}\n        onResponderMove={onResponderMove}\n        onResponderRelease={onResponderRelease}\n        onResponderTerminate={onResponderTerminate}\n        style={({ pressed }) => getContainerStyle(pressed)}\n        testID={finalTestID}\n        {...nativeRest}\n      >\n        {children}\n      </Pressable>\n    );\n  }\n\n  return (\n    <View\n      style={getContainerStyle()}\n      testID={finalTestID}\n      onLayout={onLayout}\n      onMoveShouldSetResponder={onMoveShouldSetResponder}\n      onResponderGrant={onResponderGrant}\n      onResponderMove={onResponderMove}\n      onResponderRelease={onResponderRelease}\n      onResponderTerminate={onResponderTerminate}\n      {...nativeRest}\n    >\n      {children}\n    </View>\n  );\n};\n","import React from \"react\";\nimport {\n  Text as RNText,\n  TextStyle,\n  AccessibilityRole,\n  StyleSheet,\n} from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst roleMap: Record<string, AccessibilityRole> = {\n  alert: \"alert\",\n  heading: \"header\",\n  button: \"button\",\n  link: \"link\",\n  text: \"text\",\n};\n\nconst parseNumericValue = (\n  value: string | number | undefined\n): number | undefined => {\n  if (value === undefined) return undefined;\n  if (typeof value === \"number\") return value;\n  const parsed = parseFloat(value);\n  return isNaN(parsed) ? undefined : parsed;\n};\n\nexport const Text: React.FC<TextProps> = ({\n  children,\n  color,\n  fontSize,\n  fontWeight,\n  fontFamily,\n  textAlign,\n  lineHeight,\n  numberOfLines,\n  id,\n  role,\n  style: styleProp,\n  ...props\n}) => {\n  let resolvedFontFamily = fontFamily\n    ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n    : undefined;\n\n  if (\n    resolvedFontFamily === \"Pilat Wide\" ||\n    resolvedFontFamily === \"Pilat Wide Bold\" ||\n    resolvedFontFamily === \"Aktiv Grotesk\"\n  ) {\n    resolvedFontFamily = undefined;\n  }\n\n  const incomingStyle = StyleSheet.flatten(styleProp) as TextStyle | undefined;\n\n  const baseStyle: TextStyle = {\n    color,\n    fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n    fontWeight: fontWeight as TextStyle[\"fontWeight\"],\n    fontFamily: resolvedFontFamily,\n    textDecorationLine: props.textDecoration as TextStyle[\"textDecorationLine\"],\n    textAlign: textAlign ?? incomingStyle?.textAlign,\n    lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),\n    marginTop: parseNumericValue(\n      incomingStyle?.marginTop as number | string | undefined\n    ),\n    marginBottom: parseNumericValue(\n      incomingStyle?.marginBottom as number | string | undefined\n    ),\n  };\n\n  const accessibilityRole = role ? roleMap[role] : undefined;\n\n  return (\n    <RNText\n      style={baseStyle}\n      numberOfLines={numberOfLines}\n      testID={id}\n      accessibilityRole={accessibilityRole}\n    >\n      {children}\n    </RNText>\n  );\n};\n"],"mappings":"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","names":["jsx","jsx"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-cell",
-  "version": "0.118.0",
+  "version": "0.119.0",
   "main": "./web/index.js",
   "module": "./web/index.mjs",
   "types": "./web/index.d.ts",
@@ -10,10 +10,10 @@
     "build:native": "PLATFORM=native tsup"
   },
   "dependencies": {
-    "@xsolla/xui-avatar": "0.118.0",
-    "@xsolla/xui-button": "0.118.0",
-    "@xsolla/xui-core": "0.118.0",
-    "@xsolla/xui-primitives-core": "0.118.0"
+    "@xsolla/xui-avatar": "0.119.0",
+    "@xsolla/xui-button": "0.119.0",
+    "@xsolla/xui-core": "0.119.0",
+    "@xsolla/xui-primitives-core": "0.119.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

package/web/index.d.mts

@@ -2,11 +2,14 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 import { BoxProps } from '@xsolla/xui-primitives-core';
 
+type CellView = "default" | "stroke" | "surface";
 interface CellProps extends BoxProps {
     children?: ReactNode;
+    /** Visual variant of the cell container. */
+    view?: CellView;
     /**
-     * If true, the cell will have a board-like container style
-     * (background, border, padding) consistent with Xsolla patterns.
+     * @deprecated Use `view="stroke"` instead.
+     * If true, applies the "stroke" view style.
      */
     withBoard?: boolean;
 }
@@ -16,10 +19,25 @@ interface CellSlotProps extends BoxProps {
 interface CellContentProps extends BoxProps {
     children?: ReactNode;
 }
+interface CellTextProps extends BoxProps {
+    /** Primary title on the left. */
+    title?: ReactNode;
+    /** Secondary text on the right of the title row. */
+    titleRight?: ReactNode;
+    /** Description text on the left (second row). */
+    description?: ReactNode;
+    /** Description text on the right (second row). */
+    descriptionRight?: ReactNode;
+    /** Caption text on the left (third row, tertiary color). */
+    caption?: ReactNode;
+    /** Caption text on the right (third row, tertiary color). */
+    captionRight?: ReactNode;
+}
 
 declare const Cell: react.ForwardRefExoticComponent<CellProps & react.RefAttributes<any>> & {
     Slot: react.ForwardRefExoticComponent<CellSlotProps & react.RefAttributes<any>>;
     Content: react.ForwardRefExoticComponent<CellContentProps & react.RefAttributes<any>>;
+    Text: react.ForwardRefExoticComponent<CellTextProps & react.RefAttributes<any>>;
 };
 
-export { Cell, type CellContentProps, type CellProps, type CellSlotProps };
+export { Cell, type CellContentProps, type CellProps, type CellSlotProps, type CellTextProps, type CellView };

package/web/index.d.ts

@@ -2,11 +2,14 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 import { BoxProps } from '@xsolla/xui-primitives-core';
 
+type CellView = "default" | "stroke" | "surface";
 interface CellProps extends BoxProps {
     children?: ReactNode;
+    /** Visual variant of the cell container. */
+    view?: CellView;
     /**
-     * If true, the cell will have a board-like container style
-     * (background, border, padding) consistent with Xsolla patterns.
+     * @deprecated Use `view="stroke"` instead.
+     * If true, applies the "stroke" view style.
      */
     withBoard?: boolean;
 }
@@ -16,10 +19,25 @@ interface CellSlotProps extends BoxProps {
 interface CellContentProps extends BoxProps {
     children?: ReactNode;
 }
+interface CellTextProps extends BoxProps {
+    /** Primary title on the left. */
+    title?: ReactNode;
+    /** Secondary text on the right of the title row. */
+    titleRight?: ReactNode;
+    /** Description text on the left (second row). */
+    description?: ReactNode;
+    /** Description text on the right (second row). */
+    descriptionRight?: ReactNode;
+    /** Caption text on the left (third row, tertiary color). */
+    caption?: ReactNode;
+    /** Caption text on the right (third row, tertiary color). */
+    captionRight?: ReactNode;
+}
 
 declare const Cell: react.ForwardRefExoticComponent<CellProps & react.RefAttributes<any>> & {
     Slot: react.ForwardRefExoticComponent<CellSlotProps & react.RefAttributes<any>>;
     Content: react.ForwardRefExoticComponent<CellContentProps & react.RefAttributes<any>>;
+    Text: react.ForwardRefExoticComponent<CellTextProps & react.RefAttributes<any>>;
 };
 
-export { Cell, type CellContentProps, type CellProps, type CellSlotProps };
+export { Cell, type CellContentProps, type CellProps, type CellSlotProps, type CellTextProps, type CellView };