@xsolla/xui-table 0.151.0-pr273.1778117489

package/native/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Table.tsx","../../../../foundation/primitives-native/src/Box.tsx","../../../../foundation/primitives-native/src/Text.tsx"],"sourcesContent":["import React, {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n  type ReactNode,\n} from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme, isNative } from \"@xsolla/xui-core\";\nimport { Sort } from \"@xsolla/xui-icons-base\";\nimport {\n  TableBodyProps,\n  TableCaptionProps,\n  TableCellProps,\n  TableFooterProps,\n  TableHeaderProps,\n  TableHeadProps,\n  TableProps,\n  TableRowProps,\n} from \"./types\";\n\n/**\n * Tracks which rowgroup the current <Table.Row> sits inside, so the row can\n * pick the right sizing (header rows are slightly taller / styled\n * differently per `theme.sizing.table`).\n */\ntype RowGroup = \"header\" | \"body\";\nconst TableRowGroupContext = createContext<RowGroup>(\"body\");\n\n/**\n * Tracks whether the parent <Table.Row> is hovered or has focus inside it.\n * Cells that opt into `revealOnHover` read this to decide whether to show\n * their content. Defaults to `true` so cells used outside a row (e.g. inside\n * <Table.Header>) are always visible.\n */\nconst RowRevealContext = createContext<{ revealed: boolean }>({\n  revealed: true,\n});\n\n/**\n * Detects whether the device is hover-capable (desktop) vs touch-only (mobile).\n * On touch-only devices we always reveal action cells so they can be tapped —\n * matching the Figma spec (\"Right cell actions ... always visible on touch\n * devices\"). SSR-safe: returns `true` until mounted, which means actions stay\n * revealed on the server (no flash-of-hidden-actions on first paint).\n *\n * Table is web-only for now — on native this hook short-circuits and never\n * runs the media query.\n */\nconst useHoverCapable = (): boolean => {\n  const [hoverCapable, setHoverCapable] = useState(true);\n  useEffect(() => {\n    if (isNative) return;\n    if (typeof window === \"undefined\" || !window.matchMedia) return;\n    const mq = window.matchMedia(\"(hover: hover)\");\n    setHoverCapable(mq.matches);\n    const onChange = (e: MediaQueryListEvent) => setHoverCapable(e.matches);\n    mq.addEventListener?.(\"change\", onChange);\n    return () => mq.removeEventListener?.(\"change\", onChange);\n  }, []);\n  return hoverCapable;\n};\n\nconst Divider: React.FC<{ color: string }> = ({ color }) => (\n  <Box\n    width=\"100%\"\n    height={1}\n    backgroundColor={color}\n    style={{ flexShrink: 0 }}\n  />\n);\n\nconst TableRoot = forwardRef<any, TableProps>(\n  ({ children, themeMode, themeProductContext }, ref) => {\n    const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n    const sizing = theme.sizing.table;\n\n    return (\n      <Box\n        ref={ref}\n        flexDirection=\"column\"\n        alignItems=\"stretch\"\n        gap={sizing.containerGap}\n        paddingVertical={sizing.containerPaddingVertical}\n        backgroundColor={theme.colors.background.primary}\n        borderRadius={sizing.containerRadius}\n        width=\"100%\"\n        role=\"table\"\n        style={{\n          color: theme.colors.content.primary,\n          overflow: \"clip\",\n        }}\n      >\n        {children}\n      </Box>\n    );\n  }\n);\n\nTableRoot.displayName = \"Table\";\n\nconst TableCaption = forwardRef<any, TableCaptionProps>(\n  ({ children, themeMode, themeProductContext, style, ...props }, ref) => {\n    const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n    const sizing = theme.sizing.table;\n\n    return (\n      <Box\n        ref={ref}\n        flexDirection=\"row\"\n        alignItems=\"center\"\n        paddingHorizontal={sizing.headerRowPaddingHorizontal}\n        width=\"100%\"\n        // <caption> isn't a valid ARIA role; consumers can pass role=\"region\"\n        // + aria-label via ...props if they want it announced.\n        {...props}\n        style={style}\n      >\n        {typeof children === \"string\" || typeof children === \"number\" ? (\n          <Text\n            fontSize={sizing.captionFontSize}\n            lineHeight={sizing.captionLineHeight}\n            color={theme.colors.content.secondary}\n          >\n            {children}\n          </Text>\n        ) : (\n          children\n        )}\n      </Box>\n    );\n  }\n);\n\nTableCaption.displayName = \"Table.Caption\";\n\nconst TableHeader = forwardRef<any, TableHeaderProps>(\n  ({ children, themeMode, themeProductContext, style, ...props }, ref) => {\n    const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n\n    return (\n      <TableRowGroupContext.Provider value=\"header\">\n        <Box\n          ref={ref}\n          flexDirection=\"column\"\n          alignItems=\"stretch\"\n          width=\"100%\"\n          role=\"rowgroup\"\n          {...props}\n          style={{\n            position: \"sticky\",\n            top: 0,\n            zIndex: 1,\n            backgroundColor: theme.colors.background.primary,\n            ...style,\n          }}\n        >\n          {children}\n          <Divider color={theme.colors.border.secondary} />\n        </Box>\n      </TableRowGroupContext.Provider>\n    );\n  }\n);\n\nTableHeader.displayName = \"Table.Header\";\n\nconst TableBody = forwardRef<any, TableBodyProps>(\n  (\n    { children, style, minRows, themeMode, themeProductContext, ...props },\n    ref\n  ) => {\n    const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n    const sizing = theme.sizing.table;\n\n    // Each row paints a 1px divider after it (rendered as a sibling Box\n    // inside Table.Row), except the very last row in the body which\n    // hides its divider. So a fully filled body of N rows is\n    // `N × rowHeight + (N - 1) × 1px`.\n    const DIVIDER_HEIGHT = 1;\n    const computedMinHeight = minRows\n      ? minRows * sizing.rowHeight + (minRows - 1) * DIVIDER_HEIGHT\n      : undefined;\n\n    // Decide whether to auto-pad with placeholder slots. We only pad\n    // when every direct child is a <Table.Row>; consumers using a\n    // single non-row block (e.g. a custom \"no results\" panel) get just\n    // the reserved min-height so they can stretch their content to fill.\n    let renderedChildren: ReactNode = children;\n    if (minRows) {\n      const childArray = React.Children.toArray(children);\n      const hasOnlyRowChildren =\n        childArray.length > 0 &&\n        childArray.every((c) => React.isValidElement(c) && c.type === TableRow);\n      const realRowCount = hasOnlyRowChildren ? childArray.length : 0;\n      const placeholderCount = hasOnlyRowChildren\n        ? Math.max(0, minRows - realRowCount)\n        : 0;\n\n      if (placeholderCount > 0) {\n        // Override the last real row's `hideDivider` so the body always\n        // ends with a divider-less slot — matching how a full page hides\n        // the last row's divider.\n        const patchedRows = childArray.map((child, i) => {\n          if (!React.isValidElement(child)) return child;\n          const isLastRealRow = i === realRowCount - 1;\n          return React.cloneElement(child, {\n            hideDivider: isLastRealRow\n              ? false\n              : (child.props as any).hideDivider,\n          } as any);\n        });\n\n        const placeholders = Array.from({ length: placeholderCount }).map(\n          (_, i) => {\n            const isLast = i === placeholderCount - 1;\n            return (\n              <Box\n                key={`__table-body-placeholder-${i}`}\n                aria-hidden\n                style={{\n                  height: isLast\n                    ? sizing.rowHeight\n                    : sizing.rowHeight + DIVIDER_HEIGHT,\n                  flexShrink: 0,\n                }}\n              />\n            );\n          }\n        );\n\n        renderedChildren = (\n          <>\n            {patchedRows}\n            {placeholders}\n          </>\n        );\n      }\n    }\n\n    return (\n      <TableRowGroupContext.Provider value=\"body\">\n        <Box\n          ref={ref}\n          flexDirection=\"column\"\n          alignItems=\"stretch\"\n          width=\"100%\"\n          role=\"rowgroup\"\n          {...props}\n          style={{\n            ...(computedMinHeight !== undefined && {\n              minHeight: computedMinHeight,\n            }),\n            ...style,\n          }}\n        >\n          {renderedChildren}\n        </Box>\n      </TableRowGroupContext.Provider>\n    );\n  }\n);\n\nTableBody.displayName = \"Table.Body\";\n\nconst TableRow = forwardRef<any, TableRowProps>(\n  (\n    {\n      children,\n      hoverable: hoverableProp,\n      selected,\n      hideDivider: hideDividerProp,\n      onPress,\n      themeMode,\n      themeProductContext,\n      style,\n      onMouseEnter,\n      onMouseLeave,\n      onFocus,\n      onBlur,\n      ...props\n    },\n    ref\n  ) => {\n    const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n    const sizing = theme.sizing.table;\n    const rowGroup = useContext(TableRowGroupContext);\n    const hoverCapable = useHoverCapable();\n\n    const isHeaderRow = rowGroup === \"header\";\n\n    // Header rows are not hoverable by default and don't render a divider\n    // (Header already paints its own top/bottom dividers).\n    const hoverable = hoverableProp ?? !isHeaderRow;\n    const hideDivider = hideDividerProp ?? isHeaderRow;\n\n    // Track hover + focus-within so descendant <Table.Cell revealOnHover>\n    // cells can decide whether to show themselves. Single re-render per\n    // hover/focus change, scoped to this row only.\n    const [hovered, setHovered] = useState(false);\n    const [focusedWithin, setFocusedWithin] = useState(false);\n\n    // On touch-only devices the reveal logic short-circuits to \"always\n    // visible\" — matches the Figma spec.\n    const revealed = hoverCapable ? hovered || focusedWithin : true;\n\n    const handleMouseEnter = useCallback(\n      (e: React.MouseEvent<HTMLElement>) => {\n        setHovered(true);\n        onMouseEnter?.(e);\n      },\n      [onMouseEnter]\n    );\n    const handleMouseLeave = useCallback(\n      (e: React.MouseEvent<HTMLElement>) => {\n        setHovered(false);\n        onMouseLeave?.(e);\n      },\n      [onMouseLeave]\n    );\n    const handleFocus = useCallback(\n      (e: React.FocusEvent<HTMLElement>) => {\n        setFocusedWithin(true);\n        onFocus?.(e);\n      },\n      [onFocus]\n    );\n    const handleBlur = useCallback(\n      (e: React.FocusEvent<HTMLElement>) => {\n        // When focus moves between two children of this row the blur fires\n        // here but the row is still focus-within — keep the state truthy.\n        if (\n          e.relatedTarget instanceof Node &&\n          e.currentTarget.contains(e.relatedTarget)\n        ) {\n          onBlur?.(e);\n          return;\n        }\n        setFocusedWithin(false);\n        onBlur?.(e);\n      },\n      [onBlur]\n    );\n\n    const baseBg = selected\n      ? theme.colors.background.secondary\n      : theme.colors.background.primary;\n\n    const rowHeight = isHeaderRow ? sizing.headerRowHeight : sizing.rowHeight;\n    const rowPaddingHorizontal = isHeaderRow\n      ? sizing.headerRowPaddingHorizontal\n      : sizing.rowPaddingHorizontal;\n\n    const ctxValue = useMemo(() => ({ revealed }), [revealed]);\n\n    return (\n      <RowRevealContext.Provider value={ctxValue}>\n        <Box\n          ref={ref}\n          flexDirection=\"row\"\n          alignItems=\"center\"\n          height={rowHeight}\n          paddingHorizontal={rowPaddingHorizontal}\n          width=\"100%\"\n          gap={sizing.cellGap}\n          backgroundColor={baseBg}\n          cursor={onPress ? \"pointer\" : undefined}\n          hoverStyle={\n            hoverable\n              ? { backgroundColor: theme.colors.background.secondary }\n              : undefined\n          }\n          onPress={onPress}\n          role=\"row\"\n          aria-selected={selected || undefined}\n          onMouseEnter={handleMouseEnter}\n          onMouseLeave={handleMouseLeave}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          {...props}\n          style={style}\n        >\n          {children}\n        </Box>\n        {!hideDivider && <Divider color={theme.colors.border.secondary} />}\n      </RowRevealContext.Provider>\n    );\n  }\n);\n\nTableRow.displayName = \"Table.Row\";\n\nconst positionToFlex = (position: TableCellProps[\"position\"]) => {\n  switch (position) {\n    case \"left\":\n      return { flexShrink: 0 };\n    case \"right\":\n      return { flexShrink: 0, marginLeft: \"auto\" };\n    default:\n      return {};\n  }\n};\n\nconst alignToJustify = (align: TableCellProps[\"align\"]) => {\n  switch (align) {\n    case \"right\":\n      return \"flex-end\" as const;\n    case \"center\":\n      return \"center\" as const;\n    default:\n      return \"flex-start\" as const;\n  }\n};\n\nconst TableCell = forwardRef<any, TableCellProps>(\n  (\n    {\n      children,\n      align = \"left\",\n      position = \"default\",\n      width,\n      grow,\n      revealOnHover,\n      themeMode,\n      themeProductContext,\n      style,\n      ...props\n    },\n    ref\n  ) => {\n    const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n    const sizing = theme.sizing.table;\n    const { revealed } = useContext(RowRevealContext);\n\n    const positionStyle = useMemo(() => positionToFlex(position), [position]);\n\n    // Per Figma spec: hide via opacity + pointer-events (NOT visibility) so\n    // keyboard Tab still focuses the descendants. Focusing a descendant flips\n    // `revealed` to true via RowRevealContext, restoring pointer-events.\n    const revealStyle: React.CSSProperties =\n      revealOnHover && !revealed\n        ? { opacity: 0, pointerEvents: \"none\" }\n        : revealOnHover\n          ? { opacity: 1, transition: \"opacity 0.15s ease\" }\n          : {};\n\n    return (\n      <Box\n        ref={ref}\n        flexDirection=\"row\"\n        alignItems=\"center\"\n        justifyContent={alignToJustify(align)}\n        gap={8}\n        height=\"100%\"\n        width={width}\n        role=\"cell\"\n        {...props}\n        style={{\n          flex: width != null ? \"0 0 auto\" : (grow ?? 1),\n          minWidth: 0,\n          ...positionStyle,\n          ...revealStyle,\n          ...style,\n        }}\n      >\n        {typeof children === \"string\" || typeof children === \"number\" ? (\n          <Text\n            fontSize={sizing.cellFontSize}\n            lineHeight={sizing.cellLineHeight}\n            color={theme.colors.content.primary}\n            // truncation\n            style={{\n              overflow: \"hidden\",\n              textOverflow: \"ellipsis\",\n              whiteSpace: \"nowrap\",\n              maxWidth: \"100%\",\n            }}\n          >\n            {children}\n          </Text>\n        ) : (\n          children\n        )}\n      </Box>\n    );\n  }\n);\n\nTableCell.displayName = \"Table.Cell\";\n\n/**\n * Sort indicator. Uses the `Sort` line icon from `@xsolla/xui-icons-base`\n * (matches the Figma spec — a stacked up/down chevron). The icon is the\n * same in all three states; opacity differentiates \"sortable but not\n * active\" (`none`, 40%) from \"active sort\" (`ascending` / `descending`,\n * 100%). Direction is communicated to assistive tech via `aria-sort` on\n * the parent <Table.Head>.\n */\nconst SortIcon: React.FC<{\n  direction: \"ascending\" | \"descending\" | \"none\";\n  color: string;\n  size: number;\n}> = ({ direction, color, size }) => (\n  <Box\n    style={{\n      flexShrink: 0,\n      opacity: direction === \"none\" ? 0.4 : 1,\n      transition: \"opacity 0.15s ease\",\n    }}\n  >\n    <Sort variant=\"line\" size={size} color={color} aria-hidden />\n  </Box>\n);\n\nconst TableHead = forwardRef<any, TableHeadProps>(\n  (\n    {\n      children,\n      align = \"left\",\n      position = \"default\",\n      width,\n      grow,\n      sort,\n      onSortToggle,\n      themeMode,\n      themeProductContext,\n      style,\n      ...props\n    },\n    ref\n  ) => {\n    const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n    const sizing = theme.sizing.table;\n\n    const positionStyle = useMemo(() => positionToFlex(position), [position]);\n    const sortable = sort != null;\n\n    const ariaSort: \"ascending\" | \"descending\" | \"none\" | undefined = sortable\n      ? sort\n      : undefined;\n\n    return (\n      <Box\n        ref={ref}\n        flexDirection=\"row\"\n        alignItems=\"center\"\n        justifyContent={alignToJustify(align)}\n        gap={sizing.headerCellGap}\n        height=\"100%\"\n        width={width}\n        role=\"columnheader\"\n        aria-sort={ariaSort}\n        cursor={sortable ? \"pointer\" : undefined}\n        onPress={sortable ? onSortToggle : undefined}\n        {...props}\n        style={{\n          flex: width != null ? \"0 0 auto\" : (grow ?? 1),\n          minWidth: 0,\n          ...positionStyle,\n          ...style,\n        }}\n      >\n        {sortable && (\n          <SortIcon\n            direction={sort}\n            color={theme.colors.content.secondary}\n            size={sizing.headerCellFontSize + 2}\n          />\n        )}\n        {typeof children === \"string\" || typeof children === \"number\" ? (\n          <Text\n            fontSize={sizing.headerCellFontSize}\n            lineHeight={sizing.headerCellLineHeight}\n            color={theme.colors.content.secondary}\n            fontWeight=\"500\"\n            style={{\n              overflow: \"hidden\",\n              textOverflow: \"ellipsis\",\n              whiteSpace: \"nowrap\",\n            }}\n          >\n            {children}\n          </Text>\n        ) : (\n          children\n        )}\n      </Box>\n    );\n  }\n);\n\nTableHead.displayName = \"Table.Head\";\n\nconst TableFooter = forwardRef<any, TableFooterProps>(\n  ({ children, style, ...props }, ref) => {\n    const { theme } = useResolvedTheme();\n    const sizing = theme.sizing.table;\n\n    return (\n      <Box\n        ref={ref}\n        flexDirection=\"row\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        gap={sizing.paginationGap}\n        paddingHorizontal={sizing.paginationPaddingHorizontal}\n        width=\"100%\"\n        {...props}\n        style={style}\n      >\n        {children}\n      </Box>\n    );\n  }\n);\n\nTableFooter.displayName = \"Table.Footer\";\n\nexport const Table = Object.assign(TableRoot, {\n  Caption: TableCaption,\n  Header: TableHeader,\n  Body: TableBody,\n  Footer: TableFooter,\n  Row: TableRow,\n  Head: TableHead,\n  Cell: TableCell,\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  minWidth,\n  minHeight,\n  maxWidth,\n  maxHeight,\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    minWidth: minWidth as DimensionValue,\n    minHeight: minHeight as DimensionValue,\n    maxWidth: maxWidth as DimensionValue,\n    maxHeight: maxHeight 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: color ?? incomingStyle?.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":";AAAA,OAAO;AAAA,EACL;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;;;ACRP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AA2ID;AAxIC,IAAM,MAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,oBAAoB,CAAC,aAAkC;AAAA,IAC3D,iBACE,WAAW,YAAY,kBACnB,WAAW,kBACX;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAI;AAAA,EACN;AAEA,QAAM,cAAc,cAAc;AAIlC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb;AAAA,IACA,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAI;AAGJ,MAAI,OAAO,SAAS,KAAK;AACvB,UAAM,aAAyB;AAAA,MAC7B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAI;AAAA,IACN;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ,EAAE,KAAK,IAAI;AAAA,QACnB,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,YAAW;AAAA,QACV,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AAEA,MAAI,SAAS;AACX,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO,CAAC,EAAE,QAAQ,MAAM,kBAAkB,OAAO;AAAA,QACjD,QAAQ;AAAA,QACP,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,kBAAkB;AAAA,MACzB,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;;;AC/LA;AAAA,EACE,QAAQ;AAAA,EAGR;AAAA,OACK;AAmEH,gBAAAA,YAAA;AAhEJ,IAAM,UAA6C;AAAA,EACjD,OAAO;AAAA,EACP,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,MAAM;AACR;AAEA,IAAM,oBAAoB,CACxB,UACuB;AACvB,MAAI,UAAU,OAAW,QAAO;AAChC,MAAI,OAAO,UAAU,SAAU,QAAO;AACtC,QAAM,SAAS,WAAW,KAAK;AAC/B,SAAO,MAAM,MAAM,IAAI,SAAY;AACrC;AAEO,IAAM,OAA4B,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,MAAM;AACJ,MAAI,qBAAqB,aACrB,WAAW,MAAM,GAAG,EAAE,CAAC,EAAE,QAAQ,SAAS,EAAE,EAAE,KAAK,IACnD;AAEJ,MACE,uBAAuB,gBACvB,uBAAuB,qBACvB,uBAAuB,iBACvB;AACA,yBAAqB;AAAA,EACvB;AAEA,QAAM,gBAAgB,WAAW,QAAQ,SAAS;AAElD,QAAM,YAAuB;AAAA,IAC3B,OAAO,SAAS,eAAe;AAAA,IAC/B,UAAU,OAAO,aAAa,WAAW,WAAW;AAAA,IACpD;AAAA,IACA,YAAY;AAAA,IACZ,oBAAoB,MAAM;AAAA,IAC1B,WAAW,aAAa,eAAe;AAAA,IACvC,YAAY,kBAAkB,cAAc,eAAe,UAAU;AAAA,IACrE,WAAW;AAAA,MACT,eAAe;AAAA,IACjB;AAAA,IACA,cAAc;AAAA,MACZ,eAAe;AAAA,IACjB;AAAA,EACF;AAEA,QAAM,oBAAoB,OAAO,QAAQ,IAAI,IAAI;AAEjD,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;;;AFtEA,SAAS,kBAAkB,gBAAgB;AAC3C,SAAS,YAAY;AAuDnB,SAwKQ,UAxKR,OAAAC,MA8EM,YA9EN;AArCF,IAAM,uBAAuB,cAAwB,MAAM;AAQ3D,IAAM,mBAAmB,cAAqC;AAAA,EAC5D,UAAU;AACZ,CAAC;AAYD,IAAM,kBAAkB,MAAe;AACrC,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,IAAI;AACrD,YAAU,MAAM;AACd,QAAI,SAAU;AACd,QAAI,OAAO,WAAW,eAAe,CAAC,OAAO,WAAY;AACzD,UAAM,KAAK,OAAO,WAAW,gBAAgB;AAC7C,oBAAgB,GAAG,OAAO;AAC1B,UAAM,WAAW,CAAC,MAA2B,gBAAgB,EAAE,OAAO;AACtE,OAAG,mBAAmB,UAAU,QAAQ;AACxC,WAAO,MAAM,GAAG,sBAAsB,UAAU,QAAQ;AAAA,EAC1D,GAAG,CAAC,CAAC;AACL,SAAO;AACT;AAEA,IAAM,UAAuC,CAAC,EAAE,MAAM,MACpD,gBAAAA;AAAA,EAAC;AAAA;AAAA,IACC,OAAM;AAAA,IACN,QAAQ;AAAA,IACR,iBAAiB;AAAA,IACjB,OAAO,EAAE,YAAY,EAAE;AAAA;AACzB;AAGF,IAAM,YAAY;AAAA,EAChB,CAAC,EAAE,UAAU,WAAW,oBAAoB,GAAG,QAAQ;AACrD,UAAM,EAAE,MAAM,IAAI,iBAAiB,EAAE,WAAW,oBAAoB,CAAC;AACrE,UAAM,SAAS,MAAM,OAAO;AAE5B,WACE,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAc;AAAA,QACd,YAAW;AAAA,QACX,KAAK,OAAO;AAAA,QACZ,iBAAiB,OAAO;AAAA,QACxB,iBAAiB,MAAM,OAAO,WAAW;AAAA,QACzC,cAAc,OAAO;AAAA,QACrB,OAAM;AAAA,QACN,MAAK;AAAA,QACL,OAAO;AAAA,UACL,OAAO,MAAM,OAAO,QAAQ;AAAA,UAC5B,UAAU;AAAA,QACZ;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,UAAU,cAAc;AAExB,IAAM,eAAe;AAAA,EACnB,CAAC,EAAE,UAAU,WAAW,qBAAqB,OAAO,GAAG,MAAM,GAAG,QAAQ;AACtE,UAAM,EAAE,MAAM,IAAI,iBAAiB,EAAE,WAAW,oBAAoB,CAAC;AACrE,UAAM,SAAS,MAAM,OAAO;AAE5B,WACE,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAc;AAAA,QACd,YAAW;AAAA,QACX,mBAAmB,OAAO;AAAA,QAC1B,OAAM;AAAA,QAGL,GAAG;AAAA,QACJ;AAAA,QAEC,iBAAO,aAAa,YAAY,OAAO,aAAa,WACnD,gBAAAA;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,OAAO;AAAA,YACjB,YAAY,OAAO;AAAA,YACnB,OAAO,MAAM,OAAO,QAAQ;AAAA,YAE3B;AAAA;AAAA,QACH,IAEA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,aAAa,cAAc;AAE3B,IAAM,cAAc;AAAA,EAClB,CAAC,EAAE,UAAU,WAAW,qBAAqB,OAAO,GAAG,MAAM,GAAG,QAAQ;AACtE,UAAM,EAAE,MAAM,IAAI,iBAAiB,EAAE,WAAW,oBAAoB,CAAC;AAErE,WACE,gBAAAA,KAAC,qBAAqB,UAArB,EAA8B,OAAM,UACnC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAc;AAAA,QACd,YAAW;AAAA,QACX,OAAM;AAAA,QACN,MAAK;AAAA,QACJ,GAAG;AAAA,QACJ,OAAO;AAAA,UACL,UAAU;AAAA,UACV,KAAK;AAAA,UACL,QAAQ;AAAA,UACR,iBAAiB,MAAM,OAAO,WAAW;AAAA,UACzC,GAAG;AAAA,QACL;AAAA,QAEC;AAAA;AAAA,UACD,gBAAAA,KAAC,WAAQ,OAAO,MAAM,OAAO,OAAO,WAAW;AAAA;AAAA;AAAA,IACjD,GACF;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;AAE1B,IAAM,YAAY;AAAA,EAChB,CACE,EAAE,UAAU,OAAO,SAAS,WAAW,qBAAqB,GAAG,MAAM,GACrE,QACG;AACH,UAAM,EAAE,MAAM,IAAI,iBAAiB,EAAE,WAAW,oBAAoB,CAAC;AACrE,UAAM,SAAS,MAAM,OAAO;AAM5B,UAAM,iBAAiB;AACvB,UAAM,oBAAoB,UACtB,UAAU,OAAO,aAAa,UAAU,KAAK,iBAC7C;AAMJ,QAAI,mBAA8B;AAClC,QAAI,SAAS;AACX,YAAM,aAAa,MAAM,SAAS,QAAQ,QAAQ;AAClD,YAAM,qBACJ,WAAW,SAAS,KACpB,WAAW,MAAM,CAAC,MAAM,MAAM,eAAe,CAAC,KAAK,EAAE,SAAS,QAAQ;AACxE,YAAM,eAAe,qBAAqB,WAAW,SAAS;AAC9D,YAAM,mBAAmB,qBACrB,KAAK,IAAI,GAAG,UAAU,YAAY,IAClC;AAEJ,UAAI,mBAAmB,GAAG;AAIxB,cAAM,cAAc,WAAW,IAAI,CAAC,OAAO,MAAM;AAC/C,cAAI,CAAC,MAAM,eAAe,KAAK,EAAG,QAAO;AACzC,gBAAM,gBAAgB,MAAM,eAAe;AAC3C,iBAAO,MAAM,aAAa,OAAO;AAAA,YAC/B,aAAa,gBACT,QACC,MAAM,MAAc;AAAA,UAC3B,CAAQ;AAAA,QACV,CAAC;AAED,cAAM,eAAe,MAAM,KAAK,EAAE,QAAQ,iBAAiB,CAAC,EAAE;AAAA,UAC5D,CAAC,GAAG,MAAM;AACR,kBAAM,SAAS,MAAM,mBAAmB;AACxC,mBACE,gBAAAA;AAAA,cAAC;AAAA;AAAA,gBAEC,eAAW;AAAA,gBACX,OAAO;AAAA,kBACL,QAAQ,SACJ,OAAO,YACP,OAAO,YAAY;AAAA,kBACvB,YAAY;AAAA,gBACd;AAAA;AAAA,cAPK,4BAA4B,CAAC;AAAA,YAQpC;AAAA,UAEJ;AAAA,QACF;AAEA,2BACE,iCACG;AAAA;AAAA,UACA;AAAA,WACH;AAAA,MAEJ;AAAA,IACF;AAEA,WACE,gBAAAA,KAAC,qBAAqB,UAArB,EAA8B,OAAM,QACnC,0BAAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAc;AAAA,QACd,YAAW;AAAA,QACX,OAAM;AAAA,QACN,MAAK;AAAA,QACJ,GAAG;AAAA,QACJ,OAAO;AAAA,UACL,GAAI,sBAAsB,UAAa;AAAA,YACrC,WAAW;AAAA,UACb;AAAA,UACA,GAAG;AAAA,QACL;AAAA,QAEC;AAAA;AAAA,IACH,GACF;AAAA,EAEJ;AACF;AAEA,UAAU,cAAc;AAExB,IAAM,WAAW;AAAA,EACf,CACE;AAAA,IACE;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,EAAE,MAAM,IAAI,iBAAiB,EAAE,WAAW,oBAAoB,CAAC;AACrE,UAAM,SAAS,MAAM,OAAO;AAC5B,UAAM,WAAW,WAAW,oBAAoB;AAChD,UAAM,eAAe,gBAAgB;AAErC,UAAM,cAAc,aAAa;AAIjC,UAAM,YAAY,iBAAiB,CAAC;AACpC,UAAM,cAAc,mBAAmB;AAKvC,UAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,UAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AAIxD,UAAM,WAAW,eAAe,WAAW,gBAAgB;AAE3D,UAAM,mBAAmB;AAAA,MACvB,CAAC,MAAqC;AACpC,mBAAW,IAAI;AACf,uBAAe,CAAC;AAAA,MAClB;AAAA,MACA,CAAC,YAAY;AAAA,IACf;AACA,UAAM,mBAAmB;AAAA,MACvB,CAAC,MAAqC;AACpC,mBAAW,KAAK;AAChB,uBAAe,CAAC;AAAA,MAClB;AAAA,MACA,CAAC,YAAY;AAAA,IACf;AACA,UAAM,cAAc;AAAA,MAClB,CAAC,MAAqC;AACpC,yBAAiB,IAAI;AACrB,kBAAU,CAAC;AAAA,MACb;AAAA,MACA,CAAC,OAAO;AAAA,IACV;AACA,UAAM,aAAa;AAAA,MACjB,CAAC,MAAqC;AAGpC,YACE,EAAE,yBAAyB,QAC3B,EAAE,cAAc,SAAS,EAAE,aAAa,GACxC;AACA,mBAAS,CAAC;AACV;AAAA,QACF;AACA,yBAAiB,KAAK;AACtB,iBAAS,CAAC;AAAA,MACZ;AAAA,MACA,CAAC,MAAM;AAAA,IACT;AAEA,UAAM,SAAS,WACX,MAAM,OAAO,WAAW,YACxB,MAAM,OAAO,WAAW;AAE5B,UAAM,YAAY,cAAc,OAAO,kBAAkB,OAAO;AAChE,UAAM,uBAAuB,cACzB,OAAO,6BACP,OAAO;AAEX,UAAM,WAAW,QAAQ,OAAO,EAAE,SAAS,IAAI,CAAC,QAAQ,CAAC;AAEzD,WACE,qBAAC,iBAAiB,UAAjB,EAA0B,OAAO,UAChC;AAAA,sBAAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,eAAc;AAAA,UACd,YAAW;AAAA,UACX,QAAQ;AAAA,UACR,mBAAmB;AAAA,UACnB,OAAM;AAAA,UACN,KAAK,OAAO;AAAA,UACZ,iBAAiB;AAAA,UACjB,QAAQ,UAAU,YAAY;AAAA,UAC9B,YACE,YACI,EAAE,iBAAiB,MAAM,OAAO,WAAW,UAAU,IACrD;AAAA,UAEN;AAAA,UACA,MAAK;AAAA,UACL,iBAAe,YAAY;AAAA,UAC3B,cAAc;AAAA,UACd,cAAc;AAAA,UACd,SAAS;AAAA,UACT,QAAQ;AAAA,UACP,GAAG;AAAA,UACJ;AAAA,UAEC;AAAA;AAAA,MACH;AAAA,MACC,CAAC,eAAe,gBAAAA,KAAC,WAAQ,OAAO,MAAM,OAAO,OAAO,WAAW;AAAA,OAClE;AAAA,EAEJ;AACF;AAEA,SAAS,cAAc;AAEvB,IAAM,iBAAiB,CAAC,aAAyC;AAC/D,UAAQ,UAAU;AAAA,IAChB,KAAK;AACH,aAAO,EAAE,YAAY,EAAE;AAAA,IACzB,KAAK;AACH,aAAO,EAAE,YAAY,GAAG,YAAY,OAAO;AAAA,IAC7C;AACE,aAAO,CAAC;AAAA,EACZ;AACF;AAEA,IAAM,iBAAiB,CAAC,UAAmC;AACzD,UAAQ,OAAO;AAAA,IACb,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAEA,IAAM,YAAY;AAAA,EAChB,CACE;AAAA,IACE;AAAA,IACA,QAAQ;AAAA,IACR,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,EAAE,MAAM,IAAI,iBAAiB,EAAE,WAAW,oBAAoB,CAAC;AACrE,UAAM,SAAS,MAAM,OAAO;AAC5B,UAAM,EAAE,SAAS,IAAI,WAAW,gBAAgB;AAEhD,UAAM,gBAAgB,QAAQ,MAAM,eAAe,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAKxE,UAAM,cACJ,iBAAiB,CAAC,WACd,EAAE,SAAS,GAAG,eAAe,OAAO,IACpC,gBACE,EAAE,SAAS,GAAG,YAAY,qBAAqB,IAC/C,CAAC;AAET,WACE,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAc;AAAA,QACd,YAAW;AAAA,QACX,gBAAgB,eAAe,KAAK;AAAA,QACpC,KAAK;AAAA,QACL,QAAO;AAAA,QACP;AAAA,QACA,MAAK;AAAA,QACJ,GAAG;AAAA,QACJ,OAAO;AAAA,UACL,MAAM,SAAS,OAAO,aAAc,QAAQ;AAAA,UAC5C,UAAU;AAAA,UACV,GAAG;AAAA,UACH,GAAG;AAAA,UACH,GAAG;AAAA,QACL;AAAA,QAEC,iBAAO,aAAa,YAAY,OAAO,aAAa,WACnD,gBAAAA;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,OAAO;AAAA,YACjB,YAAY,OAAO;AAAA,YACnB,OAAO,MAAM,OAAO,QAAQ;AAAA,YAE5B,OAAO;AAAA,cACL,UAAU;AAAA,cACV,cAAc;AAAA,cACd,YAAY;AAAA,cACZ,UAAU;AAAA,YACZ;AAAA,YAEC;AAAA;AAAA,QACH,IAEA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,UAAU,cAAc;AAUxB,IAAM,WAID,CAAC,EAAE,WAAW,OAAO,KAAK,MAC7B,gBAAAA;AAAA,EAAC;AAAA;AAAA,IACC,OAAO;AAAA,MACL,YAAY;AAAA,MACZ,SAAS,cAAc,SAAS,MAAM;AAAA,MACtC,YAAY;AAAA,IACd;AAAA,IAEA,0BAAAA,KAAC,QAAK,SAAQ,QAAO,MAAY,OAAc,eAAW,MAAC;AAAA;AAC7D;AAGF,IAAM,YAAY;AAAA,EAChB,CACE;AAAA,IACE;AAAA,IACA,QAAQ;AAAA,IACR,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,EAAE,MAAM,IAAI,iBAAiB,EAAE,WAAW,oBAAoB,CAAC;AACrE,UAAM,SAAS,MAAM,OAAO;AAE5B,UAAM,gBAAgB,QAAQ,MAAM,eAAe,QAAQ,GAAG,CAAC,QAAQ,CAAC;AACxE,UAAM,WAAW,QAAQ;AAEzB,UAAM,WAA4D,WAC9D,OACA;AAEJ,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAc;AAAA,QACd,YAAW;AAAA,QACX,gBAAgB,eAAe,KAAK;AAAA,QACpC,KAAK,OAAO;AAAA,QACZ,QAAO;AAAA,QACP;AAAA,QACA,MAAK;AAAA,QACL,aAAW;AAAA,QACX,QAAQ,WAAW,YAAY;AAAA,QAC/B,SAAS,WAAW,eAAe;AAAA,QAClC,GAAG;AAAA,QACJ,OAAO;AAAA,UACL,MAAM,SAAS,OAAO,aAAc,QAAQ;AAAA,UAC5C,UAAU;AAAA,UACV,GAAG;AAAA,UACH,GAAG;AAAA,QACL;AAAA,QAEC;AAAA,sBACC,gBAAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,cACX,OAAO,MAAM,OAAO,QAAQ;AAAA,cAC5B,MAAM,OAAO,qBAAqB;AAAA;AAAA,UACpC;AAAA,UAED,OAAO,aAAa,YAAY,OAAO,aAAa,WACnD,gBAAAA;AAAA,YAAC;AAAA;AAAA,cACC,UAAU,OAAO;AAAA,cACjB,YAAY,OAAO;AAAA,cACnB,OAAO,MAAM,OAAO,QAAQ;AAAA,cAC5B,YAAW;AAAA,cACX,OAAO;AAAA,gBACL,UAAU;AAAA,gBACV,cAAc;AAAA,gBACd,YAAY;AAAA,cACd;AAAA,cAEC;AAAA;AAAA,UACH,IAEA;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,UAAU,cAAc;AAExB,IAAM,cAAc;AAAA,EAClB,CAAC,EAAE,UAAU,OAAO,GAAG,MAAM,GAAG,QAAQ;AACtC,UAAM,EAAE,MAAM,IAAI,iBAAiB;AACnC,UAAM,SAAS,MAAM,OAAO;AAE5B,WACE,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAc;AAAA,QACd,YAAW;AAAA,QACX,gBAAe;AAAA,QACf,KAAK,OAAO;AAAA,QACZ,mBAAmB,OAAO;AAAA,QAC1B,OAAM;AAAA,QACL,GAAG;AAAA,QACJ;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;AAEnB,IAAM,QAAQ,OAAO,OAAO,WAAW;AAAA,EAC5C,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,MAAM;AAAA,EACN,MAAM;AACR,CAAC;","names":["jsx","jsx"]}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@xsolla/xui-table",
+  "version": "0.151.0-pr273.1778117489",
+  "main": "./web/index.js",
+  "module": "./web/index.mjs",
+  "types": "./web/index.d.ts",
+  "scripts": {
+    "build": "yarn build:web && yarn build:native",
+    "build:web": "PLATFORM=web tsup",
+    "build:native": "PLATFORM=native tsup",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage"
+  },
+  "dependencies": {
+    "@xsolla/xui-core": "0.151.0-pr273.1778117489",
+    "@xsolla/xui-icons-base": "0.151.0-pr273.1778117489",
+    "@xsolla/xui-primitives-core": "0.151.0-pr273.1778117489"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "styled-components": ">=4"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^14.1.2",
+    "@vitest/coverage-v8": "^4.0.18",
+    "jsdom": "^24.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "tsup": "^8.0.0",
+    "vitest": "^4.0.18"
+  },
+  "license": "MIT",
+  "sideEffects": false,
+  "react-native": "./native/index.js",
+  "exports": {
+    ".": {
+      "react-native": {
+        "types": "./native/index.d.ts",
+        "import": "./native/index.mjs",
+        "require": "./native/index.js"
+      },
+      "import": {
+        "types": "./web/index.d.ts",
+        "default": "./web/index.mjs"
+      },
+      "require": {
+        "types": "./web/index.d.ts",
+        "default": "./web/index.js"
+      },
+      "default": {
+        "types": "./web/index.d.ts",
+        "default": "./web/index.js"
+      }
+    }
+  }
+}

