@xsolla/xui-primitives-web

Internal package — do not use directly. This package is used internally to build toolkit components. Consumers should use the published components (e.g. @xsolla/xui-button, @xsolla/xui-controls).

Web implementations of XUI primitive components, built with styled-components.

Exports

• Box — Flex layout container (div); supports full BoxProps including hover/press/focus styles and ARIA attributes
• Text — Inline text element; supports colour, fontSize, fontWeight, alignment, and numberOfLines truncation
• Spinner — Animated SVG loading indicator
• Icon — SVG icon wrapper accepting child SVG content
• Divider — Horizontal or vertical line separator; supports dashed style
• Input — Styled <input> element with cross-platform prop interface
• TextArea — Styled <textarea> with optional auto-resize via autoSize

Text truncation (numberOfLines)

numberOfLines is the cross-platform truncation prop. Native forwards it to RNText; web emits the equivalent CSS:

| Value | CSS emitted | | :---- | :---------- | | unset / 0 | none — the text wraps normally | | 1 | display: block + white-space: nowrap + overflow: hidden + text-overflow: ellipsis | | > 1 | display: -webkit-box + -webkit-box-orient: vertical + -webkit-line-clamp: N + overflow: hidden |

Two details are easy to miss when reading the generated CSS:

• The <span> is promoted to display: block because text-overflow has no effect on an inline box — without it the ellipsis silently never renders.
• min-width: 0 is emitted so the text can shrink below its own content width inside a flex row. Without it a nowrap label keeps its full intrinsic width and pushes its siblings (leading icons, chevrons) out of a fixed-width field.

Anything passed through the style prop is applied inline and therefore overrides these rules — callers that need different layout can opt out.

Pair numberOfLines with title to keep the untruncated string reachable on hover. title is web-only and is ignored on native.