package/web/index.d.mts

@@ -0,0 +1,122 @@
+import * as React from 'react';
+import React__default, { ReactNode } from 'react';
+import { BoxProps } from '@xsolla/xui-primitives-core';
+import { ThemeOverrideProps } from '@xsolla/xui-core';
+
+type TableCellAlign = "left" | "right" | "center";
+type TableCellPosition = "default" | "left" | "right";
+/**
+ * Structural primitives only:
+ *
+ *   <Table>
+ *     <Table.Caption />     ← optional <caption>-equivalent for a11y
+ *     <Table.Header>        ← <thead>-equivalent (sticky)
+ *       <Table.Row>
+ *         <Table.Head />    ← <th>-equivalent (sortable)
+ *       </Table.Row>
+ *     </Table.Header>
+ *     <Table.Body>          ← <tbody>-equivalent
+ *       <Table.Row>
+ *         <Table.Cell />
+ *       </Table.Row>
+ *     </Table.Body>
+ *     <Table.Footer />      ← slot for pagination etc.
+ *   </Table>
+ *
+ * Filter panels, item counters, title blocks, bulk-selection bars, and
+ * pagination components are NOT part of the surface — compose them on the
+ * consumer side around <Table>.
+ *
+ * Density is single-source from Figma (`theme.sizing.table`); no `size`
+ * prop. If Figma ever ships md/sm variants, this will become a function
+ * with a size argument again.
+ */
+/**
+ * `<Table>` is intentionally opaque: no `style`, no Box-level props. The
+ * surface is `children` only (plus theme overrides). To wrap the table in
+ * a horizontal-scroll viewport, compose two outer Boxes around it — see
+ * the `HorizontalScroll` story or the README "Horizontal scroll" section.
+ */
+interface TableProps extends ThemeOverrideProps {
+    children?: ReactNode;
+}
+interface TableCaptionProps extends BoxProps, ThemeOverrideProps {
+    children?: ReactNode;
+}
+interface TableHeaderProps extends BoxProps, ThemeOverrideProps {
+    children?: ReactNode;
+}
+interface TableBodyProps extends BoxProps, ThemeOverrideProps {
+    children?: ReactNode;
+    /**
+     * Reserve space for at least this many row slots. Useful for paginated
+     * tables where partial last pages or empty filter results would
+     * otherwise make the card height jump between states.
+     *
+     * When the body contains only `<Table.Row>` children and there are
+     * fewer of them than `minRows`, invisible placeholder slots are
+     * appended to fill the difference, and the last real row keeps its
+     * divider visible (mirroring a fully filled page).
+     *
+     * If the body contains non-row children (e.g. a custom empty-state
+     * block), no placeholders are appended — the body just reserves the
+     * full height via `min-height` so the consumer can stretch their
+     * empty-state to fill it.
+     */
+    minRows?: number;
+}
+interface TableFooterProps extends BoxProps {
+    children?: ReactNode;
+}
+interface TableRowProps extends BoxProps, ThemeOverrideProps {
+    children?: ReactNode;
+    /** Highlight the row on hover. Defaults to true (body rows only). */
+    hoverable?: boolean;
+    /** Marks the row as selected. */
+    selected?: boolean;
+    /** Hide the bottom divider for this row. */
+    hideDivider?: boolean;
+    /** Click handler. When provided, the row becomes interactive. */
+    onPress?: () => void;
+    /**
+     * Optional focus events. The Row uses these internally to track
+     * focus-within so that descendant `revealOnHover` cells can show
+     * themselves when keyboard-focused; consumer handlers (if provided) are
+     * still invoked.
+     */
+    onFocus?: (e: React.FocusEvent<HTMLElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLElement>) => void;
+}
+interface TableCellProps extends Omit<BoxProps, "position">, ThemeOverrideProps {
+    children?: ReactNode;
+    /** Cell text alignment. Defaults to "left". */
+    align?: TableCellAlign;
+    /** Position within the row — controls padding (left = leading, right = trailing). */
+    position?: TableCellPosition;
+    /** Allow the cell to flex to fill space. */
+    grow?: number;
+    /**
+     * Hide the cell until the parent row is hovered or focused (via `:focus-within`).
+     * Typically used for `position="right"` action cells per Figma spec.
+     * Falls back to always-visible on touch devices.
+     */
+    revealOnHover?: boolean;
+}
+interface TableHeadProps extends TableCellProps {
+    /** Sort direction. */
+    sort?: "ascending" | "descending" | "none";
+    /** Click to toggle sort. */
+    onSortToggle?: () => void;
+}
+
+declare const Table: React__default.ForwardRefExoticComponent<TableProps & React__default.RefAttributes<any>> & {
+    Caption: React__default.ForwardRefExoticComponent<TableCaptionProps & React__default.RefAttributes<any>>;
+    Header: React__default.ForwardRefExoticComponent<TableHeaderProps & React__default.RefAttributes<any>>;
+    Body: React__default.ForwardRefExoticComponent<TableBodyProps & React__default.RefAttributes<any>>;
+    Footer: React__default.ForwardRefExoticComponent<TableFooterProps & React__default.RefAttributes<any>>;
+    Row: React__default.ForwardRefExoticComponent<TableRowProps & React__default.RefAttributes<any>>;
+    Head: React__default.ForwardRefExoticComponent<TableHeadProps & React__default.RefAttributes<any>>;
+    Cell: React__default.ForwardRefExoticComponent<TableCellProps & React__default.RefAttributes<any>>;
+};
+
+export { Table, type TableBodyProps, type TableCaptionProps, type TableCellAlign, type TableCellPosition, type TableCellProps, type TableFooterProps, type TableHeadProps, type TableHeaderProps, type TableProps, type TableRowProps };

package/web/index.d.ts

@@ -0,0 +1,122 @@
+import * as React from 'react';
+import React__default, { ReactNode } from 'react';
+import { BoxProps } from '@xsolla/xui-primitives-core';
+import { ThemeOverrideProps } from '@xsolla/xui-core';
+
+type TableCellAlign = "left" | "right" | "center";
+type TableCellPosition = "default" | "left" | "right";
+/**
+ * Structural primitives only:
+ *
+ *   <Table>
+ *     <Table.Caption />     ← optional <caption>-equivalent for a11y
+ *     <Table.Header>        ← <thead>-equivalent (sticky)
+ *       <Table.Row>
+ *         <Table.Head />    ← <th>-equivalent (sortable)
+ *       </Table.Row>
+ *     </Table.Header>
+ *     <Table.Body>          ← <tbody>-equivalent
+ *       <Table.Row>
+ *         <Table.Cell />
+ *       </Table.Row>
+ *     </Table.Body>
+ *     <Table.Footer />      ← slot for pagination etc.
+ *   </Table>
+ *
+ * Filter panels, item counters, title blocks, bulk-selection bars, and
+ * pagination components are NOT part of the surface — compose them on the
+ * consumer side around <Table>.
+ *
+ * Density is single-source from Figma (`theme.sizing.table`); no `size`
+ * prop. If Figma ever ships md/sm variants, this will become a function
+ * with a size argument again.
+ */
+/**
+ * `<Table>` is intentionally opaque: no `style`, no Box-level props. The
+ * surface is `children` only (plus theme overrides). To wrap the table in
+ * a horizontal-scroll viewport, compose two outer Boxes around it — see
+ * the `HorizontalScroll` story or the README "Horizontal scroll" section.
+ */
+interface TableProps extends ThemeOverrideProps {
+    children?: ReactNode;
+}
+interface TableCaptionProps extends BoxProps, ThemeOverrideProps {
+    children?: ReactNode;
+}
+interface TableHeaderProps extends BoxProps, ThemeOverrideProps {
+    children?: ReactNode;
+}
+interface TableBodyProps extends BoxProps, ThemeOverrideProps {
+    children?: ReactNode;
+    /**
+     * Reserve space for at least this many row slots. Useful for paginated
+     * tables where partial last pages or empty filter results would
+     * otherwise make the card height jump between states.
+     *
+     * When the body contains only `<Table.Row>` children and there are
+     * fewer of them than `minRows`, invisible placeholder slots are
+     * appended to fill the difference, and the last real row keeps its
+     * divider visible (mirroring a fully filled page).
+     *
+     * If the body contains non-row children (e.g. a custom empty-state
+     * block), no placeholders are appended — the body just reserves the
+     * full height via `min-height` so the consumer can stretch their
+     * empty-state to fill it.
+     */
+    minRows?: number;
+}
+interface TableFooterProps extends BoxProps {
+    children?: ReactNode;
+}
+interface TableRowProps extends BoxProps, ThemeOverrideProps {
+    children?: ReactNode;
+    /** Highlight the row on hover. Defaults to true (body rows only). */
+    hoverable?: boolean;
+    /** Marks the row as selected. */
+    selected?: boolean;
+    /** Hide the bottom divider for this row. */
+    hideDivider?: boolean;
+    /** Click handler. When provided, the row becomes interactive. */
+    onPress?: () => void;
+    /**
+     * Optional focus events. The Row uses these internally to track
+     * focus-within so that descendant `revealOnHover` cells can show
+     * themselves when keyboard-focused; consumer handlers (if provided) are
+     * still invoked.
+     */
+    onFocus?: (e: React.FocusEvent<HTMLElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLElement>) => void;
+}
+interface TableCellProps extends Omit<BoxProps, "position">, ThemeOverrideProps {
+    children?: ReactNode;
+    /** Cell text alignment. Defaults to "left". */
+    align?: TableCellAlign;
+    /** Position within the row — controls padding (left = leading, right = trailing). */
+    position?: TableCellPosition;
+    /** Allow the cell to flex to fill space. */
+    grow?: number;
+    /**
+     * Hide the cell until the parent row is hovered or focused (via `:focus-within`).
+     * Typically used for `position="right"` action cells per Figma spec.
+     * Falls back to always-visible on touch devices.
+     */
+    revealOnHover?: boolean;
+}
+interface TableHeadProps extends TableCellProps {
+    /** Sort direction. */
+    sort?: "ascending" | "descending" | "none";
+    /** Click to toggle sort. */
+    onSortToggle?: () => void;
+}
+
+declare const Table: React__default.ForwardRefExoticComponent<TableProps & React__default.RefAttributes<any>> & {
+    Caption: React__default.ForwardRefExoticComponent<TableCaptionProps & React__default.RefAttributes<any>>;
+    Header: React__default.ForwardRefExoticComponent<TableHeaderProps & React__default.RefAttributes<any>>;
+    Body: React__default.ForwardRefExoticComponent<TableBodyProps & React__default.RefAttributes<any>>;
+    Footer: React__default.ForwardRefExoticComponent<TableFooterProps & React__default.RefAttributes<any>>;
+    Row: React__default.ForwardRefExoticComponent<TableRowProps & React__default.RefAttributes<any>>;
+    Head: React__default.ForwardRefExoticComponent<TableHeadProps & React__default.RefAttributes<any>>;
+    Cell: React__default.ForwardRefExoticComponent<TableCellProps & React__default.RefAttributes<any>>;
+};
+
+export { Table, type TableBodyProps, type TableCaptionProps, type TableCellAlign, type TableCellPosition, type TableCellProps, type TableFooterProps, type TableHeadProps, type TableHeaderProps, type TableProps, type TableRowProps };