@xsolla/xui-avatar 0.78.0 → 0.79.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/native/index.js +0 -6
- package/native/index.js.map +1 -1
- package/native/index.mjs +0 -6
- package/native/index.mjs.map +1 -1
- package/package.json +6 -6
- package/web/index.js.map +1 -1
- package/web/index.mjs.map +1 -1
package/native/index.js
CHANGED
|
@@ -245,7 +245,6 @@ var Spinner = ({
|
|
|
245
245
|
role,
|
|
246
246
|
"aria-label": ariaLabel,
|
|
247
247
|
"aria-live": ariaLive,
|
|
248
|
-
"aria-describedby": ariaDescribedBy,
|
|
249
248
|
testID
|
|
250
249
|
}) => {
|
|
251
250
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
@@ -344,14 +343,11 @@ var InputPrimitive = (0, import_react2.forwardRef)(
|
|
|
344
343
|
fontSize,
|
|
345
344
|
placeholderTextColor,
|
|
346
345
|
maxLength,
|
|
347
|
-
name,
|
|
348
346
|
type,
|
|
349
347
|
inputMode,
|
|
350
348
|
autoComplete,
|
|
351
349
|
id,
|
|
352
|
-
"aria-invalid": ariaInvalid,
|
|
353
350
|
"aria-describedby": ariaDescribedBy,
|
|
354
|
-
"aria-labelledby": ariaLabelledBy,
|
|
355
351
|
"aria-label": ariaLabel,
|
|
356
352
|
"aria-disabled": ariaDisabled,
|
|
357
353
|
"data-testid": dataTestId
|
|
@@ -443,9 +439,7 @@ var TextAreaPrimitive = (0, import_react3.forwardRef)(
|
|
|
443
439
|
maxLength,
|
|
444
440
|
rows,
|
|
445
441
|
id,
|
|
446
|
-
"aria-invalid": ariaInvalid,
|
|
447
442
|
"aria-describedby": ariaDescribedBy,
|
|
448
|
-
"aria-labelledby": ariaLabelledBy,
|
|
449
443
|
"aria-label": ariaLabel,
|
|
450
444
|
"aria-disabled": ariaDisabled,
|
|
451
445
|
"data-testid": dataTestId
|
package/native/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.tsx","../../../primitives-native/src/Box.tsx","../../../primitives-native/src/Text.tsx","../../../primitives-native/src/Spinner.tsx","../../../primitives-native/src/Icon.tsx","../../../primitives-native/src/Divider.tsx","../../../primitives-native/src/Input.tsx","../../../primitives-native/src/TextArea.tsx","../../src/Avatar.tsx","../../src/AvatarGroup.tsx"],"sourcesContent":["export * from \"./Avatar\";\nexport * from \"./AvatarGroup\";\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 { Text as RNText, TextStyle, AccessibilityRole } from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\n// Map web roles to React Native accessibility roles\nconst roleMap: Record<string, AccessibilityRole> = {\n alert: \"alert\",\n heading: \"header\",\n button: \"button\",\n link: \"link\",\n text: \"text\",\n};\n\nexport const Text: React.FC<TextProps> = ({\n children,\n color,\n fontSize,\n fontWeight,\n fontFamily,\n id,\n role,\n ...props\n}) => {\n // Extract the first font name from a comma-separated list (e.g. for web-style font stacks)\n let resolvedFontFamily = fontFamily\n ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n : undefined;\n\n // On native, if we don't have the custom font loaded, it's better to use the system font\n // to avoid rendering issues or missing text.\n if (resolvedFontFamily === \"Pilat Wide Bold\") {\n resolvedFontFamily = undefined;\n }\n\n const style: 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 };\n\n // Map role to React Native accessibilityRole\n const accessibilityRole = role ? roleMap[role] : undefined;\n\n return (\n <RNText style={style} testID={id} accessibilityRole={accessibilityRole}>\n {children}\n </RNText>\n );\n};\n","import type React from \"react\";\nimport { ActivityIndicator, View } from \"react-native\";\nimport type { SpinnerProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Spinner: React.FC<SpinnerProps> = ({\n color,\n size,\n role,\n \"aria-label\": ariaLabel,\n \"aria-live\": ariaLive,\n \"aria-describedby\": ariaDescribedBy,\n testID,\n}) => {\n return (\n <View\n accessible={true}\n accessibilityRole={role === \"status\" ? \"none\" : undefined}\n accessibilityLabel={ariaLabel}\n accessibilityLiveRegion={\n ariaLive === \"polite\"\n ? \"polite\"\n : ariaLive === \"assertive\"\n ? \"assertive\"\n : \"none\"\n }\n testID={testID}\n >\n <ActivityIndicator\n color={color}\n size={typeof size === \"number\" ? size : \"small\"}\n />\n </View>\n );\n};\n\nSpinner.displayName = \"Spinner\";\n","import React from \"react\";\nimport { View, ViewStyle } from \"react-native\";\nimport { IconProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Icon: React.FC<IconProps> = ({ children, color, size }) => {\n const style: ViewStyle = {\n width: typeof size === \"number\" ? size : undefined,\n height: typeof size === \"number\" ? size : undefined,\n alignItems: \"center\",\n justifyContent: \"center\",\n };\n\n // On native, we try to pass the color down to children (like Text primitives)\n // to mimic the CSS inheritance behavior of the web version.\n const childrenWithProps = React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n // @ts-ignore - passing color down to potential Text/Icon children\n return React.cloneElement(child, {\n color: child.props.color || color,\n // Also pass size if child seems to be an icon that needs it\n size: child.props.size || size,\n });\n }\n return child;\n });\n\n return <View style={style}>{childrenWithProps}</View>;\n};\n","import React from \"react\";\nimport { View, ViewStyle } from \"react-native\";\nimport { DividerProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Divider: React.FC<DividerProps> = ({\n color,\n height,\n width,\n vertical,\n dashStroke,\n}) => {\n const style: ViewStyle = {\n backgroundColor: dashStroke\n ? \"transparent\"\n : color || \"rgba(255, 255, 255, 0.15)\",\n width: vertical ? (typeof width === \"number\" ? width : 1) : \"100%\",\n height: vertical ? \"100%\" : typeof height === \"number\" ? height : 1,\n ...(dashStroke && {\n borderStyle: \"dashed\",\n borderColor: color || \"rgba(255, 255, 255, 0.15)\",\n borderWidth: 0,\n ...(vertical\n ? { borderLeftWidth: typeof width === \"number\" ? width : 1 }\n : { borderTopWidth: typeof height === \"number\" ? height : 1 }),\n }),\n };\n\n return <View style={style} />;\n};\n","import React, { forwardRef } from \"react\";\nimport { TextInput as RNTextInput } from \"react-native\";\nimport { InputPrimitiveProps } from \"@xsolla/xui-primitives-core\";\n\n// Map web input types to React Native keyboard types\nconst keyboardTypeMap: Record<string, any> = {\n text: \"default\",\n number: \"numeric\",\n email: \"email-address\",\n tel: \"phone-pad\",\n url: \"url\",\n decimal: \"decimal-pad\",\n};\n\n// Map web inputMode to React Native keyboard types\nconst inputModeToKeyboardType: Record<string, any> = {\n none: \"default\",\n text: \"default\",\n decimal: \"decimal-pad\",\n numeric: \"number-pad\",\n tel: \"phone-pad\",\n search: \"default\",\n email: \"email-address\",\n url: \"url\",\n};\n\n// Map web autoComplete to React Native textContentType (iOS)\nconst autoCompleteToTextContentType: Record<string, any> = {\n \"one-time-code\": \"oneTimeCode\",\n email: \"emailAddress\",\n username: \"username\",\n password: \"password\",\n \"new-password\": \"newPassword\",\n tel: \"telephoneNumber\",\n \"postal-code\": \"postalCode\",\n name: \"name\",\n};\n\nexport const InputPrimitive = forwardRef<RNTextInput, InputPrimitiveProps>(\n (\n {\n value,\n placeholder,\n onChange,\n onChangeText,\n onFocus,\n onBlur,\n onKeyDown,\n disabled,\n secureTextEntry,\n style,\n color,\n fontSize,\n placeholderTextColor,\n maxLength,\n name,\n type,\n inputMode,\n autoComplete,\n id,\n \"aria-invalid\": ariaInvalid,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-label\": ariaLabel,\n \"aria-disabled\": ariaDisabled,\n \"data-testid\": dataTestId,\n },\n ref\n ) => {\n const handleChangeText = (text: string) => {\n onChangeText?.(text);\n\n // Create a synthetic event for onChange compatibility\n // Include nativeEvent and no-op methods to prevent runtime errors\n // when consumers expect DOM-like event behavior\n if (onChange) {\n const syntheticEvent = {\n target: { value: text },\n currentTarget: { value: text },\n type: \"change\",\n nativeEvent: { text },\n preventDefault: () => {},\n stopPropagation: () => {},\n isTrusted: false,\n } as unknown as React.ChangeEvent<HTMLInputElement>;\n onChange(syntheticEvent);\n }\n };\n\n // Determine keyboard type - inputMode takes precedence over type\n const keyboardType = inputMode\n ? inputModeToKeyboardType[inputMode] || \"default\"\n : type\n ? keyboardTypeMap[type] || \"default\"\n : \"default\";\n\n // Determine textContentType for iOS autofill\n const textContentType = autoComplete\n ? autoCompleteToTextContentType[autoComplete]\n : undefined;\n\n return (\n <RNTextInput\n ref={ref}\n value={value}\n placeholder={placeholder}\n onChangeText={handleChangeText}\n onFocus={onFocus}\n onBlur={onBlur}\n onKeyPress={(e) => {\n // Map onKeyPress to onKeyDown for cross-platform compatibility\n // Include preventDefault to avoid runtime errors when consumers call it\n if (onKeyDown) {\n onKeyDown({\n key: e.nativeEvent.key,\n preventDefault: () => {},\n } as any);\n }\n }}\n editable={!disabled}\n secureTextEntry={secureTextEntry || type === \"password\"}\n keyboardType={keyboardType}\n textContentType={textContentType}\n style={[\n {\n color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n flex: 1,\n padding: 0,\n textAlign: (style as any)?.textAlign || \"left\",\n },\n style as any,\n ]}\n placeholderTextColor={placeholderTextColor}\n maxLength={maxLength}\n // React Native accessibility props\n testID={dataTestId || id}\n accessibilityLabel={ariaLabel}\n accessibilityHint={ariaDescribedBy}\n accessibilityState={{\n disabled: disabled || ariaDisabled,\n }}\n accessible={true}\n />\n );\n }\n);\n\nInputPrimitive.displayName = \"InputPrimitive\";\n","import React, { forwardRef } from \"react\";\nimport { TextInput as RNTextInput } from \"react-native\";\nimport { TextAreaPrimitiveProps } from \"@xsolla/xui-primitives-core\";\n\nexport const TextAreaPrimitive = forwardRef<\n RNTextInput,\n TextAreaPrimitiveProps\n>(\n (\n {\n value,\n placeholder,\n onChange,\n onChangeText,\n onFocus,\n onBlur,\n onKeyDown,\n disabled,\n style,\n color,\n fontSize,\n placeholderTextColor,\n maxLength,\n rows,\n id,\n \"aria-invalid\": ariaInvalid,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-label\": ariaLabel,\n \"aria-disabled\": ariaDisabled,\n \"data-testid\": dataTestId,\n },\n ref\n ) => {\n const handleChangeText = (text: string) => {\n onChangeText?.(text);\n\n if (onChange) {\n const syntheticEvent = {\n target: { value: text },\n currentTarget: { value: text },\n type: \"change\",\n nativeEvent: { text },\n preventDefault: () => {},\n stopPropagation: () => {},\n isTrusted: false,\n } as unknown as React.ChangeEvent<HTMLTextAreaElement>;\n onChange(syntheticEvent);\n }\n };\n\n return (\n <RNTextInput\n ref={ref}\n value={value}\n placeholder={placeholder}\n onChangeText={handleChangeText}\n onFocus={onFocus}\n onBlur={onBlur}\n onKeyPress={(e) => {\n if (onKeyDown) {\n onKeyDown({\n key: e.nativeEvent.key,\n preventDefault: () => {},\n } as any);\n }\n }}\n editable={!disabled}\n multiline={true}\n numberOfLines={rows || 4}\n style={[\n {\n color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n flex: 1,\n padding: 0,\n textAlignVertical: \"top\",\n textAlign: (style as any)?.textAlign || \"left\",\n },\n style as any,\n ]}\n placeholderTextColor={placeholderTextColor}\n maxLength={maxLength}\n testID={dataTestId || id}\n accessibilityLabel={ariaLabel}\n accessibilityHint={ariaDescribedBy}\n accessibilityState={{\n disabled: disabled || ariaDisabled,\n }}\n accessible={true}\n />\n );\n }\n);\n\nTextAreaPrimitive.displayName = \"TextAreaPrimitive\";\n","import React from \"react\";\n// @ts-ignore - this will be resolved at build time\nimport { Box, Text, Icon } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem } from \"@xsolla/xui-core\";\nimport { Badge } from \"@xsolla/xui-badge\";\nimport { User } from \"@xsolla/xui-icons-base\";\n\nexport interface AvatarProps {\n /** Image source URL */\n src?: string;\n /** Icon component to display when no image is provided */\n icon?: React.ReactNode;\n /** Text/Initials to display when no image or icon is provided */\n text?: string;\n /** Size of the avatar */\n size?: \"xl\" | \"lg\" | \"md\" | \"sm\" | \"xs\";\n /** If true, the avatar will be square with small border radius. If false, it will be a circle. */\n square?: boolean;\n /** Whether to show an alert badge */\n badge?: boolean;\n /** Number or text to display in the badge notification */\n badgeCount?: React.ReactNode;\n /** If true, the avatar will have a border to separate it from other avatars in a group */\n stroke?: boolean;\n /** Background color for the avatar. Defaults to theme background secondary. */\n backgroundColor?: string;\n /** Disable hover effect. Used internally by AvatarGroup. */\n disableHover?: boolean;\n /** Accessible label for the avatar. Recommended for screen readers. */\n \"aria-label\"?: string;\n /** Alternative text for the avatar image */\n alt?: string;\n /** Click handler for the avatar */\n onClick?: () => void;\n /** Color tone for the badge */\n badgeTone?:\n | \"primary\"\n | \"secondary\"\n | \"brand\"\n | \"brandExtra\"\n | \"success\"\n | \"warning\"\n | \"alert\"\n | \"neutral\";\n}\n\nexport const Avatar: React.FC<AvatarProps> = ({\n src,\n icon,\n text,\n size = \"md\",\n square = false,\n badge = false,\n badgeCount,\n badgeTone = \"alert\",\n stroke = false,\n backgroundColor,\n disableHover = false,\n \"aria-label\": ariaLabel,\n alt,\n onClick,\n}) => {\n const { theme } = useDesignSystem();\n\n const sizeStyles = theme.sizing.avatar(size);\n\n // Border radius based on square or circle variant\n const borderRadius = square\n ? sizeStyles.borderRadiusSquare\n : sizeStyles.borderRadiusCircle;\n\n // Badge size: XL (20px) when showing count, S (8px) for dot-only\n const badgeSize = badgeCount ? \"xl\" : \"sm\";\n\n // Badge offset differs for circle vs square, and for dot vs count\n // Dot badge (8px) needs different offset per avatar size\n const getDotOffset = () => {\n if (square) {\n return { right: -3, top: -3 };\n }\n // Circle - position dot on the edge based on avatar size\n const circleOffsets = {\n xl: { right: 4, top: 4 },\n lg: { right: 3, top: 3 },\n md: { right: 2, top: 2 },\n sm: { right: 1, top: 1 },\n xs: { right: 0, top: 0 },\n };\n return circleOffsets[size];\n };\n\n const badgeOffset = badgeCount\n ? square\n ? sizeStyles.badgeOffsetSquare\n : sizeStyles.badgeOffsetCircle\n : getDotOffset();\n\n // Display badge count\n const displayBadgeCount = badgeCount;\n\n return (\n <Box\n width={sizeStyles.size}\n height={sizeStyles.size}\n position=\"relative\"\n {...(!src && { role: \"img\", \"aria-label\": ariaLabel })}\n {...(onClick && {\n onPress: onClick,\n onKeyDown: (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n onClick();\n }\n },\n cursor: \"pointer\",\n role: \"button\",\n tabIndex: 0,\n })}\n >\n <Box\n width={sizeStyles.size}\n height={sizeStyles.size}\n borderRadius={borderRadius}\n backgroundColor={backgroundColor || theme.colors.background.secondary}\n {...(!disableHover &&\n !src && {\n hoverStyle: {\n backgroundColor: theme.colors.overlay.mono,\n },\n })}\n alignItems=\"center\"\n justifyContent=\"center\"\n position=\"relative\"\n overflow=\"hidden\"\n borderWidth={stroke ? 1 : 0}\n borderColor={theme.colors.background.primary}\n >\n {src ? (\n <Box\n as=\"img\"\n src={src}\n alt={alt || ariaLabel || \"\"}\n position=\"absolute\"\n top={0}\n left={0}\n width={sizeStyles.size}\n height={sizeStyles.size}\n borderRadius={borderRadius}\n />\n ) : icon ? (\n <Icon size={sizeStyles.iconSize} color={theme.colors.content.primary}>\n {icon}\n </Icon>\n ) : text ? (\n <Text\n fontSize={sizeStyles.fontSize}\n color={theme.colors.content.primary}\n fontWeight=\"600\"\n >\n {text}\n </Text>\n ) : (\n <User\n size={sizeStyles.iconSize}\n color={theme.colors.content.primary}\n />\n )}\n </Box>\n\n {badge && (\n <Box\n position=\"absolute\"\n right={badgeOffset.right}\n top={badgeOffset.top}\n >\n <Badge\n size={badgeSize}\n tone={badgeTone}\n showStroke\n aria-label={\n displayBadgeCount\n ? `${displayBadgeCount} notifications`\n : \"Notification\"\n }\n >\n {displayBadgeCount}\n </Badge>\n </Box>\n )}\n </Box>\n );\n};\n","import React from \"react\";\n// @ts-ignore - this will be resolved at build time\nimport { Box } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem } from \"@xsolla/xui-core\";\nimport { Tooltip } from \"@xsolla/xui-tooltip\";\nimport { Avatar } from \"./Avatar\";\n\n/** Theme type from the design system */\ntype Theme = ReturnType<typeof useDesignSystem>[\"theme\"];\n\n/** Item in the avatar group list */\nexport interface AvatarGroupItem {\n /** Image source URL */\n src?: string;\n /** Initials to display when no image is provided */\n initials?: string;\n /** Click handler for the avatar */\n onClick?: () => void;\n /** Tooltip text to display on hover */\n tooltip?: string;\n}\n\n/** Avatar background mode - preset colors, 'mixed' for cycling, or a theme function */\nexport type AvatarBackgroundMode =\n | \"mixed\"\n | \"brand\"\n | \"brandExtra\"\n | \"success\"\n | \"warning\"\n | \"alert\"\n | \"neutral\"\n | ((theme: Theme) => string);\n\nexport interface AvatarGroupProps {\n /**\n * List of avatars to display in the group.\n * `tooltip` property is text to be displayed in the tooltip when hovering over the avatar.\n */\n list: AvatarGroupItem[];\n /** Size of the avatars in the group */\n size?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n /**\n * The maximum number of avatars to display before collapsing the rest into a \"+N\" counter.\n * If the number of avatars exceeds this value, the extra avatars will be hidden.\n */\n maxVisible?: number;\n /** Whether to show a stroke/border around each avatar */\n stroke?: boolean;\n /**\n * Controls the background color mode for avatars in the group.\n * - 'mixed' (default): Avatars cycle through different colors\n * - 'brand', 'brandExtra', 'success', 'warning', 'alert', 'neutral': Single color for all avatars\n * - Theme function: A function that receives theme and returns any color from the design system.\n * Example: (theme) => theme.colors.core.link.link\n */\n avatarBackgroundMode?: AvatarBackgroundMode;\n /** Accessible label for the avatar group. Defaults to \"Group of X users\". */\n \"aria-label\"?: string;\n}\n\n// Map external size values to internal Avatar size values\nconst sizeMap: Record<\n \"sm\" | \"md\" | \"lg\" | \"xl\",\n \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"\n> = {\n sm: \"sm\",\n md: \"md\",\n lg: \"lg\",\n xl: \"xl\",\n};\n\nexport const AvatarGroup: React.FC<AvatarGroupProps> = ({\n list,\n size = \"md\",\n maxVisible = 6,\n stroke = true,\n avatarBackgroundMode = \"mixed\",\n \"aria-label\": ariaLabel,\n}) => {\n const { theme } = useDesignSystem();\n\n // Map external size to internal Avatar size\n const internalSize = sizeMap[size];\n\n const totalCount = list.length;\n\n // Determine which avatars to show\n // Ensure maxVisible is non-negative and doesn't exceed totalCount\n const visibleCount = Math.min(totalCount, Math.max(0, maxVisible));\n const visibleListItems = list.slice(0, visibleCount);\n const remainingCount = totalCount - visibleCount;\n\n // Overlap amount: 4px in Figma\n const overlap = -4;\n\n // Background colors for text/icon avatars (cycling through theme colors)\n const mixedBackgrounds = [\n theme.colors.background.alert.secondary,\n theme.colors.background.warning.secondary,\n theme.colors.background.brandExtra.secondary,\n theme.colors.background.neutral.secondary,\n theme.colors.background.brand.secondary,\n theme.colors.background.success.secondary,\n theme.colors.background.success.primary,\n ];\n\n // Preset color mapping\n const presetColors: Record<string, string> = {\n brand: theme.colors.background.brand.secondary,\n brandExtra: theme.colors.background.brandExtra.secondary,\n success: theme.colors.background.success.secondary,\n warning: theme.colors.background.warning.secondary,\n alert: theme.colors.background.alert.secondary,\n neutral: theme.colors.background.neutral.secondary,\n };\n\n // Get background color based on avatarBackgroundMode\n const getBackgroundColor = (index: number): string => {\n if (typeof avatarBackgroundMode === \"function\") {\n return avatarBackgroundMode(theme);\n }\n if (avatarBackgroundMode === \"mixed\") {\n return mixedBackgrounds[index % mixedBackgrounds.length];\n }\n // Preset color mode\n return (\n presetColors[avatarBackgroundMode] || theme.colors.background.secondary\n );\n };\n\n // Default accessible label for the group\n const defaultAriaLabel =\n totalCount === 1\n ? \"1 user\"\n : totalCount === visibleCount\n ? `${totalCount} users`\n : `${visibleCount} of ${totalCount} users`;\n\n // Render an avatar with optional tooltip wrapper\n const renderAvatarWithTooltip = (\n avatar: React.ReactNode,\n tooltip: string | undefined,\n key: number\n ) => {\n if (tooltip) {\n return (\n <Tooltip key={key} content={tooltip} placement=\"top\">\n {avatar}\n </Tooltip>\n );\n }\n return avatar;\n };\n\n return (\n <Box\n flexDirection=\"row\"\n alignItems=\"center\"\n role=\"group\"\n aria-label={ariaLabel || defaultAriaLabel}\n >\n {visibleListItems.map((item, index) => {\n const shouldApplyBackground = !item.src;\n const backgroundColor = shouldApplyBackground\n ? getBackgroundColor(index)\n : undefined;\n\n // Only enable hover for image avatars with onClick\n const shouldEnableHover = !!item.src && !!item.onClick;\n\n const avatar = (\n <Box\n key={index}\n marginLeft={index === 0 ? 0 : overlap}\n zIndex={totalCount - index}\n >\n <Avatar\n src={item.src}\n text={item.initials}\n size={internalSize}\n stroke={stroke}\n backgroundColor={backgroundColor}\n disableHover={!shouldEnableHover}\n onClick={item.onClick}\n {...(item.tooltip ? { \"aria-label\": item.tooltip } : {})}\n />\n </Box>\n );\n\n return renderAvatarWithTooltip(avatar, item.tooltip, index);\n })}\n\n {remainingCount > 0 && (\n <Box marginLeft={overlap} zIndex={0}>\n <Avatar\n size={internalSize}\n text={`+${remainingCount}`}\n stroke={stroke}\n backgroundColor={theme.colors.background.secondary}\n disableHover={true}\n aria-label={`${remainingCount} more ${remainingCount === 1 ? \"user\" : \"users\"}`}\n />\n </Box>\n )}\n </Box>\n );\n};\n"],"mappings":"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","names":["import_react_native","import_jsx_runtime","RNText","import_react_native","import_jsx_runtime","import_react_native","import_jsx_runtime","React","import_react_native","import_jsx_runtime","import_react","import_react_native","import_jsx_runtime","RNTextInput","import_react","import_react_native","import_jsx_runtime","RNTextInput","import_jsx_runtime","import_xui_core","import_jsx_runtime"]}
|
|
1
|
+
{"version":3,"sources":["../../src/index.tsx","../../../primitives-native/src/Box.tsx","../../../primitives-native/src/Text.tsx","../../../primitives-native/src/Spinner.tsx","../../../primitives-native/src/Icon.tsx","../../../primitives-native/src/Divider.tsx","../../../primitives-native/src/Input.tsx","../../../primitives-native/src/TextArea.tsx","../../src/Avatar.tsx","../../src/AvatarGroup.tsx"],"sourcesContent":["export * from \"./Avatar\";\nexport * from \"./AvatarGroup\";\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 { Text as RNText, TextStyle, AccessibilityRole } from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\n// Map web roles to React Native accessibility roles\nconst roleMap: Record<string, AccessibilityRole> = {\n alert: \"alert\",\n heading: \"header\",\n button: \"button\",\n link: \"link\",\n text: \"text\",\n};\n\nexport const Text: React.FC<TextProps> = ({\n children,\n color,\n fontSize,\n fontWeight,\n fontFamily,\n id,\n role,\n ...props\n}) => {\n // Extract the first font name from a comma-separated list (e.g. for web-style font stacks)\n let resolvedFontFamily = fontFamily\n ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n : undefined;\n\n // On native, if we don't have the custom font loaded, it's better to use the system font\n // to avoid rendering issues or missing text.\n if (resolvedFontFamily === \"Pilat Wide Bold\") {\n resolvedFontFamily = undefined;\n }\n\n const style: 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 };\n\n // Map role to React Native accessibilityRole\n const accessibilityRole = role ? roleMap[role] : undefined;\n\n return (\n <RNText style={style} testID={id} accessibilityRole={accessibilityRole}>\n {children}\n </RNText>\n );\n};\n","import type React from \"react\";\nimport { ActivityIndicator, View } from \"react-native\";\nimport type { SpinnerProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Spinner: React.FC<SpinnerProps> = ({\n color,\n size,\n role,\n \"aria-label\": ariaLabel,\n \"aria-live\": ariaLive,\n testID,\n}) => {\n return (\n <View\n accessible={true}\n accessibilityRole={role === \"status\" ? \"none\" : undefined}\n accessibilityLabel={ariaLabel}\n accessibilityLiveRegion={\n ariaLive === \"polite\"\n ? \"polite\"\n : ariaLive === \"assertive\"\n ? \"assertive\"\n : \"none\"\n }\n testID={testID}\n >\n <ActivityIndicator\n color={color}\n size={typeof size === \"number\" ? size : \"small\"}\n />\n </View>\n );\n};\n\nSpinner.displayName = \"Spinner\";\n","import React from \"react\";\nimport { View, ViewStyle } from \"react-native\";\nimport { IconProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Icon: React.FC<IconProps> = ({ children, color, size }) => {\n const style: ViewStyle = {\n width: typeof size === \"number\" ? size : undefined,\n height: typeof size === \"number\" ? size : undefined,\n alignItems: \"center\",\n justifyContent: \"center\",\n };\n\n // On native, we try to pass the color down to children (like Text primitives)\n // to mimic the CSS inheritance behavior of the web version.\n const childrenWithProps = React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n return React.cloneElement(child, {\n color: child.props.color || color,\n // Also pass size if child seems to be an icon that needs it\n size: child.props.size || size,\n });\n }\n return child;\n });\n\n return <View style={style}>{childrenWithProps}</View>;\n};\n","import React from \"react\";\nimport { View, ViewStyle } from \"react-native\";\nimport { DividerProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Divider: React.FC<DividerProps> = ({\n color,\n height,\n width,\n vertical,\n dashStroke,\n}) => {\n const style: ViewStyle = {\n backgroundColor: dashStroke\n ? \"transparent\"\n : color || \"rgba(255, 255, 255, 0.15)\",\n width: vertical ? (typeof width === \"number\" ? width : 1) : \"100%\",\n height: vertical ? \"100%\" : typeof height === \"number\" ? height : 1,\n ...(dashStroke && {\n borderStyle: \"dashed\",\n borderColor: color || \"rgba(255, 255, 255, 0.15)\",\n borderWidth: 0,\n ...(vertical\n ? { borderLeftWidth: typeof width === \"number\" ? width : 1 }\n : { borderTopWidth: typeof height === \"number\" ? height : 1 }),\n }),\n };\n\n return <View style={style} />;\n};\n","import React, { forwardRef } from \"react\";\nimport { TextInput as RNTextInput } from \"react-native\";\nimport { InputPrimitiveProps } from \"@xsolla/xui-primitives-core\";\n\n// Map web input types to React Native keyboard types\nconst keyboardTypeMap: Record<string, any> = {\n text: \"default\",\n number: \"numeric\",\n email: \"email-address\",\n tel: \"phone-pad\",\n url: \"url\",\n decimal: \"decimal-pad\",\n};\n\n// Map web inputMode to React Native keyboard types\nconst inputModeToKeyboardType: Record<string, any> = {\n none: \"default\",\n text: \"default\",\n decimal: \"decimal-pad\",\n numeric: \"number-pad\",\n tel: \"phone-pad\",\n search: \"default\",\n email: \"email-address\",\n url: \"url\",\n};\n\n// Map web autoComplete to React Native textContentType (iOS)\nconst autoCompleteToTextContentType: Record<string, any> = {\n \"one-time-code\": \"oneTimeCode\",\n email: \"emailAddress\",\n username: \"username\",\n password: \"password\",\n \"new-password\": \"newPassword\",\n tel: \"telephoneNumber\",\n \"postal-code\": \"postalCode\",\n name: \"name\",\n};\n\nexport const InputPrimitive = forwardRef<RNTextInput, InputPrimitiveProps>(\n (\n {\n value,\n placeholder,\n onChange,\n onChangeText,\n onFocus,\n onBlur,\n onKeyDown,\n disabled,\n secureTextEntry,\n style,\n color,\n fontSize,\n placeholderTextColor,\n maxLength,\n type,\n inputMode,\n autoComplete,\n id,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-label\": ariaLabel,\n \"aria-disabled\": ariaDisabled,\n \"data-testid\": dataTestId,\n },\n ref\n ) => {\n const handleChangeText = (text: string) => {\n onChangeText?.(text);\n\n // Create a synthetic event for onChange compatibility\n // Include nativeEvent and no-op methods to prevent runtime errors\n // when consumers expect DOM-like event behavior\n if (onChange) {\n const syntheticEvent = {\n target: { value: text },\n currentTarget: { value: text },\n type: \"change\",\n nativeEvent: { text },\n preventDefault: () => {},\n stopPropagation: () => {},\n isTrusted: false,\n } as unknown as React.ChangeEvent<HTMLInputElement>;\n onChange(syntheticEvent);\n }\n };\n\n // Determine keyboard type - inputMode takes precedence over type\n const keyboardType = inputMode\n ? inputModeToKeyboardType[inputMode] || \"default\"\n : type\n ? keyboardTypeMap[type] || \"default\"\n : \"default\";\n\n // Determine textContentType for iOS autofill\n const textContentType = autoComplete\n ? autoCompleteToTextContentType[autoComplete]\n : undefined;\n\n return (\n <RNTextInput\n ref={ref}\n value={value}\n placeholder={placeholder}\n onChangeText={handleChangeText}\n onFocus={onFocus}\n onBlur={onBlur}\n onKeyPress={(e) => {\n // Map onKeyPress to onKeyDown for cross-platform compatibility\n // Include preventDefault to avoid runtime errors when consumers call it\n if (onKeyDown) {\n onKeyDown({\n key: e.nativeEvent.key,\n preventDefault: () => {},\n } as any);\n }\n }}\n editable={!disabled}\n secureTextEntry={secureTextEntry || type === \"password\"}\n keyboardType={keyboardType}\n textContentType={textContentType}\n style={[\n {\n color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n flex: 1,\n padding: 0,\n textAlign: (style as any)?.textAlign || \"left\",\n },\n style as any,\n ]}\n placeholderTextColor={placeholderTextColor}\n maxLength={maxLength}\n // React Native accessibility props\n testID={dataTestId || id}\n accessibilityLabel={ariaLabel}\n accessibilityHint={ariaDescribedBy}\n accessibilityState={{\n disabled: disabled || ariaDisabled,\n }}\n accessible={true}\n />\n );\n }\n);\n\nInputPrimitive.displayName = \"InputPrimitive\";\n","import React, { forwardRef } from \"react\";\nimport { TextInput as RNTextInput } from \"react-native\";\nimport { TextAreaPrimitiveProps } from \"@xsolla/xui-primitives-core\";\n\nexport const TextAreaPrimitive = forwardRef<\n RNTextInput,\n TextAreaPrimitiveProps\n>(\n (\n {\n value,\n placeholder,\n onChange,\n onChangeText,\n onFocus,\n onBlur,\n onKeyDown,\n disabled,\n style,\n color,\n fontSize,\n placeholderTextColor,\n maxLength,\n rows,\n id,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-label\": ariaLabel,\n \"aria-disabled\": ariaDisabled,\n \"data-testid\": dataTestId,\n },\n ref\n ) => {\n const handleChangeText = (text: string) => {\n onChangeText?.(text);\n\n if (onChange) {\n const syntheticEvent = {\n target: { value: text },\n currentTarget: { value: text },\n type: \"change\",\n nativeEvent: { text },\n preventDefault: () => {},\n stopPropagation: () => {},\n isTrusted: false,\n } as unknown as React.ChangeEvent<HTMLTextAreaElement>;\n onChange(syntheticEvent);\n }\n };\n\n return (\n <RNTextInput\n ref={ref}\n value={value}\n placeholder={placeholder}\n onChangeText={handleChangeText}\n onFocus={onFocus}\n onBlur={onBlur}\n onKeyPress={(e) => {\n if (onKeyDown) {\n onKeyDown({\n key: e.nativeEvent.key,\n preventDefault: () => {},\n } as any);\n }\n }}\n editable={!disabled}\n multiline={true}\n numberOfLines={rows || 4}\n style={[\n {\n color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n flex: 1,\n padding: 0,\n textAlignVertical: \"top\",\n textAlign: (style as any)?.textAlign || \"left\",\n },\n style as any,\n ]}\n placeholderTextColor={placeholderTextColor}\n maxLength={maxLength}\n testID={dataTestId || id}\n accessibilityLabel={ariaLabel}\n accessibilityHint={ariaDescribedBy}\n accessibilityState={{\n disabled: disabled || ariaDisabled,\n }}\n accessible={true}\n />\n );\n }\n);\n\nTextAreaPrimitive.displayName = \"TextAreaPrimitive\";\n","import React from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text, Icon } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem } from \"@xsolla/xui-core\";\nimport { Badge } from \"@xsolla/xui-badge\";\nimport { User } from \"@xsolla/xui-icons-base\";\n\nexport interface AvatarProps {\n /** Image source URL */\n src?: string;\n /** Icon component to display when no image is provided */\n icon?: React.ReactNode;\n /** Text/Initials to display when no image or icon is provided */\n text?: string;\n /** Size of the avatar */\n size?: \"xl\" | \"lg\" | \"md\" | \"sm\" | \"xs\";\n /** If true, the avatar will be square with small border radius. If false, it will be a circle. */\n square?: boolean;\n /** Whether to show an alert badge */\n badge?: boolean;\n /** Number or text to display in the badge notification */\n badgeCount?: React.ReactNode;\n /** If true, the avatar will have a border to separate it from other avatars in a group */\n stroke?: boolean;\n /** Background color for the avatar. Defaults to theme background secondary. */\n backgroundColor?: string;\n /** Disable hover effect. Used internally by AvatarGroup. */\n disableHover?: boolean;\n /** Accessible label for the avatar. Recommended for screen readers. */\n \"aria-label\"?: string;\n /** Alternative text for the avatar image */\n alt?: string;\n /** Click handler for the avatar */\n onClick?: () => void;\n /** Color tone for the badge */\n badgeTone?:\n | \"primary\"\n | \"secondary\"\n | \"brand\"\n | \"brandExtra\"\n | \"success\"\n | \"warning\"\n | \"alert\"\n | \"neutral\";\n}\n\nexport const Avatar: React.FC<AvatarProps> = ({\n src,\n icon,\n text,\n size = \"md\",\n square = false,\n badge = false,\n badgeCount,\n badgeTone = \"alert\",\n stroke = false,\n backgroundColor,\n disableHover = false,\n \"aria-label\": ariaLabel,\n alt,\n onClick,\n}) => {\n const { theme } = useDesignSystem();\n\n const sizeStyles = theme.sizing.avatar(size);\n\n // Border radius based on square or circle variant\n const borderRadius = square\n ? sizeStyles.borderRadiusSquare\n : sizeStyles.borderRadiusCircle;\n\n // Badge size: XL (20px) when showing count, S (8px) for dot-only\n const badgeSize = badgeCount ? \"xl\" : \"sm\";\n\n // Badge offset differs for circle vs square, and for dot vs count\n // Dot badge (8px) needs different offset per avatar size\n const getDotOffset = () => {\n if (square) {\n return { right: -3, top: -3 };\n }\n // Circle - position dot on the edge based on avatar size\n const circleOffsets = {\n xl: { right: 4, top: 4 },\n lg: { right: 3, top: 3 },\n md: { right: 2, top: 2 },\n sm: { right: 1, top: 1 },\n xs: { right: 0, top: 0 },\n };\n return circleOffsets[size];\n };\n\n const badgeOffset = badgeCount\n ? square\n ? sizeStyles.badgeOffsetSquare\n : sizeStyles.badgeOffsetCircle\n : getDotOffset();\n\n // Display badge count\n const displayBadgeCount = badgeCount;\n\n return (\n <Box\n width={sizeStyles.size}\n height={sizeStyles.size}\n position=\"relative\"\n {...(!src && { role: \"img\", \"aria-label\": ariaLabel })}\n {...(onClick && {\n onPress: onClick,\n onKeyDown: (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n onClick();\n }\n },\n cursor: \"pointer\",\n role: \"button\",\n tabIndex: 0,\n })}\n >\n <Box\n width={sizeStyles.size}\n height={sizeStyles.size}\n borderRadius={borderRadius}\n backgroundColor={backgroundColor || theme.colors.background.secondary}\n {...(!disableHover &&\n !src && {\n hoverStyle: {\n backgroundColor: theme.colors.overlay.mono,\n },\n })}\n alignItems=\"center\"\n justifyContent=\"center\"\n position=\"relative\"\n overflow=\"hidden\"\n borderWidth={stroke ? 1 : 0}\n borderColor={theme.colors.background.primary}\n >\n {src ? (\n <Box\n as=\"img\"\n src={src}\n alt={alt || ariaLabel || \"\"}\n position=\"absolute\"\n top={0}\n left={0}\n width={sizeStyles.size}\n height={sizeStyles.size}\n borderRadius={borderRadius}\n />\n ) : icon ? (\n <Icon size={sizeStyles.iconSize} color={theme.colors.content.primary}>\n {icon}\n </Icon>\n ) : text ? (\n <Text\n fontSize={sizeStyles.fontSize}\n color={theme.colors.content.primary}\n fontWeight=\"600\"\n >\n {text}\n </Text>\n ) : (\n <User\n size={sizeStyles.iconSize}\n color={theme.colors.content.primary}\n />\n )}\n </Box>\n\n {badge && (\n <Box\n position=\"absolute\"\n right={badgeOffset.right}\n top={badgeOffset.top}\n >\n <Badge\n size={badgeSize}\n tone={badgeTone}\n showStroke\n aria-label={\n displayBadgeCount\n ? `${displayBadgeCount} notifications`\n : \"Notification\"\n }\n >\n {displayBadgeCount}\n </Badge>\n </Box>\n )}\n </Box>\n );\n};\n","import React 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 { Tooltip } from \"@xsolla/xui-tooltip\";\nimport { Avatar } from \"./Avatar\";\n\n/** Theme type from the design system */\ntype Theme = ReturnType<typeof useDesignSystem>[\"theme\"];\n\n/** Item in the avatar group list */\nexport interface AvatarGroupItem {\n /** Image source URL */\n src?: string;\n /** Initials to display when no image is provided */\n initials?: string;\n /** Click handler for the avatar */\n onClick?: () => void;\n /** Tooltip text to display on hover */\n tooltip?: string;\n}\n\n/** Avatar background mode - preset colors, 'mixed' for cycling, or a theme function */\nexport type AvatarBackgroundMode =\n | \"mixed\"\n | \"brand\"\n | \"brandExtra\"\n | \"success\"\n | \"warning\"\n | \"alert\"\n | \"neutral\"\n | ((theme: Theme) => string);\n\nexport interface AvatarGroupProps {\n /**\n * List of avatars to display in the group.\n * `tooltip` property is text to be displayed in the tooltip when hovering over the avatar.\n */\n list: AvatarGroupItem[];\n /** Size of the avatars in the group */\n size?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n /**\n * The maximum number of avatars to display before collapsing the rest into a \"+N\" counter.\n * If the number of avatars exceeds this value, the extra avatars will be hidden.\n */\n maxVisible?: number;\n /** Whether to show a stroke/border around each avatar */\n stroke?: boolean;\n /**\n * Controls the background color mode for avatars in the group.\n * - 'mixed' (default): Avatars cycle through different colors\n * - 'brand', 'brandExtra', 'success', 'warning', 'alert', 'neutral': Single color for all avatars\n * - Theme function: A function that receives theme and returns any color from the design system.\n * Example: (theme) => theme.colors.core.link.link\n */\n avatarBackgroundMode?: AvatarBackgroundMode;\n /** Accessible label for the avatar group. Defaults to \"Group of X users\". */\n \"aria-label\"?: string;\n}\n\n// Map external size values to internal Avatar size values\nconst sizeMap: Record<\n \"sm\" | \"md\" | \"lg\" | \"xl\",\n \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"\n> = {\n sm: \"sm\",\n md: \"md\",\n lg: \"lg\",\n xl: \"xl\",\n};\n\nexport const AvatarGroup: React.FC<AvatarGroupProps> = ({\n list,\n size = \"md\",\n maxVisible = 6,\n stroke = true,\n avatarBackgroundMode = \"mixed\",\n \"aria-label\": ariaLabel,\n}) => {\n const { theme } = useDesignSystem();\n\n // Map external size to internal Avatar size\n const internalSize = sizeMap[size];\n\n const totalCount = list.length;\n\n // Determine which avatars to show\n // Ensure maxVisible is non-negative and doesn't exceed totalCount\n const visibleCount = Math.min(totalCount, Math.max(0, maxVisible));\n const visibleListItems = list.slice(0, visibleCount);\n const remainingCount = totalCount - visibleCount;\n\n // Overlap amount: 4px in Figma\n const overlap = -4;\n\n // Background colors for text/icon avatars (cycling through theme colors)\n const mixedBackgrounds = [\n theme.colors.background.alert.secondary,\n theme.colors.background.warning.secondary,\n theme.colors.background.brandExtra.secondary,\n theme.colors.background.neutral.secondary,\n theme.colors.background.brand.secondary,\n theme.colors.background.success.secondary,\n theme.colors.background.success.primary,\n ];\n\n // Preset color mapping\n const presetColors: Record<string, string> = {\n brand: theme.colors.background.brand.secondary,\n brandExtra: theme.colors.background.brandExtra.secondary,\n success: theme.colors.background.success.secondary,\n warning: theme.colors.background.warning.secondary,\n alert: theme.colors.background.alert.secondary,\n neutral: theme.colors.background.neutral.secondary,\n };\n\n // Get background color based on avatarBackgroundMode\n const getBackgroundColor = (index: number): string => {\n if (typeof avatarBackgroundMode === \"function\") {\n return avatarBackgroundMode(theme);\n }\n if (avatarBackgroundMode === \"mixed\") {\n return mixedBackgrounds[index % mixedBackgrounds.length];\n }\n // Preset color mode\n return (\n presetColors[avatarBackgroundMode] || theme.colors.background.secondary\n );\n };\n\n // Default accessible label for the group\n const defaultAriaLabel =\n totalCount === 1\n ? \"1 user\"\n : totalCount === visibleCount\n ? `${totalCount} users`\n : `${visibleCount} of ${totalCount} users`;\n\n // Render an avatar with optional tooltip wrapper\n const renderAvatarWithTooltip = (\n avatar: React.ReactNode,\n tooltip: string | undefined,\n key: number\n ) => {\n if (tooltip) {\n return (\n <Tooltip key={key} content={tooltip} placement=\"top\">\n {avatar}\n </Tooltip>\n );\n }\n return avatar;\n };\n\n return (\n <Box\n flexDirection=\"row\"\n alignItems=\"center\"\n role=\"group\"\n aria-label={ariaLabel || defaultAriaLabel}\n >\n {visibleListItems.map((item, index) => {\n const shouldApplyBackground = !item.src;\n const backgroundColor = shouldApplyBackground\n ? getBackgroundColor(index)\n : undefined;\n\n // Only enable hover for image avatars with onClick\n const shouldEnableHover = !!item.src && !!item.onClick;\n\n const avatar = (\n <Box\n key={index}\n marginLeft={index === 0 ? 0 : overlap}\n zIndex={totalCount - index}\n >\n <Avatar\n src={item.src}\n text={item.initials}\n size={internalSize}\n stroke={stroke}\n backgroundColor={backgroundColor}\n disableHover={!shouldEnableHover}\n onClick={item.onClick}\n {...(item.tooltip ? { \"aria-label\": item.tooltip } : {})}\n />\n </Box>\n );\n\n return renderAvatarWithTooltip(avatar, item.tooltip, index);\n })}\n\n {remainingCount > 0 && (\n <Box marginLeft={overlap} zIndex={0}>\n <Avatar\n size={internalSize}\n text={`+${remainingCount}`}\n stroke={stroke}\n backgroundColor={theme.colors.background.secondary}\n disableHover={true}\n aria-label={`${remainingCount} more ${remainingCount === 1 ? \"user\" : \"users\"}`}\n />\n </Box>\n )}\n </Box>\n );\n};\n"],"mappings":"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","names":["import_react_native","import_jsx_runtime","RNText","import_react_native","import_jsx_runtime","import_react_native","import_jsx_runtime","React","import_react_native","import_jsx_runtime","import_react","import_react_native","import_jsx_runtime","RNTextInput","import_react","import_react_native","import_jsx_runtime","RNTextInput","import_jsx_runtime","import_xui_core","import_jsx_runtime"]}
|
package/native/index.mjs
CHANGED
|
@@ -212,7 +212,6 @@ var Spinner = ({
|
|
|
212
212
|
role,
|
|
213
213
|
"aria-label": ariaLabel,
|
|
214
214
|
"aria-live": ariaLive,
|
|
215
|
-
"aria-describedby": ariaDescribedBy,
|
|
216
215
|
testID
|
|
217
216
|
}) => {
|
|
218
217
|
return /* @__PURE__ */ jsx3(
|
|
@@ -311,14 +310,11 @@ var InputPrimitive = forwardRef(
|
|
|
311
310
|
fontSize,
|
|
312
311
|
placeholderTextColor,
|
|
313
312
|
maxLength,
|
|
314
|
-
name,
|
|
315
313
|
type,
|
|
316
314
|
inputMode,
|
|
317
315
|
autoComplete,
|
|
318
316
|
id,
|
|
319
|
-
"aria-invalid": ariaInvalid,
|
|
320
317
|
"aria-describedby": ariaDescribedBy,
|
|
321
|
-
"aria-labelledby": ariaLabelledBy,
|
|
322
318
|
"aria-label": ariaLabel,
|
|
323
319
|
"aria-disabled": ariaDisabled,
|
|
324
320
|
"data-testid": dataTestId
|
|
@@ -410,9 +406,7 @@ var TextAreaPrimitive = forwardRef2(
|
|
|
410
406
|
maxLength,
|
|
411
407
|
rows,
|
|
412
408
|
id,
|
|
413
|
-
"aria-invalid": ariaInvalid,
|
|
414
409
|
"aria-describedby": ariaDescribedBy,
|
|
415
|
-
"aria-labelledby": ariaLabelledBy,
|
|
416
410
|
"aria-label": ariaLabel,
|
|
417
411
|
"aria-disabled": ariaDisabled,
|
|
418
412
|
"data-testid": dataTestId
|
package/native/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../primitives-native/src/Box.tsx","../../../primitives-native/src/Text.tsx","../../../primitives-native/src/Spinner.tsx","../../../primitives-native/src/Icon.tsx","../../../primitives-native/src/Divider.tsx","../../../primitives-native/src/Input.tsx","../../../primitives-native/src/TextArea.tsx","../../src/Avatar.tsx","../../src/AvatarGroup.tsx"],"sourcesContent":["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 { Text as RNText, TextStyle, AccessibilityRole } from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\n// Map web roles to React Native accessibility roles\nconst roleMap: Record<string, AccessibilityRole> = {\n alert: \"alert\",\n heading: \"header\",\n button: \"button\",\n link: \"link\",\n text: \"text\",\n};\n\nexport const Text: React.FC<TextProps> = ({\n children,\n color,\n fontSize,\n fontWeight,\n fontFamily,\n id,\n role,\n ...props\n}) => {\n // Extract the first font name from a comma-separated list (e.g. for web-style font stacks)\n let resolvedFontFamily = fontFamily\n ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n : undefined;\n\n // On native, if we don't have the custom font loaded, it's better to use the system font\n // to avoid rendering issues or missing text.\n if (resolvedFontFamily === \"Pilat Wide Bold\") {\n resolvedFontFamily = undefined;\n }\n\n const style: 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 };\n\n // Map role to React Native accessibilityRole\n const accessibilityRole = role ? roleMap[role] : undefined;\n\n return (\n <RNText style={style} testID={id} accessibilityRole={accessibilityRole}>\n {children}\n </RNText>\n );\n};\n","import type React from \"react\";\nimport { ActivityIndicator, View } from \"react-native\";\nimport type { SpinnerProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Spinner: React.FC<SpinnerProps> = ({\n color,\n size,\n role,\n \"aria-label\": ariaLabel,\n \"aria-live\": ariaLive,\n \"aria-describedby\": ariaDescribedBy,\n testID,\n}) => {\n return (\n <View\n accessible={true}\n accessibilityRole={role === \"status\" ? \"none\" : undefined}\n accessibilityLabel={ariaLabel}\n accessibilityLiveRegion={\n ariaLive === \"polite\"\n ? \"polite\"\n : ariaLive === \"assertive\"\n ? \"assertive\"\n : \"none\"\n }\n testID={testID}\n >\n <ActivityIndicator\n color={color}\n size={typeof size === \"number\" ? size : \"small\"}\n />\n </View>\n );\n};\n\nSpinner.displayName = \"Spinner\";\n","import React from \"react\";\nimport { View, ViewStyle } from \"react-native\";\nimport { IconProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Icon: React.FC<IconProps> = ({ children, color, size }) => {\n const style: ViewStyle = {\n width: typeof size === \"number\" ? size : undefined,\n height: typeof size === \"number\" ? size : undefined,\n alignItems: \"center\",\n justifyContent: \"center\",\n };\n\n // On native, we try to pass the color down to children (like Text primitives)\n // to mimic the CSS inheritance behavior of the web version.\n const childrenWithProps = React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n // @ts-ignore - passing color down to potential Text/Icon children\n return React.cloneElement(child, {\n color: child.props.color || color,\n // Also pass size if child seems to be an icon that needs it\n size: child.props.size || size,\n });\n }\n return child;\n });\n\n return <View style={style}>{childrenWithProps}</View>;\n};\n","import React from \"react\";\nimport { View, ViewStyle } from \"react-native\";\nimport { DividerProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Divider: React.FC<DividerProps> = ({\n color,\n height,\n width,\n vertical,\n dashStroke,\n}) => {\n const style: ViewStyle = {\n backgroundColor: dashStroke\n ? \"transparent\"\n : color || \"rgba(255, 255, 255, 0.15)\",\n width: vertical ? (typeof width === \"number\" ? width : 1) : \"100%\",\n height: vertical ? \"100%\" : typeof height === \"number\" ? height : 1,\n ...(dashStroke && {\n borderStyle: \"dashed\",\n borderColor: color || \"rgba(255, 255, 255, 0.15)\",\n borderWidth: 0,\n ...(vertical\n ? { borderLeftWidth: typeof width === \"number\" ? width : 1 }\n : { borderTopWidth: typeof height === \"number\" ? height : 1 }),\n }),\n };\n\n return <View style={style} />;\n};\n","import React, { forwardRef } from \"react\";\nimport { TextInput as RNTextInput } from \"react-native\";\nimport { InputPrimitiveProps } from \"@xsolla/xui-primitives-core\";\n\n// Map web input types to React Native keyboard types\nconst keyboardTypeMap: Record<string, any> = {\n text: \"default\",\n number: \"numeric\",\n email: \"email-address\",\n tel: \"phone-pad\",\n url: \"url\",\n decimal: \"decimal-pad\",\n};\n\n// Map web inputMode to React Native keyboard types\nconst inputModeToKeyboardType: Record<string, any> = {\n none: \"default\",\n text: \"default\",\n decimal: \"decimal-pad\",\n numeric: \"number-pad\",\n tel: \"phone-pad\",\n search: \"default\",\n email: \"email-address\",\n url: \"url\",\n};\n\n// Map web autoComplete to React Native textContentType (iOS)\nconst autoCompleteToTextContentType: Record<string, any> = {\n \"one-time-code\": \"oneTimeCode\",\n email: \"emailAddress\",\n username: \"username\",\n password: \"password\",\n \"new-password\": \"newPassword\",\n tel: \"telephoneNumber\",\n \"postal-code\": \"postalCode\",\n name: \"name\",\n};\n\nexport const InputPrimitive = forwardRef<RNTextInput, InputPrimitiveProps>(\n (\n {\n value,\n placeholder,\n onChange,\n onChangeText,\n onFocus,\n onBlur,\n onKeyDown,\n disabled,\n secureTextEntry,\n style,\n color,\n fontSize,\n placeholderTextColor,\n maxLength,\n name,\n type,\n inputMode,\n autoComplete,\n id,\n \"aria-invalid\": ariaInvalid,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-label\": ariaLabel,\n \"aria-disabled\": ariaDisabled,\n \"data-testid\": dataTestId,\n },\n ref\n ) => {\n const handleChangeText = (text: string) => {\n onChangeText?.(text);\n\n // Create a synthetic event for onChange compatibility\n // Include nativeEvent and no-op methods to prevent runtime errors\n // when consumers expect DOM-like event behavior\n if (onChange) {\n const syntheticEvent = {\n target: { value: text },\n currentTarget: { value: text },\n type: \"change\",\n nativeEvent: { text },\n preventDefault: () => {},\n stopPropagation: () => {},\n isTrusted: false,\n } as unknown as React.ChangeEvent<HTMLInputElement>;\n onChange(syntheticEvent);\n }\n };\n\n // Determine keyboard type - inputMode takes precedence over type\n const keyboardType = inputMode\n ? inputModeToKeyboardType[inputMode] || \"default\"\n : type\n ? keyboardTypeMap[type] || \"default\"\n : \"default\";\n\n // Determine textContentType for iOS autofill\n const textContentType = autoComplete\n ? autoCompleteToTextContentType[autoComplete]\n : undefined;\n\n return (\n <RNTextInput\n ref={ref}\n value={value}\n placeholder={placeholder}\n onChangeText={handleChangeText}\n onFocus={onFocus}\n onBlur={onBlur}\n onKeyPress={(e) => {\n // Map onKeyPress to onKeyDown for cross-platform compatibility\n // Include preventDefault to avoid runtime errors when consumers call it\n if (onKeyDown) {\n onKeyDown({\n key: e.nativeEvent.key,\n preventDefault: () => {},\n } as any);\n }\n }}\n editable={!disabled}\n secureTextEntry={secureTextEntry || type === \"password\"}\n keyboardType={keyboardType}\n textContentType={textContentType}\n style={[\n {\n color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n flex: 1,\n padding: 0,\n textAlign: (style as any)?.textAlign || \"left\",\n },\n style as any,\n ]}\n placeholderTextColor={placeholderTextColor}\n maxLength={maxLength}\n // React Native accessibility props\n testID={dataTestId || id}\n accessibilityLabel={ariaLabel}\n accessibilityHint={ariaDescribedBy}\n accessibilityState={{\n disabled: disabled || ariaDisabled,\n }}\n accessible={true}\n />\n );\n }\n);\n\nInputPrimitive.displayName = \"InputPrimitive\";\n","import React, { forwardRef } from \"react\";\nimport { TextInput as RNTextInput } from \"react-native\";\nimport { TextAreaPrimitiveProps } from \"@xsolla/xui-primitives-core\";\n\nexport const TextAreaPrimitive = forwardRef<\n RNTextInput,\n TextAreaPrimitiveProps\n>(\n (\n {\n value,\n placeholder,\n onChange,\n onChangeText,\n onFocus,\n onBlur,\n onKeyDown,\n disabled,\n style,\n color,\n fontSize,\n placeholderTextColor,\n maxLength,\n rows,\n id,\n \"aria-invalid\": ariaInvalid,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-label\": ariaLabel,\n \"aria-disabled\": ariaDisabled,\n \"data-testid\": dataTestId,\n },\n ref\n ) => {\n const handleChangeText = (text: string) => {\n onChangeText?.(text);\n\n if (onChange) {\n const syntheticEvent = {\n target: { value: text },\n currentTarget: { value: text },\n type: \"change\",\n nativeEvent: { text },\n preventDefault: () => {},\n stopPropagation: () => {},\n isTrusted: false,\n } as unknown as React.ChangeEvent<HTMLTextAreaElement>;\n onChange(syntheticEvent);\n }\n };\n\n return (\n <RNTextInput\n ref={ref}\n value={value}\n placeholder={placeholder}\n onChangeText={handleChangeText}\n onFocus={onFocus}\n onBlur={onBlur}\n onKeyPress={(e) => {\n if (onKeyDown) {\n onKeyDown({\n key: e.nativeEvent.key,\n preventDefault: () => {},\n } as any);\n }\n }}\n editable={!disabled}\n multiline={true}\n numberOfLines={rows || 4}\n style={[\n {\n color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n flex: 1,\n padding: 0,\n textAlignVertical: \"top\",\n textAlign: (style as any)?.textAlign || \"left\",\n },\n style as any,\n ]}\n placeholderTextColor={placeholderTextColor}\n maxLength={maxLength}\n testID={dataTestId || id}\n accessibilityLabel={ariaLabel}\n accessibilityHint={ariaDescribedBy}\n accessibilityState={{\n disabled: disabled || ariaDisabled,\n }}\n accessible={true}\n />\n );\n }\n);\n\nTextAreaPrimitive.displayName = \"TextAreaPrimitive\";\n","import React from \"react\";\n// @ts-ignore - this will be resolved at build time\nimport { Box, Text, Icon } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem } from \"@xsolla/xui-core\";\nimport { Badge } from \"@xsolla/xui-badge\";\nimport { User } from \"@xsolla/xui-icons-base\";\n\nexport interface AvatarProps {\n /** Image source URL */\n src?: string;\n /** Icon component to display when no image is provided */\n icon?: React.ReactNode;\n /** Text/Initials to display when no image or icon is provided */\n text?: string;\n /** Size of the avatar */\n size?: \"xl\" | \"lg\" | \"md\" | \"sm\" | \"xs\";\n /** If true, the avatar will be square with small border radius. If false, it will be a circle. */\n square?: boolean;\n /** Whether to show an alert badge */\n badge?: boolean;\n /** Number or text to display in the badge notification */\n badgeCount?: React.ReactNode;\n /** If true, the avatar will have a border to separate it from other avatars in a group */\n stroke?: boolean;\n /** Background color for the avatar. Defaults to theme background secondary. */\n backgroundColor?: string;\n /** Disable hover effect. Used internally by AvatarGroup. */\n disableHover?: boolean;\n /** Accessible label for the avatar. Recommended for screen readers. */\n \"aria-label\"?: string;\n /** Alternative text for the avatar image */\n alt?: string;\n /** Click handler for the avatar */\n onClick?: () => void;\n /** Color tone for the badge */\n badgeTone?:\n | \"primary\"\n | \"secondary\"\n | \"brand\"\n | \"brandExtra\"\n | \"success\"\n | \"warning\"\n | \"alert\"\n | \"neutral\";\n}\n\nexport const Avatar: React.FC<AvatarProps> = ({\n src,\n icon,\n text,\n size = \"md\",\n square = false,\n badge = false,\n badgeCount,\n badgeTone = \"alert\",\n stroke = false,\n backgroundColor,\n disableHover = false,\n \"aria-label\": ariaLabel,\n alt,\n onClick,\n}) => {\n const { theme } = useDesignSystem();\n\n const sizeStyles = theme.sizing.avatar(size);\n\n // Border radius based on square or circle variant\n const borderRadius = square\n ? sizeStyles.borderRadiusSquare\n : sizeStyles.borderRadiusCircle;\n\n // Badge size: XL (20px) when showing count, S (8px) for dot-only\n const badgeSize = badgeCount ? \"xl\" : \"sm\";\n\n // Badge offset differs for circle vs square, and for dot vs count\n // Dot badge (8px) needs different offset per avatar size\n const getDotOffset = () => {\n if (square) {\n return { right: -3, top: -3 };\n }\n // Circle - position dot on the edge based on avatar size\n const circleOffsets = {\n xl: { right: 4, top: 4 },\n lg: { right: 3, top: 3 },\n md: { right: 2, top: 2 },\n sm: { right: 1, top: 1 },\n xs: { right: 0, top: 0 },\n };\n return circleOffsets[size];\n };\n\n const badgeOffset = badgeCount\n ? square\n ? sizeStyles.badgeOffsetSquare\n : sizeStyles.badgeOffsetCircle\n : getDotOffset();\n\n // Display badge count\n const displayBadgeCount = badgeCount;\n\n return (\n <Box\n width={sizeStyles.size}\n height={sizeStyles.size}\n position=\"relative\"\n {...(!src && { role: \"img\", \"aria-label\": ariaLabel })}\n {...(onClick && {\n onPress: onClick,\n onKeyDown: (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n onClick();\n }\n },\n cursor: \"pointer\",\n role: \"button\",\n tabIndex: 0,\n })}\n >\n <Box\n width={sizeStyles.size}\n height={sizeStyles.size}\n borderRadius={borderRadius}\n backgroundColor={backgroundColor || theme.colors.background.secondary}\n {...(!disableHover &&\n !src && {\n hoverStyle: {\n backgroundColor: theme.colors.overlay.mono,\n },\n })}\n alignItems=\"center\"\n justifyContent=\"center\"\n position=\"relative\"\n overflow=\"hidden\"\n borderWidth={stroke ? 1 : 0}\n borderColor={theme.colors.background.primary}\n >\n {src ? (\n <Box\n as=\"img\"\n src={src}\n alt={alt || ariaLabel || \"\"}\n position=\"absolute\"\n top={0}\n left={0}\n width={sizeStyles.size}\n height={sizeStyles.size}\n borderRadius={borderRadius}\n />\n ) : icon ? (\n <Icon size={sizeStyles.iconSize} color={theme.colors.content.primary}>\n {icon}\n </Icon>\n ) : text ? (\n <Text\n fontSize={sizeStyles.fontSize}\n color={theme.colors.content.primary}\n fontWeight=\"600\"\n >\n {text}\n </Text>\n ) : (\n <User\n size={sizeStyles.iconSize}\n color={theme.colors.content.primary}\n />\n )}\n </Box>\n\n {badge && (\n <Box\n position=\"absolute\"\n right={badgeOffset.right}\n top={badgeOffset.top}\n >\n <Badge\n size={badgeSize}\n tone={badgeTone}\n showStroke\n aria-label={\n displayBadgeCount\n ? `${displayBadgeCount} notifications`\n : \"Notification\"\n }\n >\n {displayBadgeCount}\n </Badge>\n </Box>\n )}\n </Box>\n );\n};\n","import React from \"react\";\n// @ts-ignore - this will be resolved at build time\nimport { Box } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem } from \"@xsolla/xui-core\";\nimport { Tooltip } from \"@xsolla/xui-tooltip\";\nimport { Avatar } from \"./Avatar\";\n\n/** Theme type from the design system */\ntype Theme = ReturnType<typeof useDesignSystem>[\"theme\"];\n\n/** Item in the avatar group list */\nexport interface AvatarGroupItem {\n /** Image source URL */\n src?: string;\n /** Initials to display when no image is provided */\n initials?: string;\n /** Click handler for the avatar */\n onClick?: () => void;\n /** Tooltip text to display on hover */\n tooltip?: string;\n}\n\n/** Avatar background mode - preset colors, 'mixed' for cycling, or a theme function */\nexport type AvatarBackgroundMode =\n | \"mixed\"\n | \"brand\"\n | \"brandExtra\"\n | \"success\"\n | \"warning\"\n | \"alert\"\n | \"neutral\"\n | ((theme: Theme) => string);\n\nexport interface AvatarGroupProps {\n /**\n * List of avatars to display in the group.\n * `tooltip` property is text to be displayed in the tooltip when hovering over the avatar.\n */\n list: AvatarGroupItem[];\n /** Size of the avatars in the group */\n size?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n /**\n * The maximum number of avatars to display before collapsing the rest into a \"+N\" counter.\n * If the number of avatars exceeds this value, the extra avatars will be hidden.\n */\n maxVisible?: number;\n /** Whether to show a stroke/border around each avatar */\n stroke?: boolean;\n /**\n * Controls the background color mode for avatars in the group.\n * - 'mixed' (default): Avatars cycle through different colors\n * - 'brand', 'brandExtra', 'success', 'warning', 'alert', 'neutral': Single color for all avatars\n * - Theme function: A function that receives theme and returns any color from the design system.\n * Example: (theme) => theme.colors.core.link.link\n */\n avatarBackgroundMode?: AvatarBackgroundMode;\n /** Accessible label for the avatar group. Defaults to \"Group of X users\". */\n \"aria-label\"?: string;\n}\n\n// Map external size values to internal Avatar size values\nconst sizeMap: Record<\n \"sm\" | \"md\" | \"lg\" | \"xl\",\n \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"\n> = {\n sm: \"sm\",\n md: \"md\",\n lg: \"lg\",\n xl: \"xl\",\n};\n\nexport const AvatarGroup: React.FC<AvatarGroupProps> = ({\n list,\n size = \"md\",\n maxVisible = 6,\n stroke = true,\n avatarBackgroundMode = \"mixed\",\n \"aria-label\": ariaLabel,\n}) => {\n const { theme } = useDesignSystem();\n\n // Map external size to internal Avatar size\n const internalSize = sizeMap[size];\n\n const totalCount = list.length;\n\n // Determine which avatars to show\n // Ensure maxVisible is non-negative and doesn't exceed totalCount\n const visibleCount = Math.min(totalCount, Math.max(0, maxVisible));\n const visibleListItems = list.slice(0, visibleCount);\n const remainingCount = totalCount - visibleCount;\n\n // Overlap amount: 4px in Figma\n const overlap = -4;\n\n // Background colors for text/icon avatars (cycling through theme colors)\n const mixedBackgrounds = [\n theme.colors.background.alert.secondary,\n theme.colors.background.warning.secondary,\n theme.colors.background.brandExtra.secondary,\n theme.colors.background.neutral.secondary,\n theme.colors.background.brand.secondary,\n theme.colors.background.success.secondary,\n theme.colors.background.success.primary,\n ];\n\n // Preset color mapping\n const presetColors: Record<string, string> = {\n brand: theme.colors.background.brand.secondary,\n brandExtra: theme.colors.background.brandExtra.secondary,\n success: theme.colors.background.success.secondary,\n warning: theme.colors.background.warning.secondary,\n alert: theme.colors.background.alert.secondary,\n neutral: theme.colors.background.neutral.secondary,\n };\n\n // Get background color based on avatarBackgroundMode\n const getBackgroundColor = (index: number): string => {\n if (typeof avatarBackgroundMode === \"function\") {\n return avatarBackgroundMode(theme);\n }\n if (avatarBackgroundMode === \"mixed\") {\n return mixedBackgrounds[index % mixedBackgrounds.length];\n }\n // Preset color mode\n return (\n presetColors[avatarBackgroundMode] || theme.colors.background.secondary\n );\n };\n\n // Default accessible label for the group\n const defaultAriaLabel =\n totalCount === 1\n ? \"1 user\"\n : totalCount === visibleCount\n ? `${totalCount} users`\n : `${visibleCount} of ${totalCount} users`;\n\n // Render an avatar with optional tooltip wrapper\n const renderAvatarWithTooltip = (\n avatar: React.ReactNode,\n tooltip: string | undefined,\n key: number\n ) => {\n if (tooltip) {\n return (\n <Tooltip key={key} content={tooltip} placement=\"top\">\n {avatar}\n </Tooltip>\n );\n }\n return avatar;\n };\n\n return (\n <Box\n flexDirection=\"row\"\n alignItems=\"center\"\n role=\"group\"\n aria-label={ariaLabel || defaultAriaLabel}\n >\n {visibleListItems.map((item, index) => {\n const shouldApplyBackground = !item.src;\n const backgroundColor = shouldApplyBackground\n ? getBackgroundColor(index)\n : undefined;\n\n // Only enable hover for image avatars with onClick\n const shouldEnableHover = !!item.src && !!item.onClick;\n\n const avatar = (\n <Box\n key={index}\n marginLeft={index === 0 ? 0 : overlap}\n zIndex={totalCount - index}\n >\n <Avatar\n src={item.src}\n text={item.initials}\n size={internalSize}\n stroke={stroke}\n backgroundColor={backgroundColor}\n disableHover={!shouldEnableHover}\n onClick={item.onClick}\n {...(item.tooltip ? { \"aria-label\": item.tooltip } : {})}\n />\n </Box>\n );\n\n return renderAvatarWithTooltip(avatar, item.tooltip, index);\n })}\n\n {remainingCount > 0 && (\n <Box marginLeft={overlap} zIndex={0}>\n <Avatar\n size={internalSize}\n text={`+${remainingCount}`}\n stroke={stroke}\n backgroundColor={theme.colors.background.secondary}\n disableHover={true}\n aria-label={`${remainingCount} more ${remainingCount === 1 ? \"user\" : \"users\"}`}\n />\n </Box>\n )}\n </Box>\n );\n};\n"],"mappings":"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","names":["jsx","View","jsx","View","jsx","View","jsx","jsx","forwardRef","RNTextInput","jsx","jsx","useDesignSystem","jsx","jsxs","useDesignSystem"]}
|
|
1
|
+
{"version":3,"sources":["../../../primitives-native/src/Box.tsx","../../../primitives-native/src/Text.tsx","../../../primitives-native/src/Spinner.tsx","../../../primitives-native/src/Icon.tsx","../../../primitives-native/src/Divider.tsx","../../../primitives-native/src/Input.tsx","../../../primitives-native/src/TextArea.tsx","../../src/Avatar.tsx","../../src/AvatarGroup.tsx"],"sourcesContent":["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 { Text as RNText, TextStyle, AccessibilityRole } from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\n// Map web roles to React Native accessibility roles\nconst roleMap: Record<string, AccessibilityRole> = {\n alert: \"alert\",\n heading: \"header\",\n button: \"button\",\n link: \"link\",\n text: \"text\",\n};\n\nexport const Text: React.FC<TextProps> = ({\n children,\n color,\n fontSize,\n fontWeight,\n fontFamily,\n id,\n role,\n ...props\n}) => {\n // Extract the first font name from a comma-separated list (e.g. for web-style font stacks)\n let resolvedFontFamily = fontFamily\n ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n : undefined;\n\n // On native, if we don't have the custom font loaded, it's better to use the system font\n // to avoid rendering issues or missing text.\n if (resolvedFontFamily === \"Pilat Wide Bold\") {\n resolvedFontFamily = undefined;\n }\n\n const style: 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 };\n\n // Map role to React Native accessibilityRole\n const accessibilityRole = role ? roleMap[role] : undefined;\n\n return (\n <RNText style={style} testID={id} accessibilityRole={accessibilityRole}>\n {children}\n </RNText>\n );\n};\n","import type React from \"react\";\nimport { ActivityIndicator, View } from \"react-native\";\nimport type { SpinnerProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Spinner: React.FC<SpinnerProps> = ({\n color,\n size,\n role,\n \"aria-label\": ariaLabel,\n \"aria-live\": ariaLive,\n testID,\n}) => {\n return (\n <View\n accessible={true}\n accessibilityRole={role === \"status\" ? \"none\" : undefined}\n accessibilityLabel={ariaLabel}\n accessibilityLiveRegion={\n ariaLive === \"polite\"\n ? \"polite\"\n : ariaLive === \"assertive\"\n ? \"assertive\"\n : \"none\"\n }\n testID={testID}\n >\n <ActivityIndicator\n color={color}\n size={typeof size === \"number\" ? size : \"small\"}\n />\n </View>\n );\n};\n\nSpinner.displayName = \"Spinner\";\n","import React from \"react\";\nimport { View, ViewStyle } from \"react-native\";\nimport { IconProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Icon: React.FC<IconProps> = ({ children, color, size }) => {\n const style: ViewStyle = {\n width: typeof size === \"number\" ? size : undefined,\n height: typeof size === \"number\" ? size : undefined,\n alignItems: \"center\",\n justifyContent: \"center\",\n };\n\n // On native, we try to pass the color down to children (like Text primitives)\n // to mimic the CSS inheritance behavior of the web version.\n const childrenWithProps = React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n return React.cloneElement(child, {\n color: child.props.color || color,\n // Also pass size if child seems to be an icon that needs it\n size: child.props.size || size,\n });\n }\n return child;\n });\n\n return <View style={style}>{childrenWithProps}</View>;\n};\n","import React from \"react\";\nimport { View, ViewStyle } from \"react-native\";\nimport { DividerProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Divider: React.FC<DividerProps> = ({\n color,\n height,\n width,\n vertical,\n dashStroke,\n}) => {\n const style: ViewStyle = {\n backgroundColor: dashStroke\n ? \"transparent\"\n : color || \"rgba(255, 255, 255, 0.15)\",\n width: vertical ? (typeof width === \"number\" ? width : 1) : \"100%\",\n height: vertical ? \"100%\" : typeof height === \"number\" ? height : 1,\n ...(dashStroke && {\n borderStyle: \"dashed\",\n borderColor: color || \"rgba(255, 255, 255, 0.15)\",\n borderWidth: 0,\n ...(vertical\n ? { borderLeftWidth: typeof width === \"number\" ? width : 1 }\n : { borderTopWidth: typeof height === \"number\" ? height : 1 }),\n }),\n };\n\n return <View style={style} />;\n};\n","import React, { forwardRef } from \"react\";\nimport { TextInput as RNTextInput } from \"react-native\";\nimport { InputPrimitiveProps } from \"@xsolla/xui-primitives-core\";\n\n// Map web input types to React Native keyboard types\nconst keyboardTypeMap: Record<string, any> = {\n text: \"default\",\n number: \"numeric\",\n email: \"email-address\",\n tel: \"phone-pad\",\n url: \"url\",\n decimal: \"decimal-pad\",\n};\n\n// Map web inputMode to React Native keyboard types\nconst inputModeToKeyboardType: Record<string, any> = {\n none: \"default\",\n text: \"default\",\n decimal: \"decimal-pad\",\n numeric: \"number-pad\",\n tel: \"phone-pad\",\n search: \"default\",\n email: \"email-address\",\n url: \"url\",\n};\n\n// Map web autoComplete to React Native textContentType (iOS)\nconst autoCompleteToTextContentType: Record<string, any> = {\n \"one-time-code\": \"oneTimeCode\",\n email: \"emailAddress\",\n username: \"username\",\n password: \"password\",\n \"new-password\": \"newPassword\",\n tel: \"telephoneNumber\",\n \"postal-code\": \"postalCode\",\n name: \"name\",\n};\n\nexport const InputPrimitive = forwardRef<RNTextInput, InputPrimitiveProps>(\n (\n {\n value,\n placeholder,\n onChange,\n onChangeText,\n onFocus,\n onBlur,\n onKeyDown,\n disabled,\n secureTextEntry,\n style,\n color,\n fontSize,\n placeholderTextColor,\n maxLength,\n type,\n inputMode,\n autoComplete,\n id,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-label\": ariaLabel,\n \"aria-disabled\": ariaDisabled,\n \"data-testid\": dataTestId,\n },\n ref\n ) => {\n const handleChangeText = (text: string) => {\n onChangeText?.(text);\n\n // Create a synthetic event for onChange compatibility\n // Include nativeEvent and no-op methods to prevent runtime errors\n // when consumers expect DOM-like event behavior\n if (onChange) {\n const syntheticEvent = {\n target: { value: text },\n currentTarget: { value: text },\n type: \"change\",\n nativeEvent: { text },\n preventDefault: () => {},\n stopPropagation: () => {},\n isTrusted: false,\n } as unknown as React.ChangeEvent<HTMLInputElement>;\n onChange(syntheticEvent);\n }\n };\n\n // Determine keyboard type - inputMode takes precedence over type\n const keyboardType = inputMode\n ? inputModeToKeyboardType[inputMode] || \"default\"\n : type\n ? keyboardTypeMap[type] || \"default\"\n : \"default\";\n\n // Determine textContentType for iOS autofill\n const textContentType = autoComplete\n ? autoCompleteToTextContentType[autoComplete]\n : undefined;\n\n return (\n <RNTextInput\n ref={ref}\n value={value}\n placeholder={placeholder}\n onChangeText={handleChangeText}\n onFocus={onFocus}\n onBlur={onBlur}\n onKeyPress={(e) => {\n // Map onKeyPress to onKeyDown for cross-platform compatibility\n // Include preventDefault to avoid runtime errors when consumers call it\n if (onKeyDown) {\n onKeyDown({\n key: e.nativeEvent.key,\n preventDefault: () => {},\n } as any);\n }\n }}\n editable={!disabled}\n secureTextEntry={secureTextEntry || type === \"password\"}\n keyboardType={keyboardType}\n textContentType={textContentType}\n style={[\n {\n color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n flex: 1,\n padding: 0,\n textAlign: (style as any)?.textAlign || \"left\",\n },\n style as any,\n ]}\n placeholderTextColor={placeholderTextColor}\n maxLength={maxLength}\n // React Native accessibility props\n testID={dataTestId || id}\n accessibilityLabel={ariaLabel}\n accessibilityHint={ariaDescribedBy}\n accessibilityState={{\n disabled: disabled || ariaDisabled,\n }}\n accessible={true}\n />\n );\n }\n);\n\nInputPrimitive.displayName = \"InputPrimitive\";\n","import React, { forwardRef } from \"react\";\nimport { TextInput as RNTextInput } from \"react-native\";\nimport { TextAreaPrimitiveProps } from \"@xsolla/xui-primitives-core\";\n\nexport const TextAreaPrimitive = forwardRef<\n RNTextInput,\n TextAreaPrimitiveProps\n>(\n (\n {\n value,\n placeholder,\n onChange,\n onChangeText,\n onFocus,\n onBlur,\n onKeyDown,\n disabled,\n style,\n color,\n fontSize,\n placeholderTextColor,\n maxLength,\n rows,\n id,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-label\": ariaLabel,\n \"aria-disabled\": ariaDisabled,\n \"data-testid\": dataTestId,\n },\n ref\n ) => {\n const handleChangeText = (text: string) => {\n onChangeText?.(text);\n\n if (onChange) {\n const syntheticEvent = {\n target: { value: text },\n currentTarget: { value: text },\n type: \"change\",\n nativeEvent: { text },\n preventDefault: () => {},\n stopPropagation: () => {},\n isTrusted: false,\n } as unknown as React.ChangeEvent<HTMLTextAreaElement>;\n onChange(syntheticEvent);\n }\n };\n\n return (\n <RNTextInput\n ref={ref}\n value={value}\n placeholder={placeholder}\n onChangeText={handleChangeText}\n onFocus={onFocus}\n onBlur={onBlur}\n onKeyPress={(e) => {\n if (onKeyDown) {\n onKeyDown({\n key: e.nativeEvent.key,\n preventDefault: () => {},\n } as any);\n }\n }}\n editable={!disabled}\n multiline={true}\n numberOfLines={rows || 4}\n style={[\n {\n color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n flex: 1,\n padding: 0,\n textAlignVertical: \"top\",\n textAlign: (style as any)?.textAlign || \"left\",\n },\n style as any,\n ]}\n placeholderTextColor={placeholderTextColor}\n maxLength={maxLength}\n testID={dataTestId || id}\n accessibilityLabel={ariaLabel}\n accessibilityHint={ariaDescribedBy}\n accessibilityState={{\n disabled: disabled || ariaDisabled,\n }}\n accessible={true}\n />\n );\n }\n);\n\nTextAreaPrimitive.displayName = \"TextAreaPrimitive\";\n","import React from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text, Icon } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem } from \"@xsolla/xui-core\";\nimport { Badge } from \"@xsolla/xui-badge\";\nimport { User } from \"@xsolla/xui-icons-base\";\n\nexport interface AvatarProps {\n /** Image source URL */\n src?: string;\n /** Icon component to display when no image is provided */\n icon?: React.ReactNode;\n /** Text/Initials to display when no image or icon is provided */\n text?: string;\n /** Size of the avatar */\n size?: \"xl\" | \"lg\" | \"md\" | \"sm\" | \"xs\";\n /** If true, the avatar will be square with small border radius. If false, it will be a circle. */\n square?: boolean;\n /** Whether to show an alert badge */\n badge?: boolean;\n /** Number or text to display in the badge notification */\n badgeCount?: React.ReactNode;\n /** If true, the avatar will have a border to separate it from other avatars in a group */\n stroke?: boolean;\n /** Background color for the avatar. Defaults to theme background secondary. */\n backgroundColor?: string;\n /** Disable hover effect. Used internally by AvatarGroup. */\n disableHover?: boolean;\n /** Accessible label for the avatar. Recommended for screen readers. */\n \"aria-label\"?: string;\n /** Alternative text for the avatar image */\n alt?: string;\n /** Click handler for the avatar */\n onClick?: () => void;\n /** Color tone for the badge */\n badgeTone?:\n | \"primary\"\n | \"secondary\"\n | \"brand\"\n | \"brandExtra\"\n | \"success\"\n | \"warning\"\n | \"alert\"\n | \"neutral\";\n}\n\nexport const Avatar: React.FC<AvatarProps> = ({\n src,\n icon,\n text,\n size = \"md\",\n square = false,\n badge = false,\n badgeCount,\n badgeTone = \"alert\",\n stroke = false,\n backgroundColor,\n disableHover = false,\n \"aria-label\": ariaLabel,\n alt,\n onClick,\n}) => {\n const { theme } = useDesignSystem();\n\n const sizeStyles = theme.sizing.avatar(size);\n\n // Border radius based on square or circle variant\n const borderRadius = square\n ? sizeStyles.borderRadiusSquare\n : sizeStyles.borderRadiusCircle;\n\n // Badge size: XL (20px) when showing count, S (8px) for dot-only\n const badgeSize = badgeCount ? \"xl\" : \"sm\";\n\n // Badge offset differs for circle vs square, and for dot vs count\n // Dot badge (8px) needs different offset per avatar size\n const getDotOffset = () => {\n if (square) {\n return { right: -3, top: -3 };\n }\n // Circle - position dot on the edge based on avatar size\n const circleOffsets = {\n xl: { right: 4, top: 4 },\n lg: { right: 3, top: 3 },\n md: { right: 2, top: 2 },\n sm: { right: 1, top: 1 },\n xs: { right: 0, top: 0 },\n };\n return circleOffsets[size];\n };\n\n const badgeOffset = badgeCount\n ? square\n ? sizeStyles.badgeOffsetSquare\n : sizeStyles.badgeOffsetCircle\n : getDotOffset();\n\n // Display badge count\n const displayBadgeCount = badgeCount;\n\n return (\n <Box\n width={sizeStyles.size}\n height={sizeStyles.size}\n position=\"relative\"\n {...(!src && { role: \"img\", \"aria-label\": ariaLabel })}\n {...(onClick && {\n onPress: onClick,\n onKeyDown: (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n onClick();\n }\n },\n cursor: \"pointer\",\n role: \"button\",\n tabIndex: 0,\n })}\n >\n <Box\n width={sizeStyles.size}\n height={sizeStyles.size}\n borderRadius={borderRadius}\n backgroundColor={backgroundColor || theme.colors.background.secondary}\n {...(!disableHover &&\n !src && {\n hoverStyle: {\n backgroundColor: theme.colors.overlay.mono,\n },\n })}\n alignItems=\"center\"\n justifyContent=\"center\"\n position=\"relative\"\n overflow=\"hidden\"\n borderWidth={stroke ? 1 : 0}\n borderColor={theme.colors.background.primary}\n >\n {src ? (\n <Box\n as=\"img\"\n src={src}\n alt={alt || ariaLabel || \"\"}\n position=\"absolute\"\n top={0}\n left={0}\n width={sizeStyles.size}\n height={sizeStyles.size}\n borderRadius={borderRadius}\n />\n ) : icon ? (\n <Icon size={sizeStyles.iconSize} color={theme.colors.content.primary}>\n {icon}\n </Icon>\n ) : text ? (\n <Text\n fontSize={sizeStyles.fontSize}\n color={theme.colors.content.primary}\n fontWeight=\"600\"\n >\n {text}\n </Text>\n ) : (\n <User\n size={sizeStyles.iconSize}\n color={theme.colors.content.primary}\n />\n )}\n </Box>\n\n {badge && (\n <Box\n position=\"absolute\"\n right={badgeOffset.right}\n top={badgeOffset.top}\n >\n <Badge\n size={badgeSize}\n tone={badgeTone}\n showStroke\n aria-label={\n displayBadgeCount\n ? `${displayBadgeCount} notifications`\n : \"Notification\"\n }\n >\n {displayBadgeCount}\n </Badge>\n </Box>\n )}\n </Box>\n );\n};\n","import React 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 { Tooltip } from \"@xsolla/xui-tooltip\";\nimport { Avatar } from \"./Avatar\";\n\n/** Theme type from the design system */\ntype Theme = ReturnType<typeof useDesignSystem>[\"theme\"];\n\n/** Item in the avatar group list */\nexport interface AvatarGroupItem {\n /** Image source URL */\n src?: string;\n /** Initials to display when no image is provided */\n initials?: string;\n /** Click handler for the avatar */\n onClick?: () => void;\n /** Tooltip text to display on hover */\n tooltip?: string;\n}\n\n/** Avatar background mode - preset colors, 'mixed' for cycling, or a theme function */\nexport type AvatarBackgroundMode =\n | \"mixed\"\n | \"brand\"\n | \"brandExtra\"\n | \"success\"\n | \"warning\"\n | \"alert\"\n | \"neutral\"\n | ((theme: Theme) => string);\n\nexport interface AvatarGroupProps {\n /**\n * List of avatars to display in the group.\n * `tooltip` property is text to be displayed in the tooltip when hovering over the avatar.\n */\n list: AvatarGroupItem[];\n /** Size of the avatars in the group */\n size?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n /**\n * The maximum number of avatars to display before collapsing the rest into a \"+N\" counter.\n * If the number of avatars exceeds this value, the extra avatars will be hidden.\n */\n maxVisible?: number;\n /** Whether to show a stroke/border around each avatar */\n stroke?: boolean;\n /**\n * Controls the background color mode for avatars in the group.\n * - 'mixed' (default): Avatars cycle through different colors\n * - 'brand', 'brandExtra', 'success', 'warning', 'alert', 'neutral': Single color for all avatars\n * - Theme function: A function that receives theme and returns any color from the design system.\n * Example: (theme) => theme.colors.core.link.link\n */\n avatarBackgroundMode?: AvatarBackgroundMode;\n /** Accessible label for the avatar group. Defaults to \"Group of X users\". */\n \"aria-label\"?: string;\n}\n\n// Map external size values to internal Avatar size values\nconst sizeMap: Record<\n \"sm\" | \"md\" | \"lg\" | \"xl\",\n \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"\n> = {\n sm: \"sm\",\n md: \"md\",\n lg: \"lg\",\n xl: \"xl\",\n};\n\nexport const AvatarGroup: React.FC<AvatarGroupProps> = ({\n list,\n size = \"md\",\n maxVisible = 6,\n stroke = true,\n avatarBackgroundMode = \"mixed\",\n \"aria-label\": ariaLabel,\n}) => {\n const { theme } = useDesignSystem();\n\n // Map external size to internal Avatar size\n const internalSize = sizeMap[size];\n\n const totalCount = list.length;\n\n // Determine which avatars to show\n // Ensure maxVisible is non-negative and doesn't exceed totalCount\n const visibleCount = Math.min(totalCount, Math.max(0, maxVisible));\n const visibleListItems = list.slice(0, visibleCount);\n const remainingCount = totalCount - visibleCount;\n\n // Overlap amount: 4px in Figma\n const overlap = -4;\n\n // Background colors for text/icon avatars (cycling through theme colors)\n const mixedBackgrounds = [\n theme.colors.background.alert.secondary,\n theme.colors.background.warning.secondary,\n theme.colors.background.brandExtra.secondary,\n theme.colors.background.neutral.secondary,\n theme.colors.background.brand.secondary,\n theme.colors.background.success.secondary,\n theme.colors.background.success.primary,\n ];\n\n // Preset color mapping\n const presetColors: Record<string, string> = {\n brand: theme.colors.background.brand.secondary,\n brandExtra: theme.colors.background.brandExtra.secondary,\n success: theme.colors.background.success.secondary,\n warning: theme.colors.background.warning.secondary,\n alert: theme.colors.background.alert.secondary,\n neutral: theme.colors.background.neutral.secondary,\n };\n\n // Get background color based on avatarBackgroundMode\n const getBackgroundColor = (index: number): string => {\n if (typeof avatarBackgroundMode === \"function\") {\n return avatarBackgroundMode(theme);\n }\n if (avatarBackgroundMode === \"mixed\") {\n return mixedBackgrounds[index % mixedBackgrounds.length];\n }\n // Preset color mode\n return (\n presetColors[avatarBackgroundMode] || theme.colors.background.secondary\n );\n };\n\n // Default accessible label for the group\n const defaultAriaLabel =\n totalCount === 1\n ? \"1 user\"\n : totalCount === visibleCount\n ? `${totalCount} users`\n : `${visibleCount} of ${totalCount} users`;\n\n // Render an avatar with optional tooltip wrapper\n const renderAvatarWithTooltip = (\n avatar: React.ReactNode,\n tooltip: string | undefined,\n key: number\n ) => {\n if (tooltip) {\n return (\n <Tooltip key={key} content={tooltip} placement=\"top\">\n {avatar}\n </Tooltip>\n );\n }\n return avatar;\n };\n\n return (\n <Box\n flexDirection=\"row\"\n alignItems=\"center\"\n role=\"group\"\n aria-label={ariaLabel || defaultAriaLabel}\n >\n {visibleListItems.map((item, index) => {\n const shouldApplyBackground = !item.src;\n const backgroundColor = shouldApplyBackground\n ? getBackgroundColor(index)\n : undefined;\n\n // Only enable hover for image avatars with onClick\n const shouldEnableHover = !!item.src && !!item.onClick;\n\n const avatar = (\n <Box\n key={index}\n marginLeft={index === 0 ? 0 : overlap}\n zIndex={totalCount - index}\n >\n <Avatar\n src={item.src}\n text={item.initials}\n size={internalSize}\n stroke={stroke}\n backgroundColor={backgroundColor}\n disableHover={!shouldEnableHover}\n onClick={item.onClick}\n {...(item.tooltip ? { \"aria-label\": item.tooltip } : {})}\n />\n </Box>\n );\n\n return renderAvatarWithTooltip(avatar, item.tooltip, index);\n })}\n\n {remainingCount > 0 && (\n <Box marginLeft={overlap} zIndex={0}>\n <Avatar\n size={internalSize}\n text={`+${remainingCount}`}\n stroke={stroke}\n backgroundColor={theme.colors.background.secondary}\n disableHover={true}\n aria-label={`${remainingCount} more ${remainingCount === 1 ? \"user\" : \"users\"}`}\n />\n </Box>\n )}\n </Box>\n );\n};\n"],"mappings":"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","names":["jsx","View","jsx","View","jsx","View","jsx","jsx","forwardRef","RNTextInput","jsx","jsx","useDesignSystem","jsx","jsxs","useDesignSystem"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-avatar",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.79.0",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -10,11 +10,11 @@
|
|
|
10
10
|
"build:native": "PLATFORM=native tsup"
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@xsolla/xui-badge": "0.
|
|
14
|
-
"@xsolla/xui-core": "0.
|
|
15
|
-
"@xsolla/xui-icons-base": "0.
|
|
16
|
-
"@xsolla/xui-primitives-core": "0.
|
|
17
|
-
"@xsolla/xui-tooltip": "0.
|
|
13
|
+
"@xsolla/xui-badge": "0.79.0",
|
|
14
|
+
"@xsolla/xui-core": "0.79.0",
|
|
15
|
+
"@xsolla/xui-icons-base": "0.79.0",
|
|
16
|
+
"@xsolla/xui-primitives-core": "0.79.0",
|
|
17
|
+
"@xsolla/xui-tooltip": "0.79.0"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
|
20
20
|
"react": ">=16.8.0",
|
package/web/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.tsx","../../../primitives-web/src/Box.tsx","../../../primitives-web/src/Text.tsx","../../../primitives-web/src/Spinner.tsx","../../../primitives-web/src/Icon.tsx","../../../primitives-web/src/Divider.tsx","../../../primitives-web/src/Input.tsx","../../../primitives-web/src/TextArea.tsx","../../src/Avatar.tsx","../../src/AvatarGroup.tsx"],"sourcesContent":["export * from \"./Avatar\";\nexport * from \"./AvatarGroup\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport type { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledBox = styled.div<BoxProps>`\n display: flex;\n box-sizing: border-box;\n background-color: ${(props) => props.backgroundColor || \"transparent\"};\n border-color: ${(props) => props.borderColor || \"transparent\"};\n border-width: ${(props) =>\n typeof props.borderWidth === \"number\"\n ? `${props.borderWidth}px`\n : props.borderWidth || 0};\n\n ${(props) =>\n props.borderBottomWidth !== undefined &&\n `\n border-bottom-width: ${typeof props.borderBottomWidth === \"number\" ? `${props.borderBottomWidth}px` : props.borderBottomWidth};\n border-bottom-color: ${props.borderBottomColor || props.borderColor || \"transparent\"};\n border-bottom-style: solid;\n `}\n ${(props) =>\n props.borderTopWidth !== undefined &&\n `\n border-top-width: ${typeof props.borderTopWidth === \"number\" ? `${props.borderTopWidth}px` : props.borderTopWidth};\n border-top-color: ${props.borderTopColor || props.borderColor || \"transparent\"};\n border-top-style: solid;\n `}\n ${(props) =>\n props.borderLeftWidth !== undefined &&\n `\n border-left-width: ${typeof props.borderLeftWidth === \"number\" ? `${props.borderLeftWidth}px` : props.borderLeftWidth};\n border-left-color: ${props.borderLeftColor || props.borderColor || \"transparent\"};\n border-left-style: solid;\n `}\n ${(props) =>\n props.borderRightWidth !== undefined &&\n `\n border-right-width: ${typeof props.borderRightWidth === \"number\" ? `${props.borderRightWidth}px` : props.borderRightWidth};\n border-right-color: ${props.borderRightColor || props.borderColor || \"transparent\"};\n border-right-style: solid;\n `}\n\n border-style: ${(props) =>\n props.borderStyle ||\n (props.borderWidth ||\n props.borderBottomWidth ||\n props.borderTopWidth ||\n props.borderLeftWidth ||\n props.borderRightWidth\n ? \"solid\"\n : \"none\")};\n border-radius: ${(props) =>\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius || 0};\n height: ${(props) =>\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height || \"auto\"};\n width: ${(props) =>\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width || \"auto\"};\n min-width: ${(props) =>\n typeof props.minWidth === \"number\"\n ? `${props.minWidth}px`\n : props.minWidth || \"auto\"};\n min-height: ${(props) =>\n typeof props.minHeight === \"number\"\n ? `${props.minHeight}px`\n : props.minHeight || \"auto\"};\n\n padding: ${(props) =>\n typeof props.padding === \"number\"\n ? `${props.padding}px`\n : props.padding || 0};\n ${(props) =>\n props.paddingHorizontal &&\n `\n padding-left: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n padding-right: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n `}\n ${(props) =>\n props.paddingVertical &&\n `\n padding-top: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n padding-bottom: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n `}\n ${(props) =>\n props.paddingTop !== undefined &&\n `padding-top: ${typeof props.paddingTop === \"number\" ? `${props.paddingTop}px` : props.paddingTop};`}\n ${(props) =>\n props.paddingBottom !== undefined &&\n `padding-bottom: ${typeof props.paddingBottom === \"number\" ? `${props.paddingBottom}px` : props.paddingBottom};`}\n ${(props) =>\n props.paddingLeft !== undefined &&\n `padding-left: ${typeof props.paddingLeft === \"number\" ? `${props.paddingLeft}px` : props.paddingLeft};`}\n ${(props) =>\n props.paddingRight !== undefined &&\n `padding-right: ${typeof props.paddingRight === \"number\" ? `${props.paddingRight}px` : props.paddingRight};`}\n\n margin: ${(props) =>\n typeof props.margin === \"number\" ? `${props.margin}px` : props.margin || 0};\n ${(props) =>\n props.marginTop !== undefined &&\n `margin-top: ${typeof props.marginTop === \"number\" ? `${props.marginTop}px` : props.marginTop};`}\n ${(props) =>\n props.marginBottom !== undefined &&\n `margin-bottom: ${typeof props.marginBottom === \"number\" ? `${props.marginBottom}px` : props.marginBottom};`}\n ${(props) =>\n props.marginLeft !== undefined &&\n `margin-left: ${typeof props.marginLeft === \"number\" ? `${props.marginLeft}px` : props.marginLeft};`}\n ${(props) =>\n props.marginRight !== undefined &&\n `margin-right: ${typeof props.marginRight === \"number\" ? `${props.marginRight}px` : props.marginRight};`}\n\n flex-direction: ${(props) => props.flexDirection || \"column\"};\n flex-wrap: ${(props) => props.flexWrap || \"nowrap\"};\n align-items: ${(props) => props.alignItems || \"stretch\"};\n justify-content: ${(props) => props.justifyContent || \"flex-start\"};\n cursor: ${(props) =>\n props.cursor\n ? props.cursor\n : props.onClick || props.onPress\n ? \"pointer\"\n : \"inherit\"};\n position: ${(props) => props.position || \"static\"};\n top: ${(props) =>\n typeof props.top === \"number\" ? `${props.top}px` : props.top};\n bottom: ${(props) =>\n typeof props.bottom === \"number\" ? `${props.bottom}px` : props.bottom};\n left: ${(props) =>\n typeof props.left === \"number\" ? `${props.left}px` : props.left};\n right: ${(props) =>\n typeof props.right === \"number\" ? `${props.right}px` : props.right};\n flex: ${(props) => props.flex};\n flex-shrink: ${(props) => props.flexShrink ?? 1};\n gap: ${(props) =>\n typeof props.gap === \"number\" ? `${props.gap}px` : props.gap || 0};\n align-self: ${(props) => props.alignSelf || \"auto\"};\n overflow: ${(props) => props.overflow || \"visible\"};\n overflow-x: ${(props) => props.overflowX || \"visible\"};\n overflow-y: ${(props) => props.overflowY || \"visible\"};\n z-index: ${(props) => props.zIndex};\n opacity: ${(props) => (props.disabled ? 0.5 : 1)};\n pointer-events: ${(props) => (props.disabled ? \"none\" : \"auto\")};\n\n &:hover {\n ${(props) =>\n props.hoverStyle?.backgroundColor &&\n `background-color: ${props.hoverStyle.backgroundColor};`}\n ${(props) =>\n props.hoverStyle?.borderColor &&\n `border-color: ${props.hoverStyle.borderColor};`}\n }\n\n &:active {\n ${(props) =>\n props.pressStyle?.backgroundColor &&\n `background-color: ${props.pressStyle.backgroundColor};`}\n }\n`;\n\nexport const Box = React.forwardRef<\n HTMLDivElement | HTMLButtonElement,\n BoxProps\n>(\n (\n {\n children,\n onPress,\n onKeyDown,\n onKeyUp,\n role,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-current\": ariaCurrent,\n \"aria-disabled\": ariaDisabled,\n \"aria-live\": ariaLive,\n \"aria-busy\": ariaBusy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-expanded\": ariaExpanded,\n \"aria-haspopup\": ariaHasPopup,\n \"aria-pressed\": ariaPressed,\n \"aria-controls\": ariaControls,\n tabIndex,\n as,\n src,\n alt,\n type,\n disabled,\n id,\n ...props\n },\n ref\n ) => {\n // Handle as=\"img\" for rendering images with proper border-radius\n if (as === \"img\" && src) {\n return (\n <img\n src={src}\n alt={alt || \"\"}\n style={{\n display: \"block\",\n objectFit: \"cover\",\n width:\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width,\n height:\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height,\n borderRadius:\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius,\n position: props.position,\n top: typeof props.top === \"number\" ? `${props.top}px` : props.top,\n left:\n typeof props.left === \"number\" ? `${props.left}px` : props.left,\n right:\n typeof props.right === \"number\"\n ? `${props.right}px`\n : props.right,\n bottom:\n typeof props.bottom === \"number\"\n ? `${props.bottom}px`\n : props.bottom,\n }}\n />\n );\n }\n\n return (\n <StyledBox\n ref={ref}\n as={as}\n id={id}\n type={as === \"button\" ? type || \"button\" : undefined}\n disabled={as === \"button\" ? disabled : undefined}\n onClick={onPress}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n role={role}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-current={ariaCurrent}\n aria-disabled={ariaDisabled}\n aria-busy={ariaBusy}\n aria-describedby={ariaDescribedBy}\n aria-expanded={ariaExpanded}\n aria-haspopup={ariaHasPopup}\n aria-pressed={ariaPressed}\n aria-controls={ariaControls}\n aria-live={ariaLive}\n tabIndex={tabIndex !== undefined ? tabIndex : undefined}\n {...props}\n >\n {children}\n </StyledBox>\n );\n }\n);\n\nBox.displayName = \"Box\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledText = styled.span<TextProps>`\n color: ${(props) => props.color || \"inherit\"};\n font-size: ${(props) =>\n typeof props.fontSize === \"number\"\n ? `${props.fontSize}px`\n : props.fontSize || \"inherit\"};\n font-weight: ${(props) => props.fontWeight || \"normal\"};\n font-family: ${(props) =>\n props.fontFamily ||\n '\"Pilat Wide Bold\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif !important'};\n line-height: ${(props) =>\n typeof props.lineHeight === \"number\"\n ? `${props.lineHeight}px`\n : props.lineHeight || \"inherit\"};\n white-space: ${(props) => props.whiteSpace || \"normal\"};\n text-align: ${(props) => props.textAlign || \"inherit\"};\n text-decoration: ${(props) => props.textDecoration || \"none\"};\n`;\n\nexport const Text: React.FC<TextProps> = ({\n style,\n className,\n id,\n role,\n ...props\n}) => {\n return (\n <StyledText\n {...props}\n style={style}\n className={className}\n id={id}\n role={role}\n />\n );\n};\n","import React from \"react\";\nimport styled, { keyframes } from \"styled-components\";\nimport type { SpinnerProps } from \"@xsolla/xui-primitives-core\";\n\nconst rotate = keyframes`\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n`;\n\nconst StyledSpinner = styled.div<SpinnerProps>`\n width: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n height: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n border: ${(props) => props.strokeWidth || 2}px solid\n ${(props) => props.color || \"currentColor\"};\n border-bottom-color: transparent;\n border-radius: 50%;\n display: inline-block;\n box-sizing: border-box;\n animation: ${rotate} 1s linear infinite;\n`;\n\nexport const Spinner: React.FC<SpinnerProps> = ({\n role = \"status\",\n \"aria-label\": ariaLabel,\n \"aria-live\": ariaLive = \"polite\",\n \"aria-describedby\": ariaDescribedBy,\n testID,\n ...props\n}) => {\n return (\n <StyledSpinner\n role={role}\n aria-label={ariaLabel}\n aria-live={ariaLive}\n aria-describedby={ariaDescribedBy}\n data-testid={testID}\n {...props}\n />\n );\n};\n\nSpinner.displayName = \"Spinner\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { IconProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledIcon = styled.div<IconProps>`\n display: flex;\n align-items: center;\n justify-content: center;\n width: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n height: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n color: ${(props) => props.color || \"currentColor\"};\n\n svg {\n width: 100%;\n height: 100%;\n fill: none;\n stroke: currentColor;\n }\n`;\n\nexport const Icon: React.FC<IconProps> = ({ children, ...props }) => {\n return <StyledIcon {...props}>{children}</StyledIcon>;\n};\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { DividerProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledDivider = styled.div<DividerProps>`\n background-color: ${(props) =>\n props.dashStroke\n ? \"transparent\"\n : props.color || \"rgba(255, 255, 255, 0.15)\"};\n width: ${(props) =>\n props.vertical\n ? typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width || \"1px\"\n : \"100%\"};\n height: ${(props) =>\n props.vertical\n ? \"100%\"\n : typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height || \"1px\"};\n\n ${(props) =>\n props.dashStroke &&\n `\n border-style: dashed;\n border-color: ${props.color || \"rgba(255, 255, 255, 0.15)\"};\n border-width: 0;\n ${\n props.vertical\n ? `\n border-left-width: ${typeof props.width === \"number\" ? `${props.width}px` : props.width || \"1px\"};\n height: 100%;\n `\n : `\n border-top-width: ${typeof props.height === \"number\" ? `${props.height}px` : props.height || \"1px\"};\n width: 100%;\n `\n }\n `}\n`;\n\nexport const Divider: React.FC<DividerProps> = (props) => {\n return <StyledDivider {...props} />;\n};\n","import React, { forwardRef } from \"react\";\nimport styled from \"styled-components\";\nimport { InputPrimitiveProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledInput = styled.input<InputPrimitiveProps>`\n background: transparent;\n border: none;\n outline: none;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n color: ${(props) => props.color || \"inherit\"};\n font-size: ${(props) =>\n typeof props.fontSize === \"number\"\n ? `${props.fontSize}px`\n : props.fontSize || \"inherit\"};\n font-family: inherit;\n text-align: inherit;\n\n &::placeholder {\n color: ${(props) =>\n props.placeholderTextColor || \"rgba(255, 255, 255, 0.5)\"};\n }\n\n &:disabled {\n cursor: not-allowed;\n }\n`;\n\nexport const InputPrimitive = forwardRef<HTMLInputElement, InputPrimitiveProps>(\n (\n {\n value,\n placeholder,\n onChange,\n onChangeText,\n onFocus,\n onBlur,\n onKeyDown,\n disabled,\n secureTextEntry,\n style,\n color,\n fontSize,\n placeholderTextColor,\n maxLength,\n name,\n type,\n inputMode,\n autoComplete,\n id,\n \"aria-invalid\": ariaInvalid,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-label\": ariaLabel,\n \"aria-disabled\": ariaDisabled,\n \"data-testid\": dataTestId,\n ...rest\n },\n ref\n ) => {\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (onChange) {\n onChange(e);\n }\n if (onChangeText) {\n onChangeText(e.target.value);\n }\n };\n\n // Always pass value to make it a controlled input\n const inputValue = value !== undefined ? value : \"\";\n\n return (\n <StyledInput\n ref={ref}\n id={id}\n value={inputValue}\n name={name}\n placeholder={placeholder}\n onChange={handleChange}\n onFocus={onFocus}\n onBlur={onBlur}\n onKeyDown={onKeyDown}\n disabled={disabled}\n type={secureTextEntry ? \"password\" : type || \"text\"}\n inputMode={inputMode}\n autoComplete={autoComplete}\n style={style}\n color={color}\n fontSize={fontSize}\n placeholderTextColor={placeholderTextColor}\n maxLength={maxLength}\n aria-invalid={ariaInvalid}\n aria-describedby={ariaDescribedBy}\n aria-labelledby={ariaLabelledBy}\n aria-label={ariaLabel}\n aria-disabled={ariaDisabled}\n data-testid={dataTestId}\n {...rest}\n />\n );\n }\n);\n\nInputPrimitive.displayName = \"InputPrimitive\";\n","import React, { forwardRef } from \"react\";\nimport styled from \"styled-components\";\nimport { TextAreaPrimitiveProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledTextArea = styled.textarea<TextAreaPrimitiveProps>`\n background: transparent;\n border: none;\n outline: none;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n color: ${(props) => props.color || \"inherit\"};\n font-size: ${(props) =>\n typeof props.fontSize === \"number\"\n ? `${props.fontSize}px`\n : props.fontSize || \"inherit\"};\n font-family: inherit;\n text-align: inherit;\n resize: none;\n\n &::placeholder {\n color: ${(props) =>\n props.placeholderTextColor || \"rgba(255, 255, 255, 0.5)\"};\n }\n\n &:disabled {\n cursor: not-allowed;\n }\n`;\n\nexport const TextAreaPrimitive = forwardRef<\n HTMLTextAreaElement,\n TextAreaPrimitiveProps\n>(\n (\n {\n value,\n placeholder,\n onChangeText,\n onFocus,\n onBlur,\n onKeyDown,\n disabled,\n style,\n color,\n fontSize,\n placeholderTextColor,\n maxLength,\n rows,\n },\n ref\n ) => {\n return (\n <StyledTextArea\n ref={ref}\n value={value}\n placeholder={placeholder}\n onChange={(e) => onChangeText?.(e.target.value)}\n onFocus={onFocus}\n onBlur={onBlur}\n onKeyDown={onKeyDown}\n disabled={disabled}\n style={style}\n color={color}\n fontSize={fontSize}\n placeholderTextColor={placeholderTextColor}\n maxLength={maxLength}\n rows={rows}\n />\n );\n }\n);\n\nTextAreaPrimitive.displayName = \"TextAreaPrimitive\";\n","import React from \"react\";\n// @ts-ignore - this will be resolved at build time\nimport { Box, Text, Icon } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem } from \"@xsolla/xui-core\";\nimport { Badge } from \"@xsolla/xui-badge\";\nimport { User } from \"@xsolla/xui-icons-base\";\n\nexport interface AvatarProps {\n /** Image source URL */\n src?: string;\n /** Icon component to display when no image is provided */\n icon?: React.ReactNode;\n /** Text/Initials to display when no image or icon is provided */\n text?: string;\n /** Size of the avatar */\n size?: \"xl\" | \"lg\" | \"md\" | \"sm\" | \"xs\";\n /** If true, the avatar will be square with small border radius. If false, it will be a circle. */\n square?: boolean;\n /** Whether to show an alert badge */\n badge?: boolean;\n /** Number or text to display in the badge notification */\n badgeCount?: React.ReactNode;\n /** If true, the avatar will have a border to separate it from other avatars in a group */\n stroke?: boolean;\n /** Background color for the avatar. Defaults to theme background secondary. */\n backgroundColor?: string;\n /** Disable hover effect. Used internally by AvatarGroup. */\n disableHover?: boolean;\n /** Accessible label for the avatar. Recommended for screen readers. */\n \"aria-label\"?: string;\n /** Alternative text for the avatar image */\n alt?: string;\n /** Click handler for the avatar */\n onClick?: () => void;\n /** Color tone for the badge */\n badgeTone?:\n | \"primary\"\n | \"secondary\"\n | \"brand\"\n | \"brandExtra\"\n | \"success\"\n | \"warning\"\n | \"alert\"\n | \"neutral\";\n}\n\nexport const Avatar: React.FC<AvatarProps> = ({\n src,\n icon,\n text,\n size = \"md\",\n square = false,\n badge = false,\n badgeCount,\n badgeTone = \"alert\",\n stroke = false,\n backgroundColor,\n disableHover = false,\n \"aria-label\": ariaLabel,\n alt,\n onClick,\n}) => {\n const { theme } = useDesignSystem();\n\n const sizeStyles = theme.sizing.avatar(size);\n\n // Border radius based on square or circle variant\n const borderRadius = square\n ? sizeStyles.borderRadiusSquare\n : sizeStyles.borderRadiusCircle;\n\n // Badge size: XL (20px) when showing count, S (8px) for dot-only\n const badgeSize = badgeCount ? \"xl\" : \"sm\";\n\n // Badge offset differs for circle vs square, and for dot vs count\n // Dot badge (8px) needs different offset per avatar size\n const getDotOffset = () => {\n if (square) {\n return { right: -3, top: -3 };\n }\n // Circle - position dot on the edge based on avatar size\n const circleOffsets = {\n xl: { right: 4, top: 4 },\n lg: { right: 3, top: 3 },\n md: { right: 2, top: 2 },\n sm: { right: 1, top: 1 },\n xs: { right: 0, top: 0 },\n };\n return circleOffsets[size];\n };\n\n const badgeOffset = badgeCount\n ? square\n ? sizeStyles.badgeOffsetSquare\n : sizeStyles.badgeOffsetCircle\n : getDotOffset();\n\n // Display badge count\n const displayBadgeCount = badgeCount;\n\n return (\n <Box\n width={sizeStyles.size}\n height={sizeStyles.size}\n position=\"relative\"\n {...(!src && { role: \"img\", \"aria-label\": ariaLabel })}\n {...(onClick && {\n onPress: onClick,\n onKeyDown: (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n onClick();\n }\n },\n cursor: \"pointer\",\n role: \"button\",\n tabIndex: 0,\n })}\n >\n <Box\n width={sizeStyles.size}\n height={sizeStyles.size}\n borderRadius={borderRadius}\n backgroundColor={backgroundColor || theme.colors.background.secondary}\n {...(!disableHover &&\n !src && {\n hoverStyle: {\n backgroundColor: theme.colors.overlay.mono,\n },\n })}\n alignItems=\"center\"\n justifyContent=\"center\"\n position=\"relative\"\n overflow=\"hidden\"\n borderWidth={stroke ? 1 : 0}\n borderColor={theme.colors.background.primary}\n >\n {src ? (\n <Box\n as=\"img\"\n src={src}\n alt={alt || ariaLabel || \"\"}\n position=\"absolute\"\n top={0}\n left={0}\n width={sizeStyles.size}\n height={sizeStyles.size}\n borderRadius={borderRadius}\n />\n ) : icon ? (\n <Icon size={sizeStyles.iconSize} color={theme.colors.content.primary}>\n {icon}\n </Icon>\n ) : text ? (\n <Text\n fontSize={sizeStyles.fontSize}\n color={theme.colors.content.primary}\n fontWeight=\"600\"\n >\n {text}\n </Text>\n ) : (\n <User\n size={sizeStyles.iconSize}\n color={theme.colors.content.primary}\n />\n )}\n </Box>\n\n {badge && (\n <Box\n position=\"absolute\"\n right={badgeOffset.right}\n top={badgeOffset.top}\n >\n <Badge\n size={badgeSize}\n tone={badgeTone}\n showStroke\n aria-label={\n displayBadgeCount\n ? `${displayBadgeCount} notifications`\n : \"Notification\"\n }\n >\n {displayBadgeCount}\n </Badge>\n </Box>\n )}\n </Box>\n );\n};\n","import React from \"react\";\n// @ts-ignore - this will be resolved at build time\nimport { Box } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem } from \"@xsolla/xui-core\";\nimport { Tooltip } from \"@xsolla/xui-tooltip\";\nimport { Avatar } from \"./Avatar\";\n\n/** Theme type from the design system */\ntype Theme = ReturnType<typeof useDesignSystem>[\"theme\"];\n\n/** Item in the avatar group list */\nexport interface AvatarGroupItem {\n /** Image source URL */\n src?: string;\n /** Initials to display when no image is provided */\n initials?: string;\n /** Click handler for the avatar */\n onClick?: () => void;\n /** Tooltip text to display on hover */\n tooltip?: string;\n}\n\n/** Avatar background mode - preset colors, 'mixed' for cycling, or a theme function */\nexport type AvatarBackgroundMode =\n | \"mixed\"\n | \"brand\"\n | \"brandExtra\"\n | \"success\"\n | \"warning\"\n | \"alert\"\n | \"neutral\"\n | ((theme: Theme) => string);\n\nexport interface AvatarGroupProps {\n /**\n * List of avatars to display in the group.\n * `tooltip` property is text to be displayed in the tooltip when hovering over the avatar.\n */\n list: AvatarGroupItem[];\n /** Size of the avatars in the group */\n size?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n /**\n * The maximum number of avatars to display before collapsing the rest into a \"+N\" counter.\n * If the number of avatars exceeds this value, the extra avatars will be hidden.\n */\n maxVisible?: number;\n /** Whether to show a stroke/border around each avatar */\n stroke?: boolean;\n /**\n * Controls the background color mode for avatars in the group.\n * - 'mixed' (default): Avatars cycle through different colors\n * - 'brand', 'brandExtra', 'success', 'warning', 'alert', 'neutral': Single color for all avatars\n * - Theme function: A function that receives theme and returns any color from the design system.\n * Example: (theme) => theme.colors.core.link.link\n */\n avatarBackgroundMode?: AvatarBackgroundMode;\n /** Accessible label for the avatar group. Defaults to \"Group of X users\". */\n \"aria-label\"?: string;\n}\n\n// Map external size values to internal Avatar size values\nconst sizeMap: Record<\n \"sm\" | \"md\" | \"lg\" | \"xl\",\n \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"\n> = {\n sm: \"sm\",\n md: \"md\",\n lg: \"lg\",\n xl: \"xl\",\n};\n\nexport const AvatarGroup: React.FC<AvatarGroupProps> = ({\n list,\n size = \"md\",\n maxVisible = 6,\n stroke = true,\n avatarBackgroundMode = \"mixed\",\n \"aria-label\": ariaLabel,\n}) => {\n const { theme } = useDesignSystem();\n\n // Map external size to internal Avatar size\n const internalSize = sizeMap[size];\n\n const totalCount = list.length;\n\n // Determine which avatars to show\n // Ensure maxVisible is non-negative and doesn't exceed totalCount\n const visibleCount = Math.min(totalCount, Math.max(0, maxVisible));\n const visibleListItems = list.slice(0, visibleCount);\n const remainingCount = totalCount - visibleCount;\n\n // Overlap amount: 4px in Figma\n const overlap = -4;\n\n // Background colors for text/icon avatars (cycling through theme colors)\n const mixedBackgrounds = [\n theme.colors.background.alert.secondary,\n theme.colors.background.warning.secondary,\n theme.colors.background.brandExtra.secondary,\n theme.colors.background.neutral.secondary,\n theme.colors.background.brand.secondary,\n theme.colors.background.success.secondary,\n theme.colors.background.success.primary,\n ];\n\n // Preset color mapping\n const presetColors: Record<string, string> = {\n brand: theme.colors.background.brand.secondary,\n brandExtra: theme.colors.background.brandExtra.secondary,\n success: theme.colors.background.success.secondary,\n warning: theme.colors.background.warning.secondary,\n alert: theme.colors.background.alert.secondary,\n neutral: theme.colors.background.neutral.secondary,\n };\n\n // Get background color based on avatarBackgroundMode\n const getBackgroundColor = (index: number): string => {\n if (typeof avatarBackgroundMode === \"function\") {\n return avatarBackgroundMode(theme);\n }\n if (avatarBackgroundMode === \"mixed\") {\n return mixedBackgrounds[index % mixedBackgrounds.length];\n }\n // Preset color mode\n return (\n presetColors[avatarBackgroundMode] || theme.colors.background.secondary\n );\n };\n\n // Default accessible label for the group\n const defaultAriaLabel =\n totalCount === 1\n ? \"1 user\"\n : totalCount === visibleCount\n ? `${totalCount} users`\n : `${visibleCount} of ${totalCount} users`;\n\n // Render an avatar with optional tooltip wrapper\n const renderAvatarWithTooltip = (\n avatar: React.ReactNode,\n tooltip: string | undefined,\n key: number\n ) => {\n if (tooltip) {\n return (\n <Tooltip key={key} content={tooltip} placement=\"top\">\n {avatar}\n </Tooltip>\n );\n }\n return avatar;\n };\n\n return (\n <Box\n flexDirection=\"row\"\n alignItems=\"center\"\n role=\"group\"\n aria-label={ariaLabel || defaultAriaLabel}\n >\n {visibleListItems.map((item, index) => {\n const shouldApplyBackground = !item.src;\n const backgroundColor = shouldApplyBackground\n ? getBackgroundColor(index)\n : undefined;\n\n // Only enable hover for image avatars with onClick\n const shouldEnableHover = !!item.src && !!item.onClick;\n\n const avatar = (\n <Box\n key={index}\n marginLeft={index === 0 ? 0 : overlap}\n zIndex={totalCount - index}\n >\n <Avatar\n src={item.src}\n text={item.initials}\n size={internalSize}\n stroke={stroke}\n backgroundColor={backgroundColor}\n disableHover={!shouldEnableHover}\n onClick={item.onClick}\n {...(item.tooltip ? { \"aria-label\": item.tooltip } : {})}\n />\n </Box>\n );\n\n return renderAvatarWithTooltip(avatar, item.tooltip, index);\n })}\n\n {remainingCount > 0 && (\n <Box marginLeft={overlap} zIndex={0}>\n <Avatar\n size={internalSize}\n text={`+${remainingCount}`}\n stroke={stroke}\n backgroundColor={theme.colors.background.secondary}\n disableHover={true}\n aria-label={`${remainingCount} more ${remainingCount === 1 ? \"user\" : \"users\"}`}\n />\n </Box>\n )}\n </Box>\n );\n};\n"],"mappings":"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","names":["styled","React","import_styled_components","import_jsx_runtime","styled","import_styled_components","import_jsx_runtime","styled","import_styled_components","import_jsx_runtime","styled","import_styled_components","import_jsx_runtime","styled","import_react","import_styled_components","import_jsx_runtime","styled","import_react","import_styled_components","import_jsx_runtime","styled","import_jsx_runtime","import_xui_core","import_jsx_runtime"]}
|
|
1
|
+
{"version":3,"sources":["../../src/index.tsx","../../../primitives-web/src/Box.tsx","../../../primitives-web/src/Text.tsx","../../../primitives-web/src/Spinner.tsx","../../../primitives-web/src/Icon.tsx","../../../primitives-web/src/Divider.tsx","../../../primitives-web/src/Input.tsx","../../../primitives-web/src/TextArea.tsx","../../src/Avatar.tsx","../../src/AvatarGroup.tsx"],"sourcesContent":["export * from \"./Avatar\";\nexport * from \"./AvatarGroup\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport type { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledBox = styled.div<BoxProps>`\n display: flex;\n box-sizing: border-box;\n background-color: ${(props) => props.backgroundColor || \"transparent\"};\n border-color: ${(props) => props.borderColor || \"transparent\"};\n border-width: ${(props) =>\n typeof props.borderWidth === \"number\"\n ? `${props.borderWidth}px`\n : props.borderWidth || 0};\n\n ${(props) =>\n props.borderBottomWidth !== undefined &&\n `\n border-bottom-width: ${typeof props.borderBottomWidth === \"number\" ? `${props.borderBottomWidth}px` : props.borderBottomWidth};\n border-bottom-color: ${props.borderBottomColor || props.borderColor || \"transparent\"};\n border-bottom-style: solid;\n `}\n ${(props) =>\n props.borderTopWidth !== undefined &&\n `\n border-top-width: ${typeof props.borderTopWidth === \"number\" ? `${props.borderTopWidth}px` : props.borderTopWidth};\n border-top-color: ${props.borderTopColor || props.borderColor || \"transparent\"};\n border-top-style: solid;\n `}\n ${(props) =>\n props.borderLeftWidth !== undefined &&\n `\n border-left-width: ${typeof props.borderLeftWidth === \"number\" ? `${props.borderLeftWidth}px` : props.borderLeftWidth};\n border-left-color: ${props.borderLeftColor || props.borderColor || \"transparent\"};\n border-left-style: solid;\n `}\n ${(props) =>\n props.borderRightWidth !== undefined &&\n `\n border-right-width: ${typeof props.borderRightWidth === \"number\" ? `${props.borderRightWidth}px` : props.borderRightWidth};\n border-right-color: ${props.borderRightColor || props.borderColor || \"transparent\"};\n border-right-style: solid;\n `}\n\n border-style: ${(props) =>\n props.borderStyle ||\n (props.borderWidth ||\n props.borderBottomWidth ||\n props.borderTopWidth ||\n props.borderLeftWidth ||\n props.borderRightWidth\n ? \"solid\"\n : \"none\")};\n border-radius: ${(props) =>\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius || 0};\n height: ${(props) =>\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height || \"auto\"};\n width: ${(props) =>\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width || \"auto\"};\n min-width: ${(props) =>\n typeof props.minWidth === \"number\"\n ? `${props.minWidth}px`\n : props.minWidth || \"auto\"};\n min-height: ${(props) =>\n typeof props.minHeight === \"number\"\n ? `${props.minHeight}px`\n : props.minHeight || \"auto\"};\n\n padding: ${(props) =>\n typeof props.padding === \"number\"\n ? `${props.padding}px`\n : props.padding || 0};\n ${(props) =>\n props.paddingHorizontal &&\n `\n padding-left: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n padding-right: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n `}\n ${(props) =>\n props.paddingVertical &&\n `\n padding-top: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n padding-bottom: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n `}\n ${(props) =>\n props.paddingTop !== undefined &&\n `padding-top: ${typeof props.paddingTop === \"number\" ? `${props.paddingTop}px` : props.paddingTop};`}\n ${(props) =>\n props.paddingBottom !== undefined &&\n `padding-bottom: ${typeof props.paddingBottom === \"number\" ? `${props.paddingBottom}px` : props.paddingBottom};`}\n ${(props) =>\n props.paddingLeft !== undefined &&\n `padding-left: ${typeof props.paddingLeft === \"number\" ? `${props.paddingLeft}px` : props.paddingLeft};`}\n ${(props) =>\n props.paddingRight !== undefined &&\n `padding-right: ${typeof props.paddingRight === \"number\" ? `${props.paddingRight}px` : props.paddingRight};`}\n\n margin: ${(props) =>\n typeof props.margin === \"number\" ? `${props.margin}px` : props.margin || 0};\n ${(props) =>\n props.marginTop !== undefined &&\n `margin-top: ${typeof props.marginTop === \"number\" ? `${props.marginTop}px` : props.marginTop};`}\n ${(props) =>\n props.marginBottom !== undefined &&\n `margin-bottom: ${typeof props.marginBottom === \"number\" ? `${props.marginBottom}px` : props.marginBottom};`}\n ${(props) =>\n props.marginLeft !== undefined &&\n `margin-left: ${typeof props.marginLeft === \"number\" ? `${props.marginLeft}px` : props.marginLeft};`}\n ${(props) =>\n props.marginRight !== undefined &&\n `margin-right: ${typeof props.marginRight === \"number\" ? `${props.marginRight}px` : props.marginRight};`}\n\n flex-direction: ${(props) => props.flexDirection || \"column\"};\n flex-wrap: ${(props) => props.flexWrap || \"nowrap\"};\n align-items: ${(props) => props.alignItems || \"stretch\"};\n justify-content: ${(props) => props.justifyContent || \"flex-start\"};\n cursor: ${(props) =>\n props.cursor\n ? props.cursor\n : props.onClick || props.onPress\n ? \"pointer\"\n : \"inherit\"};\n position: ${(props) => props.position || \"static\"};\n top: ${(props) =>\n typeof props.top === \"number\" ? `${props.top}px` : props.top};\n bottom: ${(props) =>\n typeof props.bottom === \"number\" ? `${props.bottom}px` : props.bottom};\n left: ${(props) =>\n typeof props.left === \"number\" ? `${props.left}px` : props.left};\n right: ${(props) =>\n typeof props.right === \"number\" ? `${props.right}px` : props.right};\n flex: ${(props) => props.flex};\n flex-shrink: ${(props) => props.flexShrink ?? 1};\n gap: ${(props) =>\n typeof props.gap === \"number\" ? `${props.gap}px` : props.gap || 0};\n align-self: ${(props) => props.alignSelf || \"auto\"};\n overflow: ${(props) => props.overflow || \"visible\"};\n overflow-x: ${(props) => props.overflowX || \"visible\"};\n overflow-y: ${(props) => props.overflowY || \"visible\"};\n z-index: ${(props) => props.zIndex};\n opacity: ${(props) => (props.disabled ? 0.5 : 1)};\n pointer-events: ${(props) => (props.disabled ? \"none\" : \"auto\")};\n\n &:hover {\n ${(props) =>\n props.hoverStyle?.backgroundColor &&\n `background-color: ${props.hoverStyle.backgroundColor};`}\n ${(props) =>\n props.hoverStyle?.borderColor &&\n `border-color: ${props.hoverStyle.borderColor};`}\n }\n\n &:active {\n ${(props) =>\n props.pressStyle?.backgroundColor &&\n `background-color: ${props.pressStyle.backgroundColor};`}\n }\n`;\n\nexport const Box = React.forwardRef<\n HTMLDivElement | HTMLButtonElement,\n BoxProps\n>(\n (\n {\n children,\n onPress,\n onKeyDown,\n onKeyUp,\n role,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-current\": ariaCurrent,\n \"aria-disabled\": ariaDisabled,\n \"aria-live\": ariaLive,\n \"aria-busy\": ariaBusy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-expanded\": ariaExpanded,\n \"aria-haspopup\": ariaHasPopup,\n \"aria-pressed\": ariaPressed,\n \"aria-controls\": ariaControls,\n tabIndex,\n as,\n src,\n alt,\n type,\n disabled,\n id,\n ...props\n },\n ref\n ) => {\n // Handle as=\"img\" for rendering images with proper border-radius\n if (as === \"img\" && src) {\n return (\n <img\n src={src}\n alt={alt || \"\"}\n style={{\n display: \"block\",\n objectFit: \"cover\",\n width:\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width,\n height:\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height,\n borderRadius:\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius,\n position: props.position,\n top: typeof props.top === \"number\" ? `${props.top}px` : props.top,\n left:\n typeof props.left === \"number\" ? `${props.left}px` : props.left,\n right:\n typeof props.right === \"number\"\n ? `${props.right}px`\n : props.right,\n bottom:\n typeof props.bottom === \"number\"\n ? `${props.bottom}px`\n : props.bottom,\n }}\n />\n );\n }\n\n return (\n <StyledBox\n ref={ref}\n as={as}\n id={id}\n type={as === \"button\" ? type || \"button\" : undefined}\n disabled={as === \"button\" ? disabled : undefined}\n onClick={onPress}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n role={role}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-current={ariaCurrent}\n aria-disabled={ariaDisabled}\n aria-busy={ariaBusy}\n aria-describedby={ariaDescribedBy}\n aria-expanded={ariaExpanded}\n aria-haspopup={ariaHasPopup}\n aria-pressed={ariaPressed}\n aria-controls={ariaControls}\n aria-live={ariaLive}\n tabIndex={tabIndex !== undefined ? tabIndex : undefined}\n {...props}\n >\n {children}\n </StyledBox>\n );\n }\n);\n\nBox.displayName = \"Box\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledText = styled.span<TextProps>`\n color: ${(props) => props.color || \"inherit\"};\n font-size: ${(props) =>\n typeof props.fontSize === \"number\"\n ? `${props.fontSize}px`\n : props.fontSize || \"inherit\"};\n font-weight: ${(props) => props.fontWeight || \"normal\"};\n font-family: ${(props) =>\n props.fontFamily ||\n '\"Pilat Wide Bold\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif !important'};\n line-height: ${(props) =>\n typeof props.lineHeight === \"number\"\n ? `${props.lineHeight}px`\n : props.lineHeight || \"inherit\"};\n white-space: ${(props) => props.whiteSpace || \"normal\"};\n text-align: ${(props) => props.textAlign || \"inherit\"};\n text-decoration: ${(props) => props.textDecoration || \"none\"};\n`;\n\nexport const Text: React.FC<TextProps> = ({\n style,\n className,\n id,\n role,\n ...props\n}) => {\n return (\n <StyledText\n {...props}\n style={style}\n className={className}\n id={id}\n role={role}\n />\n );\n};\n","import React from \"react\";\nimport styled, { keyframes } from \"styled-components\";\nimport type { SpinnerProps } from \"@xsolla/xui-primitives-core\";\n\nconst rotate = keyframes`\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n`;\n\nconst StyledSpinner = styled.div<SpinnerProps>`\n width: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n height: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n border: ${(props) => props.strokeWidth || 2}px solid\n ${(props) => props.color || \"currentColor\"};\n border-bottom-color: transparent;\n border-radius: 50%;\n display: inline-block;\n box-sizing: border-box;\n animation: ${rotate} 1s linear infinite;\n`;\n\nexport const Spinner: React.FC<SpinnerProps> = ({\n role = \"status\",\n \"aria-label\": ariaLabel,\n \"aria-live\": ariaLive = \"polite\",\n \"aria-describedby\": ariaDescribedBy,\n testID,\n ...props\n}) => {\n return (\n <StyledSpinner\n role={role}\n aria-label={ariaLabel}\n aria-live={ariaLive}\n aria-describedby={ariaDescribedBy}\n data-testid={testID}\n {...props}\n />\n );\n};\n\nSpinner.displayName = \"Spinner\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { IconProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledIcon = styled.div<IconProps>`\n display: flex;\n align-items: center;\n justify-content: center;\n width: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n height: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n color: ${(props) => props.color || \"currentColor\"};\n\n svg {\n width: 100%;\n height: 100%;\n fill: none;\n stroke: currentColor;\n }\n`;\n\nexport const Icon: React.FC<IconProps> = ({ children, ...props }) => {\n return <StyledIcon {...props}>{children}</StyledIcon>;\n};\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { DividerProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledDivider = styled.div<DividerProps>`\n background-color: ${(props) =>\n props.dashStroke\n ? \"transparent\"\n : props.color || \"rgba(255, 255, 255, 0.15)\"};\n width: ${(props) =>\n props.vertical\n ? typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width || \"1px\"\n : \"100%\"};\n height: ${(props) =>\n props.vertical\n ? \"100%\"\n : typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height || \"1px\"};\n\n ${(props) =>\n props.dashStroke &&\n `\n border-style: dashed;\n border-color: ${props.color || \"rgba(255, 255, 255, 0.15)\"};\n border-width: 0;\n ${\n props.vertical\n ? `\n border-left-width: ${typeof props.width === \"number\" ? `${props.width}px` : props.width || \"1px\"};\n height: 100%;\n `\n : `\n border-top-width: ${typeof props.height === \"number\" ? `${props.height}px` : props.height || \"1px\"};\n width: 100%;\n `\n }\n `}\n`;\n\nexport const Divider: React.FC<DividerProps> = (props) => {\n return <StyledDivider {...props} />;\n};\n","import React, { forwardRef } from \"react\";\nimport styled from \"styled-components\";\nimport { InputPrimitiveProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledInput = styled.input<InputPrimitiveProps>`\n background: transparent;\n border: none;\n outline: none;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n color: ${(props) => props.color || \"inherit\"};\n font-size: ${(props) =>\n typeof props.fontSize === \"number\"\n ? `${props.fontSize}px`\n : props.fontSize || \"inherit\"};\n font-family: inherit;\n text-align: inherit;\n\n &::placeholder {\n color: ${(props) =>\n props.placeholderTextColor || \"rgba(255, 255, 255, 0.5)\"};\n }\n\n &:disabled {\n cursor: not-allowed;\n }\n`;\n\nexport const InputPrimitive = forwardRef<HTMLInputElement, InputPrimitiveProps>(\n (\n {\n value,\n placeholder,\n onChange,\n onChangeText,\n onFocus,\n onBlur,\n onKeyDown,\n disabled,\n secureTextEntry,\n style,\n color,\n fontSize,\n placeholderTextColor,\n maxLength,\n name,\n type,\n inputMode,\n autoComplete,\n id,\n \"aria-invalid\": ariaInvalid,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-label\": ariaLabel,\n \"aria-disabled\": ariaDisabled,\n \"data-testid\": dataTestId,\n ...rest\n },\n ref\n ) => {\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (onChange) {\n onChange(e);\n }\n if (onChangeText) {\n onChangeText(e.target.value);\n }\n };\n\n // Always pass value to make it a controlled input\n const inputValue = value !== undefined ? value : \"\";\n\n return (\n <StyledInput\n ref={ref}\n id={id}\n value={inputValue}\n name={name}\n placeholder={placeholder}\n onChange={handleChange}\n onFocus={onFocus}\n onBlur={onBlur}\n onKeyDown={onKeyDown}\n disabled={disabled}\n type={secureTextEntry ? \"password\" : type || \"text\"}\n inputMode={inputMode}\n autoComplete={autoComplete}\n style={style}\n color={color}\n fontSize={fontSize}\n placeholderTextColor={placeholderTextColor}\n maxLength={maxLength}\n aria-invalid={ariaInvalid}\n aria-describedby={ariaDescribedBy}\n aria-labelledby={ariaLabelledBy}\n aria-label={ariaLabel}\n aria-disabled={ariaDisabled}\n data-testid={dataTestId}\n {...rest}\n />\n );\n }\n);\n\nInputPrimitive.displayName = \"InputPrimitive\";\n","import { forwardRef } from \"react\";\nimport styled from \"styled-components\";\nimport { TextAreaPrimitiveProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledTextArea = styled.textarea<TextAreaPrimitiveProps>`\n background: transparent;\n border: none;\n outline: none;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n color: ${(props) => props.color || \"inherit\"};\n font-size: ${(props) =>\n typeof props.fontSize === \"number\"\n ? `${props.fontSize}px`\n : props.fontSize || \"inherit\"};\n font-family: inherit;\n text-align: inherit;\n resize: none;\n\n &::placeholder {\n color: ${(props) =>\n props.placeholderTextColor || \"rgba(255, 255, 255, 0.5)\"};\n }\n\n &:disabled {\n cursor: not-allowed;\n }\n`;\n\nexport const TextAreaPrimitive = forwardRef<\n HTMLTextAreaElement,\n TextAreaPrimitiveProps\n>(\n (\n {\n value,\n placeholder,\n onChangeText,\n onFocus,\n onBlur,\n onKeyDown,\n disabled,\n style,\n color,\n fontSize,\n placeholderTextColor,\n maxLength,\n rows,\n },\n ref\n ) => {\n return (\n <StyledTextArea\n ref={ref}\n value={value}\n placeholder={placeholder}\n onChange={(e) => onChangeText?.(e.target.value)}\n onFocus={onFocus}\n onBlur={onBlur}\n onKeyDown={onKeyDown}\n disabled={disabled}\n style={style}\n color={color}\n fontSize={fontSize}\n placeholderTextColor={placeholderTextColor}\n maxLength={maxLength}\n rows={rows}\n />\n );\n }\n);\n\nTextAreaPrimitive.displayName = \"TextAreaPrimitive\";\n","import React from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text, Icon } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem } from \"@xsolla/xui-core\";\nimport { Badge } from \"@xsolla/xui-badge\";\nimport { User } from \"@xsolla/xui-icons-base\";\n\nexport interface AvatarProps {\n /** Image source URL */\n src?: string;\n /** Icon component to display when no image is provided */\n icon?: React.ReactNode;\n /** Text/Initials to display when no image or icon is provided */\n text?: string;\n /** Size of the avatar */\n size?: \"xl\" | \"lg\" | \"md\" | \"sm\" | \"xs\";\n /** If true, the avatar will be square with small border radius. If false, it will be a circle. */\n square?: boolean;\n /** Whether to show an alert badge */\n badge?: boolean;\n /** Number or text to display in the badge notification */\n badgeCount?: React.ReactNode;\n /** If true, the avatar will have a border to separate it from other avatars in a group */\n stroke?: boolean;\n /** Background color for the avatar. Defaults to theme background secondary. */\n backgroundColor?: string;\n /** Disable hover effect. Used internally by AvatarGroup. */\n disableHover?: boolean;\n /** Accessible label for the avatar. Recommended for screen readers. */\n \"aria-label\"?: string;\n /** Alternative text for the avatar image */\n alt?: string;\n /** Click handler for the avatar */\n onClick?: () => void;\n /** Color tone for the badge */\n badgeTone?:\n | \"primary\"\n | \"secondary\"\n | \"brand\"\n | \"brandExtra\"\n | \"success\"\n | \"warning\"\n | \"alert\"\n | \"neutral\";\n}\n\nexport const Avatar: React.FC<AvatarProps> = ({\n src,\n icon,\n text,\n size = \"md\",\n square = false,\n badge = false,\n badgeCount,\n badgeTone = \"alert\",\n stroke = false,\n backgroundColor,\n disableHover = false,\n \"aria-label\": ariaLabel,\n alt,\n onClick,\n}) => {\n const { theme } = useDesignSystem();\n\n const sizeStyles = theme.sizing.avatar(size);\n\n // Border radius based on square or circle variant\n const borderRadius = square\n ? sizeStyles.borderRadiusSquare\n : sizeStyles.borderRadiusCircle;\n\n // Badge size: XL (20px) when showing count, S (8px) for dot-only\n const badgeSize = badgeCount ? \"xl\" : \"sm\";\n\n // Badge offset differs for circle vs square, and for dot vs count\n // Dot badge (8px) needs different offset per avatar size\n const getDotOffset = () => {\n if (square) {\n return { right: -3, top: -3 };\n }\n // Circle - position dot on the edge based on avatar size\n const circleOffsets = {\n xl: { right: 4, top: 4 },\n lg: { right: 3, top: 3 },\n md: { right: 2, top: 2 },\n sm: { right: 1, top: 1 },\n xs: { right: 0, top: 0 },\n };\n return circleOffsets[size];\n };\n\n const badgeOffset = badgeCount\n ? square\n ? sizeStyles.badgeOffsetSquare\n : sizeStyles.badgeOffsetCircle\n : getDotOffset();\n\n // Display badge count\n const displayBadgeCount = badgeCount;\n\n return (\n <Box\n width={sizeStyles.size}\n height={sizeStyles.size}\n position=\"relative\"\n {...(!src && { role: \"img\", \"aria-label\": ariaLabel })}\n {...(onClick && {\n onPress: onClick,\n onKeyDown: (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n onClick();\n }\n },\n cursor: \"pointer\",\n role: \"button\",\n tabIndex: 0,\n })}\n >\n <Box\n width={sizeStyles.size}\n height={sizeStyles.size}\n borderRadius={borderRadius}\n backgroundColor={backgroundColor || theme.colors.background.secondary}\n {...(!disableHover &&\n !src && {\n hoverStyle: {\n backgroundColor: theme.colors.overlay.mono,\n },\n })}\n alignItems=\"center\"\n justifyContent=\"center\"\n position=\"relative\"\n overflow=\"hidden\"\n borderWidth={stroke ? 1 : 0}\n borderColor={theme.colors.background.primary}\n >\n {src ? (\n <Box\n as=\"img\"\n src={src}\n alt={alt || ariaLabel || \"\"}\n position=\"absolute\"\n top={0}\n left={0}\n width={sizeStyles.size}\n height={sizeStyles.size}\n borderRadius={borderRadius}\n />\n ) : icon ? (\n <Icon size={sizeStyles.iconSize} color={theme.colors.content.primary}>\n {icon}\n </Icon>\n ) : text ? (\n <Text\n fontSize={sizeStyles.fontSize}\n color={theme.colors.content.primary}\n fontWeight=\"600\"\n >\n {text}\n </Text>\n ) : (\n <User\n size={sizeStyles.iconSize}\n color={theme.colors.content.primary}\n />\n )}\n </Box>\n\n {badge && (\n <Box\n position=\"absolute\"\n right={badgeOffset.right}\n top={badgeOffset.top}\n >\n <Badge\n size={badgeSize}\n tone={badgeTone}\n showStroke\n aria-label={\n displayBadgeCount\n ? `${displayBadgeCount} notifications`\n : \"Notification\"\n }\n >\n {displayBadgeCount}\n </Badge>\n </Box>\n )}\n </Box>\n );\n};\n","import React 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 { Tooltip } from \"@xsolla/xui-tooltip\";\nimport { Avatar } from \"./Avatar\";\n\n/** Theme type from the design system */\ntype Theme = ReturnType<typeof useDesignSystem>[\"theme\"];\n\n/** Item in the avatar group list */\nexport interface AvatarGroupItem {\n /** Image source URL */\n src?: string;\n /** Initials to display when no image is provided */\n initials?: string;\n /** Click handler for the avatar */\n onClick?: () => void;\n /** Tooltip text to display on hover */\n tooltip?: string;\n}\n\n/** Avatar background mode - preset colors, 'mixed' for cycling, or a theme function */\nexport type AvatarBackgroundMode =\n | \"mixed\"\n | \"brand\"\n | \"brandExtra\"\n | \"success\"\n | \"warning\"\n | \"alert\"\n | \"neutral\"\n | ((theme: Theme) => string);\n\nexport interface AvatarGroupProps {\n /**\n * List of avatars to display in the group.\n * `tooltip` property is text to be displayed in the tooltip when hovering over the avatar.\n */\n list: AvatarGroupItem[];\n /** Size of the avatars in the group */\n size?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n /**\n * The maximum number of avatars to display before collapsing the rest into a \"+N\" counter.\n * If the number of avatars exceeds this value, the extra avatars will be hidden.\n */\n maxVisible?: number;\n /** Whether to show a stroke/border around each avatar */\n stroke?: boolean;\n /**\n * Controls the background color mode for avatars in the group.\n * - 'mixed' (default): Avatars cycle through different colors\n * - 'brand', 'brandExtra', 'success', 'warning', 'alert', 'neutral': Single color for all avatars\n * - Theme function: A function that receives theme and returns any color from the design system.\n * Example: (theme) => theme.colors.core.link.link\n */\n avatarBackgroundMode?: AvatarBackgroundMode;\n /** Accessible label for the avatar group. Defaults to \"Group of X users\". */\n \"aria-label\"?: string;\n}\n\n// Map external size values to internal Avatar size values\nconst sizeMap: Record<\n \"sm\" | \"md\" | \"lg\" | \"xl\",\n \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"\n> = {\n sm: \"sm\",\n md: \"md\",\n lg: \"lg\",\n xl: \"xl\",\n};\n\nexport const AvatarGroup: React.FC<AvatarGroupProps> = ({\n list,\n size = \"md\",\n maxVisible = 6,\n stroke = true,\n avatarBackgroundMode = \"mixed\",\n \"aria-label\": ariaLabel,\n}) => {\n const { theme } = useDesignSystem();\n\n // Map external size to internal Avatar size\n const internalSize = sizeMap[size];\n\n const totalCount = list.length;\n\n // Determine which avatars to show\n // Ensure maxVisible is non-negative and doesn't exceed totalCount\n const visibleCount = Math.min(totalCount, Math.max(0, maxVisible));\n const visibleListItems = list.slice(0, visibleCount);\n const remainingCount = totalCount - visibleCount;\n\n // Overlap amount: 4px in Figma\n const overlap = -4;\n\n // Background colors for text/icon avatars (cycling through theme colors)\n const mixedBackgrounds = [\n theme.colors.background.alert.secondary,\n theme.colors.background.warning.secondary,\n theme.colors.background.brandExtra.secondary,\n theme.colors.background.neutral.secondary,\n theme.colors.background.brand.secondary,\n theme.colors.background.success.secondary,\n theme.colors.background.success.primary,\n ];\n\n // Preset color mapping\n const presetColors: Record<string, string> = {\n brand: theme.colors.background.brand.secondary,\n brandExtra: theme.colors.background.brandExtra.secondary,\n success: theme.colors.background.success.secondary,\n warning: theme.colors.background.warning.secondary,\n alert: theme.colors.background.alert.secondary,\n neutral: theme.colors.background.neutral.secondary,\n };\n\n // Get background color based on avatarBackgroundMode\n const getBackgroundColor = (index: number): string => {\n if (typeof avatarBackgroundMode === \"function\") {\n return avatarBackgroundMode(theme);\n }\n if (avatarBackgroundMode === \"mixed\") {\n return mixedBackgrounds[index % mixedBackgrounds.length];\n }\n // Preset color mode\n return (\n presetColors[avatarBackgroundMode] || theme.colors.background.secondary\n );\n };\n\n // Default accessible label for the group\n const defaultAriaLabel =\n totalCount === 1\n ? \"1 user\"\n : totalCount === visibleCount\n ? `${totalCount} users`\n : `${visibleCount} of ${totalCount} users`;\n\n // Render an avatar with optional tooltip wrapper\n const renderAvatarWithTooltip = (\n avatar: React.ReactNode,\n tooltip: string | undefined,\n key: number\n ) => {\n if (tooltip) {\n return (\n <Tooltip key={key} content={tooltip} placement=\"top\">\n {avatar}\n </Tooltip>\n );\n }\n return avatar;\n };\n\n return (\n <Box\n flexDirection=\"row\"\n alignItems=\"center\"\n role=\"group\"\n aria-label={ariaLabel || defaultAriaLabel}\n >\n {visibleListItems.map((item, index) => {\n const shouldApplyBackground = !item.src;\n const backgroundColor = shouldApplyBackground\n ? getBackgroundColor(index)\n : undefined;\n\n // Only enable hover for image avatars with onClick\n const shouldEnableHover = !!item.src && !!item.onClick;\n\n const avatar = (\n <Box\n key={index}\n marginLeft={index === 0 ? 0 : overlap}\n zIndex={totalCount - index}\n >\n <Avatar\n src={item.src}\n text={item.initials}\n size={internalSize}\n stroke={stroke}\n backgroundColor={backgroundColor}\n disableHover={!shouldEnableHover}\n onClick={item.onClick}\n {...(item.tooltip ? { \"aria-label\": item.tooltip } : {})}\n />\n </Box>\n );\n\n return renderAvatarWithTooltip(avatar, item.tooltip, index);\n })}\n\n {remainingCount > 0 && (\n <Box marginLeft={overlap} zIndex={0}>\n <Avatar\n size={internalSize}\n text={`+${remainingCount}`}\n stroke={stroke}\n backgroundColor={theme.colors.background.secondary}\n disableHover={true}\n aria-label={`${remainingCount} more ${remainingCount === 1 ? \"user\" : \"users\"}`}\n />\n </Box>\n )}\n </Box>\n );\n};\n"],"mappings":"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","names":["styled","React","import_styled_components","import_jsx_runtime","styled","import_styled_components","import_jsx_runtime","styled","import_styled_components","import_jsx_runtime","styled","import_styled_components","import_jsx_runtime","styled","import_react","import_styled_components","import_jsx_runtime","styled","import_react","import_styled_components","import_jsx_runtime","styled","import_jsx_runtime","import_xui_core","import_jsx_runtime"]}
|
package/web/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../primitives-web/src/Box.tsx","../../../primitives-web/src/Text.tsx","../../../primitives-web/src/Spinner.tsx","../../../primitives-web/src/Icon.tsx","../../../primitives-web/src/Divider.tsx","../../../primitives-web/src/Input.tsx","../../../primitives-web/src/TextArea.tsx","../../src/Avatar.tsx","../../src/AvatarGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\nimport type { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledBox = styled.div<BoxProps>`\n display: flex;\n box-sizing: border-box;\n background-color: ${(props) => props.backgroundColor || \"transparent\"};\n border-color: ${(props) => props.borderColor || \"transparent\"};\n border-width: ${(props) =>\n typeof props.borderWidth === \"number\"\n ? `${props.borderWidth}px`\n : props.borderWidth || 0};\n\n ${(props) =>\n props.borderBottomWidth !== undefined &&\n `\n border-bottom-width: ${typeof props.borderBottomWidth === \"number\" ? `${props.borderBottomWidth}px` : props.borderBottomWidth};\n border-bottom-color: ${props.borderBottomColor || props.borderColor || \"transparent\"};\n border-bottom-style: solid;\n `}\n ${(props) =>\n props.borderTopWidth !== undefined &&\n `\n border-top-width: ${typeof props.borderTopWidth === \"number\" ? `${props.borderTopWidth}px` : props.borderTopWidth};\n border-top-color: ${props.borderTopColor || props.borderColor || \"transparent\"};\n border-top-style: solid;\n `}\n ${(props) =>\n props.borderLeftWidth !== undefined &&\n `\n border-left-width: ${typeof props.borderLeftWidth === \"number\" ? `${props.borderLeftWidth}px` : props.borderLeftWidth};\n border-left-color: ${props.borderLeftColor || props.borderColor || \"transparent\"};\n border-left-style: solid;\n `}\n ${(props) =>\n props.borderRightWidth !== undefined &&\n `\n border-right-width: ${typeof props.borderRightWidth === \"number\" ? `${props.borderRightWidth}px` : props.borderRightWidth};\n border-right-color: ${props.borderRightColor || props.borderColor || \"transparent\"};\n border-right-style: solid;\n `}\n\n border-style: ${(props) =>\n props.borderStyle ||\n (props.borderWidth ||\n props.borderBottomWidth ||\n props.borderTopWidth ||\n props.borderLeftWidth ||\n props.borderRightWidth\n ? \"solid\"\n : \"none\")};\n border-radius: ${(props) =>\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius || 0};\n height: ${(props) =>\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height || \"auto\"};\n width: ${(props) =>\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width || \"auto\"};\n min-width: ${(props) =>\n typeof props.minWidth === \"number\"\n ? `${props.minWidth}px`\n : props.minWidth || \"auto\"};\n min-height: ${(props) =>\n typeof props.minHeight === \"number\"\n ? `${props.minHeight}px`\n : props.minHeight || \"auto\"};\n\n padding: ${(props) =>\n typeof props.padding === \"number\"\n ? `${props.padding}px`\n : props.padding || 0};\n ${(props) =>\n props.paddingHorizontal &&\n `\n padding-left: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n padding-right: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n `}\n ${(props) =>\n props.paddingVertical &&\n `\n padding-top: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n padding-bottom: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n `}\n ${(props) =>\n props.paddingTop !== undefined &&\n `padding-top: ${typeof props.paddingTop === \"number\" ? `${props.paddingTop}px` : props.paddingTop};`}\n ${(props) =>\n props.paddingBottom !== undefined &&\n `padding-bottom: ${typeof props.paddingBottom === \"number\" ? `${props.paddingBottom}px` : props.paddingBottom};`}\n ${(props) =>\n props.paddingLeft !== undefined &&\n `padding-left: ${typeof props.paddingLeft === \"number\" ? `${props.paddingLeft}px` : props.paddingLeft};`}\n ${(props) =>\n props.paddingRight !== undefined &&\n `padding-right: ${typeof props.paddingRight === \"number\" ? `${props.paddingRight}px` : props.paddingRight};`}\n\n margin: ${(props) =>\n typeof props.margin === \"number\" ? `${props.margin}px` : props.margin || 0};\n ${(props) =>\n props.marginTop !== undefined &&\n `margin-top: ${typeof props.marginTop === \"number\" ? `${props.marginTop}px` : props.marginTop};`}\n ${(props) =>\n props.marginBottom !== undefined &&\n `margin-bottom: ${typeof props.marginBottom === \"number\" ? `${props.marginBottom}px` : props.marginBottom};`}\n ${(props) =>\n props.marginLeft !== undefined &&\n `margin-left: ${typeof props.marginLeft === \"number\" ? `${props.marginLeft}px` : props.marginLeft};`}\n ${(props) =>\n props.marginRight !== undefined &&\n `margin-right: ${typeof props.marginRight === \"number\" ? `${props.marginRight}px` : props.marginRight};`}\n\n flex-direction: ${(props) => props.flexDirection || \"column\"};\n flex-wrap: ${(props) => props.flexWrap || \"nowrap\"};\n align-items: ${(props) => props.alignItems || \"stretch\"};\n justify-content: ${(props) => props.justifyContent || \"flex-start\"};\n cursor: ${(props) =>\n props.cursor\n ? props.cursor\n : props.onClick || props.onPress\n ? \"pointer\"\n : \"inherit\"};\n position: ${(props) => props.position || \"static\"};\n top: ${(props) =>\n typeof props.top === \"number\" ? `${props.top}px` : props.top};\n bottom: ${(props) =>\n typeof props.bottom === \"number\" ? `${props.bottom}px` : props.bottom};\n left: ${(props) =>\n typeof props.left === \"number\" ? `${props.left}px` : props.left};\n right: ${(props) =>\n typeof props.right === \"number\" ? `${props.right}px` : props.right};\n flex: ${(props) => props.flex};\n flex-shrink: ${(props) => props.flexShrink ?? 1};\n gap: ${(props) =>\n typeof props.gap === \"number\" ? `${props.gap}px` : props.gap || 0};\n align-self: ${(props) => props.alignSelf || \"auto\"};\n overflow: ${(props) => props.overflow || \"visible\"};\n overflow-x: ${(props) => props.overflowX || \"visible\"};\n overflow-y: ${(props) => props.overflowY || \"visible\"};\n z-index: ${(props) => props.zIndex};\n opacity: ${(props) => (props.disabled ? 0.5 : 1)};\n pointer-events: ${(props) => (props.disabled ? \"none\" : \"auto\")};\n\n &:hover {\n ${(props) =>\n props.hoverStyle?.backgroundColor &&\n `background-color: ${props.hoverStyle.backgroundColor};`}\n ${(props) =>\n props.hoverStyle?.borderColor &&\n `border-color: ${props.hoverStyle.borderColor};`}\n }\n\n &:active {\n ${(props) =>\n props.pressStyle?.backgroundColor &&\n `background-color: ${props.pressStyle.backgroundColor};`}\n }\n`;\n\nexport const Box = React.forwardRef<\n HTMLDivElement | HTMLButtonElement,\n BoxProps\n>(\n (\n {\n children,\n onPress,\n onKeyDown,\n onKeyUp,\n role,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-current\": ariaCurrent,\n \"aria-disabled\": ariaDisabled,\n \"aria-live\": ariaLive,\n \"aria-busy\": ariaBusy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-expanded\": ariaExpanded,\n \"aria-haspopup\": ariaHasPopup,\n \"aria-pressed\": ariaPressed,\n \"aria-controls\": ariaControls,\n tabIndex,\n as,\n src,\n alt,\n type,\n disabled,\n id,\n ...props\n },\n ref\n ) => {\n // Handle as=\"img\" for rendering images with proper border-radius\n if (as === \"img\" && src) {\n return (\n <img\n src={src}\n alt={alt || \"\"}\n style={{\n display: \"block\",\n objectFit: \"cover\",\n width:\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width,\n height:\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height,\n borderRadius:\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius,\n position: props.position,\n top: typeof props.top === \"number\" ? `${props.top}px` : props.top,\n left:\n typeof props.left === \"number\" ? `${props.left}px` : props.left,\n right:\n typeof props.right === \"number\"\n ? `${props.right}px`\n : props.right,\n bottom:\n typeof props.bottom === \"number\"\n ? `${props.bottom}px`\n : props.bottom,\n }}\n />\n );\n }\n\n return (\n <StyledBox\n ref={ref}\n as={as}\n id={id}\n type={as === \"button\" ? type || \"button\" : undefined}\n disabled={as === \"button\" ? disabled : undefined}\n onClick={onPress}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n role={role}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-current={ariaCurrent}\n aria-disabled={ariaDisabled}\n aria-busy={ariaBusy}\n aria-describedby={ariaDescribedBy}\n aria-expanded={ariaExpanded}\n aria-haspopup={ariaHasPopup}\n aria-pressed={ariaPressed}\n aria-controls={ariaControls}\n aria-live={ariaLive}\n tabIndex={tabIndex !== undefined ? tabIndex : undefined}\n {...props}\n >\n {children}\n </StyledBox>\n );\n }\n);\n\nBox.displayName = \"Box\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledText = styled.span<TextProps>`\n color: ${(props) => props.color || \"inherit\"};\n font-size: ${(props) =>\n typeof props.fontSize === \"number\"\n ? `${props.fontSize}px`\n : props.fontSize || \"inherit\"};\n font-weight: ${(props) => props.fontWeight || \"normal\"};\n font-family: ${(props) =>\n props.fontFamily ||\n '\"Pilat Wide Bold\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif !important'};\n line-height: ${(props) =>\n typeof props.lineHeight === \"number\"\n ? `${props.lineHeight}px`\n : props.lineHeight || \"inherit\"};\n white-space: ${(props) => props.whiteSpace || \"normal\"};\n text-align: ${(props) => props.textAlign || \"inherit\"};\n text-decoration: ${(props) => props.textDecoration || \"none\"};\n`;\n\nexport const Text: React.FC<TextProps> = ({\n style,\n className,\n id,\n role,\n ...props\n}) => {\n return (\n <StyledText\n {...props}\n style={style}\n className={className}\n id={id}\n role={role}\n />\n );\n};\n","import React from \"react\";\nimport styled, { keyframes } from \"styled-components\";\nimport type { SpinnerProps } from \"@xsolla/xui-primitives-core\";\n\nconst rotate = keyframes`\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n`;\n\nconst StyledSpinner = styled.div<SpinnerProps>`\n width: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n height: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n border: ${(props) => props.strokeWidth || 2}px solid\n ${(props) => props.color || \"currentColor\"};\n border-bottom-color: transparent;\n border-radius: 50%;\n display: inline-block;\n box-sizing: border-box;\n animation: ${rotate} 1s linear infinite;\n`;\n\nexport const Spinner: React.FC<SpinnerProps> = ({\n role = \"status\",\n \"aria-label\": ariaLabel,\n \"aria-live\": ariaLive = \"polite\",\n \"aria-describedby\": ariaDescribedBy,\n testID,\n ...props\n}) => {\n return (\n <StyledSpinner\n role={role}\n aria-label={ariaLabel}\n aria-live={ariaLive}\n aria-describedby={ariaDescribedBy}\n data-testid={testID}\n {...props}\n />\n );\n};\n\nSpinner.displayName = \"Spinner\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { IconProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledIcon = styled.div<IconProps>`\n display: flex;\n align-items: center;\n justify-content: center;\n width: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n height: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n color: ${(props) => props.color || \"currentColor\"};\n\n svg {\n width: 100%;\n height: 100%;\n fill: none;\n stroke: currentColor;\n }\n`;\n\nexport const Icon: React.FC<IconProps> = ({ children, ...props }) => {\n return <StyledIcon {...props}>{children}</StyledIcon>;\n};\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { DividerProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledDivider = styled.div<DividerProps>`\n background-color: ${(props) =>\n props.dashStroke\n ? \"transparent\"\n : props.color || \"rgba(255, 255, 255, 0.15)\"};\n width: ${(props) =>\n props.vertical\n ? typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width || \"1px\"\n : \"100%\"};\n height: ${(props) =>\n props.vertical\n ? \"100%\"\n : typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height || \"1px\"};\n\n ${(props) =>\n props.dashStroke &&\n `\n border-style: dashed;\n border-color: ${props.color || \"rgba(255, 255, 255, 0.15)\"};\n border-width: 0;\n ${\n props.vertical\n ? `\n border-left-width: ${typeof props.width === \"number\" ? `${props.width}px` : props.width || \"1px\"};\n height: 100%;\n `\n : `\n border-top-width: ${typeof props.height === \"number\" ? `${props.height}px` : props.height || \"1px\"};\n width: 100%;\n `\n }\n `}\n`;\n\nexport const Divider: React.FC<DividerProps> = (props) => {\n return <StyledDivider {...props} />;\n};\n","import React, { forwardRef } from \"react\";\nimport styled from \"styled-components\";\nimport { InputPrimitiveProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledInput = styled.input<InputPrimitiveProps>`\n background: transparent;\n border: none;\n outline: none;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n color: ${(props) => props.color || \"inherit\"};\n font-size: ${(props) =>\n typeof props.fontSize === \"number\"\n ? `${props.fontSize}px`\n : props.fontSize || \"inherit\"};\n font-family: inherit;\n text-align: inherit;\n\n &::placeholder {\n color: ${(props) =>\n props.placeholderTextColor || \"rgba(255, 255, 255, 0.5)\"};\n }\n\n &:disabled {\n cursor: not-allowed;\n }\n`;\n\nexport const InputPrimitive = forwardRef<HTMLInputElement, InputPrimitiveProps>(\n (\n {\n value,\n placeholder,\n onChange,\n onChangeText,\n onFocus,\n onBlur,\n onKeyDown,\n disabled,\n secureTextEntry,\n style,\n color,\n fontSize,\n placeholderTextColor,\n maxLength,\n name,\n type,\n inputMode,\n autoComplete,\n id,\n \"aria-invalid\": ariaInvalid,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-label\": ariaLabel,\n \"aria-disabled\": ariaDisabled,\n \"data-testid\": dataTestId,\n ...rest\n },\n ref\n ) => {\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (onChange) {\n onChange(e);\n }\n if (onChangeText) {\n onChangeText(e.target.value);\n }\n };\n\n // Always pass value to make it a controlled input\n const inputValue = value !== undefined ? value : \"\";\n\n return (\n <StyledInput\n ref={ref}\n id={id}\n value={inputValue}\n name={name}\n placeholder={placeholder}\n onChange={handleChange}\n onFocus={onFocus}\n onBlur={onBlur}\n onKeyDown={onKeyDown}\n disabled={disabled}\n type={secureTextEntry ? \"password\" : type || \"text\"}\n inputMode={inputMode}\n autoComplete={autoComplete}\n style={style}\n color={color}\n fontSize={fontSize}\n placeholderTextColor={placeholderTextColor}\n maxLength={maxLength}\n aria-invalid={ariaInvalid}\n aria-describedby={ariaDescribedBy}\n aria-labelledby={ariaLabelledBy}\n aria-label={ariaLabel}\n aria-disabled={ariaDisabled}\n data-testid={dataTestId}\n {...rest}\n />\n );\n }\n);\n\nInputPrimitive.displayName = \"InputPrimitive\";\n","import React, { forwardRef } from \"react\";\nimport styled from \"styled-components\";\nimport { TextAreaPrimitiveProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledTextArea = styled.textarea<TextAreaPrimitiveProps>`\n background: transparent;\n border: none;\n outline: none;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n color: ${(props) => props.color || \"inherit\"};\n font-size: ${(props) =>\n typeof props.fontSize === \"number\"\n ? `${props.fontSize}px`\n : props.fontSize || \"inherit\"};\n font-family: inherit;\n text-align: inherit;\n resize: none;\n\n &::placeholder {\n color: ${(props) =>\n props.placeholderTextColor || \"rgba(255, 255, 255, 0.5)\"};\n }\n\n &:disabled {\n cursor: not-allowed;\n }\n`;\n\nexport const TextAreaPrimitive = forwardRef<\n HTMLTextAreaElement,\n TextAreaPrimitiveProps\n>(\n (\n {\n value,\n placeholder,\n onChangeText,\n onFocus,\n onBlur,\n onKeyDown,\n disabled,\n style,\n color,\n fontSize,\n placeholderTextColor,\n maxLength,\n rows,\n },\n ref\n ) => {\n return (\n <StyledTextArea\n ref={ref}\n value={value}\n placeholder={placeholder}\n onChange={(e) => onChangeText?.(e.target.value)}\n onFocus={onFocus}\n onBlur={onBlur}\n onKeyDown={onKeyDown}\n disabled={disabled}\n style={style}\n color={color}\n fontSize={fontSize}\n placeholderTextColor={placeholderTextColor}\n maxLength={maxLength}\n rows={rows}\n />\n );\n }\n);\n\nTextAreaPrimitive.displayName = \"TextAreaPrimitive\";\n","import React from \"react\";\n// @ts-ignore - this will be resolved at build time\nimport { Box, Text, Icon } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem } from \"@xsolla/xui-core\";\nimport { Badge } from \"@xsolla/xui-badge\";\nimport { User } from \"@xsolla/xui-icons-base\";\n\nexport interface AvatarProps {\n /** Image source URL */\n src?: string;\n /** Icon component to display when no image is provided */\n icon?: React.ReactNode;\n /** Text/Initials to display when no image or icon is provided */\n text?: string;\n /** Size of the avatar */\n size?: \"xl\" | \"lg\" | \"md\" | \"sm\" | \"xs\";\n /** If true, the avatar will be square with small border radius. If false, it will be a circle. */\n square?: boolean;\n /** Whether to show an alert badge */\n badge?: boolean;\n /** Number or text to display in the badge notification */\n badgeCount?: React.ReactNode;\n /** If true, the avatar will have a border to separate it from other avatars in a group */\n stroke?: boolean;\n /** Background color for the avatar. Defaults to theme background secondary. */\n backgroundColor?: string;\n /** Disable hover effect. Used internally by AvatarGroup. */\n disableHover?: boolean;\n /** Accessible label for the avatar. Recommended for screen readers. */\n \"aria-label\"?: string;\n /** Alternative text for the avatar image */\n alt?: string;\n /** Click handler for the avatar */\n onClick?: () => void;\n /** Color tone for the badge */\n badgeTone?:\n | \"primary\"\n | \"secondary\"\n | \"brand\"\n | \"brandExtra\"\n | \"success\"\n | \"warning\"\n | \"alert\"\n | \"neutral\";\n}\n\nexport const Avatar: React.FC<AvatarProps> = ({\n src,\n icon,\n text,\n size = \"md\",\n square = false,\n badge = false,\n badgeCount,\n badgeTone = \"alert\",\n stroke = false,\n backgroundColor,\n disableHover = false,\n \"aria-label\": ariaLabel,\n alt,\n onClick,\n}) => {\n const { theme } = useDesignSystem();\n\n const sizeStyles = theme.sizing.avatar(size);\n\n // Border radius based on square or circle variant\n const borderRadius = square\n ? sizeStyles.borderRadiusSquare\n : sizeStyles.borderRadiusCircle;\n\n // Badge size: XL (20px) when showing count, S (8px) for dot-only\n const badgeSize = badgeCount ? \"xl\" : \"sm\";\n\n // Badge offset differs for circle vs square, and for dot vs count\n // Dot badge (8px) needs different offset per avatar size\n const getDotOffset = () => {\n if (square) {\n return { right: -3, top: -3 };\n }\n // Circle - position dot on the edge based on avatar size\n const circleOffsets = {\n xl: { right: 4, top: 4 },\n lg: { right: 3, top: 3 },\n md: { right: 2, top: 2 },\n sm: { right: 1, top: 1 },\n xs: { right: 0, top: 0 },\n };\n return circleOffsets[size];\n };\n\n const badgeOffset = badgeCount\n ? square\n ? sizeStyles.badgeOffsetSquare\n : sizeStyles.badgeOffsetCircle\n : getDotOffset();\n\n // Display badge count\n const displayBadgeCount = badgeCount;\n\n return (\n <Box\n width={sizeStyles.size}\n height={sizeStyles.size}\n position=\"relative\"\n {...(!src && { role: \"img\", \"aria-label\": ariaLabel })}\n {...(onClick && {\n onPress: onClick,\n onKeyDown: (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n onClick();\n }\n },\n cursor: \"pointer\",\n role: \"button\",\n tabIndex: 0,\n })}\n >\n <Box\n width={sizeStyles.size}\n height={sizeStyles.size}\n borderRadius={borderRadius}\n backgroundColor={backgroundColor || theme.colors.background.secondary}\n {...(!disableHover &&\n !src && {\n hoverStyle: {\n backgroundColor: theme.colors.overlay.mono,\n },\n })}\n alignItems=\"center\"\n justifyContent=\"center\"\n position=\"relative\"\n overflow=\"hidden\"\n borderWidth={stroke ? 1 : 0}\n borderColor={theme.colors.background.primary}\n >\n {src ? (\n <Box\n as=\"img\"\n src={src}\n alt={alt || ariaLabel || \"\"}\n position=\"absolute\"\n top={0}\n left={0}\n width={sizeStyles.size}\n height={sizeStyles.size}\n borderRadius={borderRadius}\n />\n ) : icon ? (\n <Icon size={sizeStyles.iconSize} color={theme.colors.content.primary}>\n {icon}\n </Icon>\n ) : text ? (\n <Text\n fontSize={sizeStyles.fontSize}\n color={theme.colors.content.primary}\n fontWeight=\"600\"\n >\n {text}\n </Text>\n ) : (\n <User\n size={sizeStyles.iconSize}\n color={theme.colors.content.primary}\n />\n )}\n </Box>\n\n {badge && (\n <Box\n position=\"absolute\"\n right={badgeOffset.right}\n top={badgeOffset.top}\n >\n <Badge\n size={badgeSize}\n tone={badgeTone}\n showStroke\n aria-label={\n displayBadgeCount\n ? `${displayBadgeCount} notifications`\n : \"Notification\"\n }\n >\n {displayBadgeCount}\n </Badge>\n </Box>\n )}\n </Box>\n );\n};\n","import React from \"react\";\n// @ts-ignore - this will be resolved at build time\nimport { Box } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem } from \"@xsolla/xui-core\";\nimport { Tooltip } from \"@xsolla/xui-tooltip\";\nimport { Avatar } from \"./Avatar\";\n\n/** Theme type from the design system */\ntype Theme = ReturnType<typeof useDesignSystem>[\"theme\"];\n\n/** Item in the avatar group list */\nexport interface AvatarGroupItem {\n /** Image source URL */\n src?: string;\n /** Initials to display when no image is provided */\n initials?: string;\n /** Click handler for the avatar */\n onClick?: () => void;\n /** Tooltip text to display on hover */\n tooltip?: string;\n}\n\n/** Avatar background mode - preset colors, 'mixed' for cycling, or a theme function */\nexport type AvatarBackgroundMode =\n | \"mixed\"\n | \"brand\"\n | \"brandExtra\"\n | \"success\"\n | \"warning\"\n | \"alert\"\n | \"neutral\"\n | ((theme: Theme) => string);\n\nexport interface AvatarGroupProps {\n /**\n * List of avatars to display in the group.\n * `tooltip` property is text to be displayed in the tooltip when hovering over the avatar.\n */\n list: AvatarGroupItem[];\n /** Size of the avatars in the group */\n size?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n /**\n * The maximum number of avatars to display before collapsing the rest into a \"+N\" counter.\n * If the number of avatars exceeds this value, the extra avatars will be hidden.\n */\n maxVisible?: number;\n /** Whether to show a stroke/border around each avatar */\n stroke?: boolean;\n /**\n * Controls the background color mode for avatars in the group.\n * - 'mixed' (default): Avatars cycle through different colors\n * - 'brand', 'brandExtra', 'success', 'warning', 'alert', 'neutral': Single color for all avatars\n * - Theme function: A function that receives theme and returns any color from the design system.\n * Example: (theme) => theme.colors.core.link.link\n */\n avatarBackgroundMode?: AvatarBackgroundMode;\n /** Accessible label for the avatar group. Defaults to \"Group of X users\". */\n \"aria-label\"?: string;\n}\n\n// Map external size values to internal Avatar size values\nconst sizeMap: Record<\n \"sm\" | \"md\" | \"lg\" | \"xl\",\n \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"\n> = {\n sm: \"sm\",\n md: \"md\",\n lg: \"lg\",\n xl: \"xl\",\n};\n\nexport const AvatarGroup: React.FC<AvatarGroupProps> = ({\n list,\n size = \"md\",\n maxVisible = 6,\n stroke = true,\n avatarBackgroundMode = \"mixed\",\n \"aria-label\": ariaLabel,\n}) => {\n const { theme } = useDesignSystem();\n\n // Map external size to internal Avatar size\n const internalSize = sizeMap[size];\n\n const totalCount = list.length;\n\n // Determine which avatars to show\n // Ensure maxVisible is non-negative and doesn't exceed totalCount\n const visibleCount = Math.min(totalCount, Math.max(0, maxVisible));\n const visibleListItems = list.slice(0, visibleCount);\n const remainingCount = totalCount - visibleCount;\n\n // Overlap amount: 4px in Figma\n const overlap = -4;\n\n // Background colors for text/icon avatars (cycling through theme colors)\n const mixedBackgrounds = [\n theme.colors.background.alert.secondary,\n theme.colors.background.warning.secondary,\n theme.colors.background.brandExtra.secondary,\n theme.colors.background.neutral.secondary,\n theme.colors.background.brand.secondary,\n theme.colors.background.success.secondary,\n theme.colors.background.success.primary,\n ];\n\n // Preset color mapping\n const presetColors: Record<string, string> = {\n brand: theme.colors.background.brand.secondary,\n brandExtra: theme.colors.background.brandExtra.secondary,\n success: theme.colors.background.success.secondary,\n warning: theme.colors.background.warning.secondary,\n alert: theme.colors.background.alert.secondary,\n neutral: theme.colors.background.neutral.secondary,\n };\n\n // Get background color based on avatarBackgroundMode\n const getBackgroundColor = (index: number): string => {\n if (typeof avatarBackgroundMode === \"function\") {\n return avatarBackgroundMode(theme);\n }\n if (avatarBackgroundMode === \"mixed\") {\n return mixedBackgrounds[index % mixedBackgrounds.length];\n }\n // Preset color mode\n return (\n presetColors[avatarBackgroundMode] || theme.colors.background.secondary\n );\n };\n\n // Default accessible label for the group\n const defaultAriaLabel =\n totalCount === 1\n ? \"1 user\"\n : totalCount === visibleCount\n ? `${totalCount} users`\n : `${visibleCount} of ${totalCount} users`;\n\n // Render an avatar with optional tooltip wrapper\n const renderAvatarWithTooltip = (\n avatar: React.ReactNode,\n tooltip: string | undefined,\n key: number\n ) => {\n if (tooltip) {\n return (\n <Tooltip key={key} content={tooltip} placement=\"top\">\n {avatar}\n </Tooltip>\n );\n }\n return avatar;\n };\n\n return (\n <Box\n flexDirection=\"row\"\n alignItems=\"center\"\n role=\"group\"\n aria-label={ariaLabel || defaultAriaLabel}\n >\n {visibleListItems.map((item, index) => {\n const shouldApplyBackground = !item.src;\n const backgroundColor = shouldApplyBackground\n ? getBackgroundColor(index)\n : undefined;\n\n // Only enable hover for image avatars with onClick\n const shouldEnableHover = !!item.src && !!item.onClick;\n\n const avatar = (\n <Box\n key={index}\n marginLeft={index === 0 ? 0 : overlap}\n zIndex={totalCount - index}\n >\n <Avatar\n src={item.src}\n text={item.initials}\n size={internalSize}\n stroke={stroke}\n backgroundColor={backgroundColor}\n disableHover={!shouldEnableHover}\n onClick={item.onClick}\n {...(item.tooltip ? { \"aria-label\": item.tooltip } : {})}\n />\n </Box>\n );\n\n return renderAvatarWithTooltip(avatar, item.tooltip, index);\n })}\n\n {remainingCount > 0 && (\n <Box marginLeft={overlap} zIndex={0}>\n <Avatar\n size={internalSize}\n text={`+${remainingCount}`}\n stroke={stroke}\n backgroundColor={theme.colors.background.secondary}\n disableHover={true}\n aria-label={`${remainingCount} more ${remainingCount === 1 ? \"user\" : \"users\"}`}\n />\n </Box>\n )}\n </Box>\n );\n};\n"],"mappings":";AAAA,OAAO,WAAW;AAClB,OAAO,YAAY;AAuMX;AApMR,IAAM,YAAY,OAAO;AAAA;AAAA;AAAA,sBAGH,CAAC,UAAU,MAAM,mBAAmB,aAAa;AAAA,kBACrD,CAAC,UAAU,MAAM,eAAe,aAAa;AAAA,kBAC7C,CAAC,UACf,OAAO,MAAM,gBAAgB,WACzB,GAAG,MAAM,WAAW,OACpB,MAAM,eAAe,CAAC;AAAA;AAAA,IAE1B,CAAC,UACD,MAAM,sBAAsB,UAC5B;AAAA,2BACuB,OAAO,MAAM,sBAAsB,WAAW,GAAG,MAAM,iBAAiB,OAAO,MAAM,iBAAiB;AAAA,2BACtG,MAAM,qBAAqB,MAAM,eAAe,aAAa;AAAA;AAAA,GAErF;AAAA,IACC,CAAC,UACD,MAAM,mBAAmB,UACzB;AAAA,wBACoB,OAAO,MAAM,mBAAmB,WAAW,GAAG,MAAM,cAAc,OAAO,MAAM,cAAc;AAAA,wBAC7F,MAAM,kBAAkB,MAAM,eAAe,aAAa;AAAA;AAAA,GAE/E;AAAA,IACC,CAAC,UACD,MAAM,oBAAoB,UAC1B;AAAA,yBACqB,OAAO,MAAM,oBAAoB,WAAW,GAAG,MAAM,eAAe,OAAO,MAAM,eAAe;AAAA,yBAChG,MAAM,mBAAmB,MAAM,eAAe,aAAa;AAAA;AAAA,GAEjF;AAAA,IACC,CAAC,UACD,MAAM,qBAAqB,UAC3B;AAAA,0BACsB,OAAO,MAAM,qBAAqB,WAAW,GAAG,MAAM,gBAAgB,OAAO,MAAM,gBAAgB;AAAA,0BACnG,MAAM,oBAAoB,MAAM,eAAe,aAAa;AAAA;AAAA,GAEnF;AAAA;AAAA,kBAEe,CAAC,UACf,MAAM,gBACL,MAAM,eACP,MAAM,qBACN,MAAM,kBACN,MAAM,mBACN,MAAM,mBACF,UACA,OAAO;AAAA,mBACI,CAAC,UAChB,OAAO,MAAM,iBAAiB,WAC1B,GAAG,MAAM,YAAY,OACrB,MAAM,gBAAgB,CAAC;AAAA,YACnB,CAAC,UACT,OAAO,MAAM,WAAW,WACpB,GAAG,MAAM,MAAM,OACf,MAAM,UAAU,MAAM;AAAA,WACnB,CAAC,UACR,OAAO,MAAM,UAAU,WACnB,GAAG,MAAM,KAAK,OACd,MAAM,SAAS,MAAM;AAAA,eACd,CAAC,UACZ,OAAO,MAAM,aAAa,WACtB,GAAG,MAAM,QAAQ,OACjB,MAAM,YAAY,MAAM;AAAA,gBAChB,CAAC,UACb,OAAO,MAAM,cAAc,WACvB,GAAG,MAAM,SAAS,OAClB,MAAM,aAAa,MAAM;AAAA;AAAA,aAEpB,CAAC,UACV,OAAO,MAAM,YAAY,WACrB,GAAG,MAAM,OAAO,OAChB,MAAM,WAAW,CAAC;AAAA,IACtB,CAAC,UACD,MAAM,qBACN;AAAA,oBACgB,OAAO,MAAM,sBAAsB,WAAW,GAAG,MAAM,iBAAiB,OAAO,MAAM,iBAAiB;AAAA,qBACrG,OAAO,MAAM,sBAAsB,WAAW,GAAG,MAAM,iBAAiB,OAAO,MAAM,iBAAiB;AAAA,GACxH;AAAA,IACC,CAAC,UACD,MAAM,mBACN;AAAA,mBACe,OAAO,MAAM,oBAAoB,WAAW,GAAG,MAAM,eAAe,OAAO,MAAM,eAAe;AAAA,sBAC7F,OAAO,MAAM,oBAAoB,WAAW,GAAG,MAAM,eAAe,OAAO,MAAM,eAAe;AAAA,GACnH;AAAA,IACC,CAAC,UACD,MAAM,eAAe,UACrB,gBAAgB,OAAO,MAAM,eAAe,WAAW,GAAG,MAAM,UAAU,OAAO,MAAM,UAAU,GAAG;AAAA,IACpG,CAAC,UACD,MAAM,kBAAkB,UACxB,mBAAmB,OAAO,MAAM,kBAAkB,WAAW,GAAG,MAAM,aAAa,OAAO,MAAM,aAAa,GAAG;AAAA,IAChH,CAAC,UACD,MAAM,gBAAgB,UACtB,iBAAiB,OAAO,MAAM,gBAAgB,WAAW,GAAG,MAAM,WAAW,OAAO,MAAM,WAAW,GAAG;AAAA,IACxG,CAAC,UACD,MAAM,iBAAiB,UACvB,kBAAkB,OAAO,MAAM,iBAAiB,WAAW,GAAG,MAAM,YAAY,OAAO,MAAM,YAAY,GAAG;AAAA;AAAA,YAEpG,CAAC,UACT,OAAO,MAAM,WAAW,WAAW,GAAG,MAAM,MAAM,OAAO,MAAM,UAAU,CAAC;AAAA,IAC1E,CAAC,UACD,MAAM,cAAc,UACpB,eAAe,OAAO,MAAM,cAAc,WAAW,GAAG,MAAM,SAAS,OAAO,MAAM,SAAS,GAAG;AAAA,IAChG,CAAC,UACD,MAAM,iBAAiB,UACvB,kBAAkB,OAAO,MAAM,iBAAiB,WAAW,GAAG,MAAM,YAAY,OAAO,MAAM,YAAY,GAAG;AAAA,IAC5G,CAAC,UACD,MAAM,eAAe,UACrB,gBAAgB,OAAO,MAAM,eAAe,WAAW,GAAG,MAAM,UAAU,OAAO,MAAM,UAAU,GAAG;AAAA,IACpG,CAAC,UACD,MAAM,gBAAgB,UACtB,iBAAiB,OAAO,MAAM,gBAAgB,WAAW,GAAG,MAAM,WAAW,OAAO,MAAM,WAAW,GAAG;AAAA;AAAA,oBAExF,CAAC,UAAU,MAAM,iBAAiB,QAAQ;AAAA,eAC/C,CAAC,UAAU,MAAM,YAAY,QAAQ;AAAA,iBACnC,CAAC,UAAU,MAAM,cAAc,SAAS;AAAA,qBACpC,CAAC,UAAU,MAAM,kBAAkB,YAAY;AAAA,YACxD,CAAC,UACT,MAAM,SACF,MAAM,SACN,MAAM,WAAW,MAAM,UACrB,YACA,SAAS;AAAA,cACL,CAAC,UAAU,MAAM,YAAY,QAAQ;AAAA,SAC1C,CAAC,UACN,OAAO,MAAM,QAAQ,WAAW,GAAG,MAAM,GAAG,OAAO,MAAM,GAAG;AAAA,YACpD,CAAC,UACT,OAAO,MAAM,WAAW,WAAW,GAAG,MAAM,MAAM,OAAO,MAAM,MAAM;AAAA,UAC/D,CAAC,UACP,OAAO,MAAM,SAAS,WAAW,GAAG,MAAM,IAAI,OAAO,MAAM,IAAI;AAAA,WACxD,CAAC,UACR,OAAO,MAAM,UAAU,WAAW,GAAG,MAAM,KAAK,OAAO,MAAM,KAAK;AAAA,UAC5D,CAAC,UAAU,MAAM,IAAI;AAAA,iBACd,CAAC,UAAU,MAAM,cAAc,CAAC;AAAA,SACxC,CAAC,UACN,OAAO,MAAM,QAAQ,WAAW,GAAG,MAAM,GAAG,OAAO,MAAM,OAAO,CAAC;AAAA,gBACrD,CAAC,UAAU,MAAM,aAAa,MAAM;AAAA,cACtC,CAAC,UAAU,MAAM,YAAY,SAAS;AAAA,gBACpC,CAAC,UAAU,MAAM,aAAa,SAAS;AAAA,gBACvC,CAAC,UAAU,MAAM,aAAa,SAAS;AAAA,aAC1C,CAAC,UAAU,MAAM,MAAM;AAAA,aACvB,CAAC,UAAW,MAAM,WAAW,MAAM,CAAE;AAAA,oBAC9B,CAAC,UAAW,MAAM,WAAW,SAAS,MAAO;AAAA;AAAA;AAAA,MAG3D,CAAC,UACD,MAAM,YAAY,mBAClB,qBAAqB,MAAM,WAAW,eAAe,GAAG;AAAA,MACxD,CAAC,UACD,MAAM,YAAY,eAClB,iBAAiB,MAAM,WAAW,WAAW,GAAG;AAAA;AAAA;AAAA;AAAA,MAIhD,CAAC,UACD,MAAM,YAAY,mBAClB,qBAAqB,MAAM,WAAW,eAAe,GAAG;AAAA;AAAA;AAIvD,IAAM,MAAM,MAAM;AAAA,EAIvB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb,aAAa;AAAA,IACb,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AAEH,QAAI,OAAO,SAAS,KAAK;AACvB,aACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,KAAK,OAAO;AAAA,UACZ,OAAO;AAAA,YACL,SAAS;AAAA,YACT,WAAW;AAAA,YACX,OACE,OAAO,MAAM,UAAU,WACnB,GAAG,MAAM,KAAK,OACd,MAAM;AAAA,YACZ,QACE,OAAO,MAAM,WAAW,WACpB,GAAG,MAAM,MAAM,OACf,MAAM;AAAA,YACZ,cACE,OAAO,MAAM,iBAAiB,WAC1B,GAAG,MAAM,YAAY,OACrB,MAAM;AAAA,YACZ,UAAU,MAAM;AAAA,YAChB,KAAK,OAAO,MAAM,QAAQ,WAAW,GAAG,MAAM,GAAG,OAAO,MAAM;AAAA,YAC9D,MACE,OAAO,MAAM,SAAS,WAAW,GAAG,MAAM,IAAI,OAAO,MAAM;AAAA,YAC7D,OACE,OAAO,MAAM,UAAU,WACnB,GAAG,MAAM,KAAK,OACd,MAAM;AAAA,YACZ,QACE,OAAO,MAAM,WAAW,WACpB,GAAG,MAAM,MAAM,OACf,MAAM;AAAA,UACd;AAAA;AAAA,MACF;AAAA,IAEJ;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM,OAAO,WAAW,QAAQ,WAAW;AAAA,QAC3C,UAAU,OAAO,WAAW,WAAW;AAAA,QACvC,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAY;AAAA,QACZ,mBAAiB;AAAA,QACjB,gBAAc;AAAA,QACd,iBAAe;AAAA,QACf,aAAW;AAAA,QACX,oBAAkB;AAAA,QAClB,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,gBAAc;AAAA,QACd,iBAAe;AAAA,QACf,aAAW;AAAA,QACX,UAAU,aAAa,SAAY,WAAW;AAAA,QAC7C,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,IAAI,cAAc;;;ACzQlB,OAAOA,aAAY;AA8Bf,gBAAAC,YAAA;AA3BJ,IAAM,aAAaD,QAAO;AAAA,WACf,CAAC,UAAU,MAAM,SAAS,SAAS;AAAA,eAC/B,CAAC,UACZ,OAAO,MAAM,aAAa,WACtB,GAAG,MAAM,QAAQ,OACjB,MAAM,YAAY,SAAS;AAAA,iBAClB,CAAC,UAAU,MAAM,cAAc,QAAQ;AAAA,iBACvC,CAAC,UACd,MAAM,cACN,mHAAmH;AAAA,iBACtG,CAAC,UACd,OAAO,MAAM,eAAe,WACxB,GAAG,MAAM,UAAU,OACnB,MAAM,cAAc,SAAS;AAAA,iBACpB,CAAC,UAAU,MAAM,cAAc,QAAQ;AAAA,gBACxC,CAAC,UAAU,MAAM,aAAa,SAAS;AAAA,qBAClC,CAAC,UAAU,MAAM,kBAAkB,MAAM;AAAA;AAGvD,IAAM,OAA4B,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACE,gBAAAC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;;;ACtCA,OAAOC,WAAU,iBAAiB;AAmC9B,gBAAAC,YAAA;AAhCJ,IAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASf,IAAM,gBAAgBD,QAAO;AAAA,WAClB,CAAC,UACR,OAAO,MAAM,SAAS,WAAW,GAAG,MAAM,IAAI,OAAO,MAAM,QAAQ,MAAM;AAAA,YACjE,CAAC,UACT,OAAO,MAAM,SAAS,WAAW,GAAG,MAAM,IAAI,OAAO,MAAM,QAAQ,MAAM;AAAA,YACjE,CAAC,UAAU,MAAM,eAAe,CAAC;AAAA,MACvC,CAAC,UAAU,MAAM,SAAS,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA,eAK/B,MAAM;AAAA;AAGd,IAAM,UAAkC,CAAC;AAAA,EAC9C,OAAO;AAAA,EACP,cAAc;AAAA,EACd,aAAa,WAAW;AAAA,EACxB,oBAAoB;AAAA,EACpB;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACE,gBAAAC;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,cAAY;AAAA,MACZ,aAAW;AAAA,MACX,oBAAkB;AAAA,MAClB,eAAa;AAAA,MACZ,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,QAAQ,cAAc;;;AC9CtB,OAAOC,aAAY;AAsBV,gBAAAC,YAAA;AAnBT,IAAM,aAAaD,QAAO;AAAA;AAAA;AAAA;AAAA,WAIf,CAAC,UACR,OAAO,MAAM,SAAS,WAAW,GAAG,MAAM,IAAI,OAAO,MAAM,QAAQ,MAAM;AAAA,YACjE,CAAC,UACT,OAAO,MAAM,SAAS,WAAW,GAAG,MAAM,IAAI,OAAO,MAAM,QAAQ,MAAM;AAAA,WAClE,CAAC,UAAU,MAAM,SAAS,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU5C,IAAM,OAA4B,CAAC,EAAE,UAAU,GAAG,MAAM,MAAM;AACnE,SAAO,gBAAAC,KAAC,cAAY,GAAG,OAAQ,UAAS;AAC1C;;;ACvBA,OAAOC,aAAY;AA0CV,gBAAAC,YAAA;AAvCT,IAAM,gBAAgBD,QAAO;AAAA,sBACP,CAAC,UACnB,MAAM,aACF,gBACA,MAAM,SAAS,2BAA2B;AAAA,WACvC,CAAC,UACR,MAAM,WACF,OAAO,MAAM,UAAU,WACrB,GAAG,MAAM,KAAK,OACd,MAAM,SAAS,QACjB,MAAM;AAAA,YACF,CAAC,UACT,MAAM,WACF,SACA,OAAO,MAAM,WAAW,WACtB,GAAG,MAAM,MAAM,OACf,MAAM,UAAU,KAAK;AAAA;AAAA,IAE3B,CAAC,UACD,MAAM,cACN;AAAA;AAAA,oBAEgB,MAAM,SAAS,2BAA2B;AAAA;AAAA,MAGxD,MAAM,WACF;AAAA,2BACiB,OAAO,MAAM,UAAU,WAAW,GAAG,MAAM,KAAK,OAAO,MAAM,SAAS,KAAK;AAAA;AAAA,QAG5F;AAAA,0BACgB,OAAO,MAAM,WAAW,WAAW,GAAG,MAAM,MAAM,OAAO,MAAM,UAAU,KAAK;AAAA;AAAA,KAGpG;AAAA,GACD;AAAA;;;ACvCH,SAAgB,kBAAkB;AAClC,OAAOE,aAAY;AA0Eb,gBAAAC,YAAA;AAvEN,IAAM,cAAcD,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQhB,CAAC,UAAU,MAAM,SAAS,SAAS;AAAA,eAC/B,CAAC,UACZ,OAAO,MAAM,aAAa,WACtB,GAAG,MAAM,QAAQ,OACjB,MAAM,YAAY,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,aAKtB,CAAC,UACR,MAAM,wBAAwB,0BAA0B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvD,IAAM,iBAAiB;AAAA,EAC5B,CACE;AAAA,IACE;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,gBAAgB;AAAA,IAChB,oBAAoB;AAAA,IACpB,mBAAmB;AAAA,IACnB,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,eAAe;AAAA,IACf,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,eAAe,CAAC,MAA2C;AAC/D,UAAI,UAAU;AACZ,iBAAS,CAAC;AAAA,MACZ;AACA,UAAI,cAAc;AAChB,qBAAa,EAAE,OAAO,KAAK;AAAA,MAC7B;AAAA,IACF;AAGA,UAAM,aAAa,UAAU,SAAY,QAAQ;AAEjD,WACE,gBAAAC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM,kBAAkB,aAAa,QAAQ;AAAA,QAC7C;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,gBAAc;AAAA,QACd,oBAAkB;AAAA,QAClB,mBAAiB;AAAA,QACjB,cAAY;AAAA,QACZ,iBAAe;AAAA,QACf,eAAa;AAAA,QACZ,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;;;AC1G7B,SAAgB,cAAAC,mBAAkB;AAClC,OAAOC,aAAY;AAqDb,gBAAAC,YAAA;AAlDN,IAAM,iBAAiBD,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQnB,CAAC,UAAU,MAAM,SAAS,SAAS;AAAA,eAC/B,CAAC,UACZ,OAAO,MAAM,aAAa,WACtB,GAAG,MAAM,QAAQ,OACjB,MAAM,YAAY,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMtB,CAAC,UACR,MAAM,wBAAwB,0BAA0B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvD,IAAM,oBAAoBD;AAAA,EAI/B,CACE;AAAA,IACE;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,EACF,GACA,QACG;AACH,WACE,gBAAAE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU,CAAC,MAAM,eAAe,EAAE,OAAO,KAAK;AAAA,QAC9C;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,kBAAkB,cAAc;;;ACvEhC,SAAS,uBAAuB;AAChC,SAAS,aAAa;AACtB,SAAS,YAAY;AAgGjB,SAqCM,OAAAC,MArCN;AAvDG,IAAM,SAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA,YAAY;AAAA,EACZ,SAAS;AAAA,EACT;AAAA,EACA,eAAe;AAAA,EACf,cAAc;AAAA,EACd;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAElC,QAAM,aAAa,MAAM,OAAO,OAAO,IAAI;AAG3C,QAAM,eAAe,SACjB,WAAW,qBACX,WAAW;AAGf,QAAM,YAAY,aAAa,OAAO;AAItC,QAAM,eAAe,MAAM;AACzB,QAAI,QAAQ;AACV,aAAO,EAAE,OAAO,IAAI,KAAK,GAAG;AAAA,IAC9B;AAEA,UAAM,gBAAgB;AAAA,MACpB,IAAI,EAAE,OAAO,GAAG,KAAK,EAAE;AAAA,MACvB,IAAI,EAAE,OAAO,GAAG,KAAK,EAAE;AAAA,MACvB,IAAI,EAAE,OAAO,GAAG,KAAK,EAAE;AAAA,MACvB,IAAI,EAAE,OAAO,GAAG,KAAK,EAAE;AAAA,MACvB,IAAI,EAAE,OAAO,GAAG,KAAK,EAAE;AAAA,IACzB;AACA,WAAO,cAAc,IAAI;AAAA,EAC3B;AAEA,QAAM,cAAc,aAChB,SACE,WAAW,oBACX,WAAW,oBACb,aAAa;AAGjB,QAAM,oBAAoB;AAE1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,WAAW;AAAA,MAClB,QAAQ,WAAW;AAAA,MACnB,UAAS;AAAA,MACR,GAAI,CAAC,OAAO,EAAE,MAAM,OAAO,cAAc,UAAU;AAAA,MACnD,GAAI,WAAW;AAAA,QACd,SAAS;AAAA,QACT,WAAW,CAAC,MAA2B;AACrC,cAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,cAAE,eAAe;AACjB,oBAAQ;AAAA,UACV;AAAA,QACF;AAAA,QACA,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,UAAU;AAAA,MACZ;AAAA,MAEA;AAAA,wBAAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,WAAW;AAAA,YAClB,QAAQ,WAAW;AAAA,YACnB;AAAA,YACA,iBAAiB,mBAAmB,MAAM,OAAO,WAAW;AAAA,YAC3D,GAAI,CAAC,gBACJ,CAAC,OAAO;AAAA,cACN,YAAY;AAAA,gBACV,iBAAiB,MAAM,OAAO,QAAQ;AAAA,cACxC;AAAA,YACF;AAAA,YACF,YAAW;AAAA,YACX,gBAAe;AAAA,YACf,UAAS;AAAA,YACT,UAAS;AAAA,YACT,aAAa,SAAS,IAAI;AAAA,YAC1B,aAAa,MAAM,OAAO,WAAW;AAAA,YAEpC,gBACC,gBAAAA;AAAA,cAAC;AAAA;AAAA,gBACC,IAAG;AAAA,gBACH;AAAA,gBACA,KAAK,OAAO,aAAa;AAAA,gBACzB,UAAS;AAAA,gBACT,KAAK;AAAA,gBACL,MAAM;AAAA,gBACN,OAAO,WAAW;AAAA,gBAClB,QAAQ,WAAW;AAAA,gBACnB;AAAA;AAAA,YACF,IACE,OACF,gBAAAA,KAAC,QAAK,MAAM,WAAW,UAAU,OAAO,MAAM,OAAO,QAAQ,SAC1D,gBACH,IACE,OACF,gBAAAA;AAAA,cAAC;AAAA;AAAA,gBACC,UAAU,WAAW;AAAA,gBACrB,OAAO,MAAM,OAAO,QAAQ;AAAA,gBAC5B,YAAW;AAAA,gBAEV;AAAA;AAAA,YACH,IAEA,gBAAAA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAM,WAAW;AAAA,gBACjB,OAAO,MAAM,OAAO,QAAQ;AAAA;AAAA,YAC9B;AAAA;AAAA,QAEJ;AAAA,QAEC,SACC,gBAAAA;AAAA,UAAC;AAAA;AAAA,YACC,UAAS;AAAA,YACT,OAAO,YAAY;AAAA,YACnB,KAAK,YAAY;AAAA,YAEjB,0BAAAA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAM;AAAA,gBACN,MAAM;AAAA,gBACN,YAAU;AAAA,gBACV,cACE,oBACI,GAAG,iBAAiB,mBACpB;AAAA,gBAGL;AAAA;AAAA,YACH;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;;;AC5LA,SAAS,mBAAAC,wBAAuB;AAChC,SAAS,eAAe;AA8IhB,gBAAAC,MASJ,QAAAC,aATI;AArFR,IAAM,UAGF;AAAA,EACF,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,IAAM,cAA0C,CAAC;AAAA,EACtD;AAAA,EACA,OAAO;AAAA,EACP,aAAa;AAAA,EACb,SAAS;AAAA,EACT,uBAAuB;AAAA,EACvB,cAAc;AAChB,MAAM;AACJ,QAAM,EAAE,MAAM,IAAIC,iBAAgB;AAGlC,QAAM,eAAe,QAAQ,IAAI;AAEjC,QAAM,aAAa,KAAK;AAIxB,QAAM,eAAe,KAAK,IAAI,YAAY,KAAK,IAAI,GAAG,UAAU,CAAC;AACjE,QAAM,mBAAmB,KAAK,MAAM,GAAG,YAAY;AACnD,QAAM,iBAAiB,aAAa;AAGpC,QAAM,UAAU;AAGhB,QAAM,mBAAmB;AAAA,IACvB,MAAM,OAAO,WAAW,MAAM;AAAA,IAC9B,MAAM,OAAO,WAAW,QAAQ;AAAA,IAChC,MAAM,OAAO,WAAW,WAAW;AAAA,IACnC,MAAM,OAAO,WAAW,QAAQ;AAAA,IAChC,MAAM,OAAO,WAAW,MAAM;AAAA,IAC9B,MAAM,OAAO,WAAW,QAAQ;AAAA,IAChC,MAAM,OAAO,WAAW,QAAQ;AAAA,EAClC;AAGA,QAAM,eAAuC;AAAA,IAC3C,OAAO,MAAM,OAAO,WAAW,MAAM;AAAA,IACrC,YAAY,MAAM,OAAO,WAAW,WAAW;AAAA,IAC/C,SAAS,MAAM,OAAO,WAAW,QAAQ;AAAA,IACzC,SAAS,MAAM,OAAO,WAAW,QAAQ;AAAA,IACzC,OAAO,MAAM,OAAO,WAAW,MAAM;AAAA,IACrC,SAAS,MAAM,OAAO,WAAW,QAAQ;AAAA,EAC3C;AAGA,QAAM,qBAAqB,CAAC,UAA0B;AACpD,QAAI,OAAO,yBAAyB,YAAY;AAC9C,aAAO,qBAAqB,KAAK;AAAA,IACnC;AACA,QAAI,yBAAyB,SAAS;AACpC,aAAO,iBAAiB,QAAQ,iBAAiB,MAAM;AAAA,IACzD;AAEA,WACE,aAAa,oBAAoB,KAAK,MAAM,OAAO,WAAW;AAAA,EAElE;AAGA,QAAM,mBACJ,eAAe,IACX,WACA,eAAe,eACb,GAAG,UAAU,WACb,GAAG,YAAY,OAAO,UAAU;AAGxC,QAAM,0BAA0B,CAC9B,QACA,SACA,QACG;AACH,QAAI,SAAS;AACX,aACE,gBAAAF,KAAC,WAAkB,SAAS,SAAS,WAAU,OAC5C,oBADW,GAEd;AAAA,IAEJ;AACA,WAAO;AAAA,EACT;AAEA,SACE,gBAAAC;AAAA,IAAC;AAAA;AAAA,MACC,eAAc;AAAA,MACd,YAAW;AAAA,MACX,MAAK;AAAA,MACL,cAAY,aAAa;AAAA,MAExB;AAAA,yBAAiB,IAAI,CAAC,MAAM,UAAU;AACrC,gBAAM,wBAAwB,CAAC,KAAK;AACpC,gBAAM,kBAAkB,wBACpB,mBAAmB,KAAK,IACxB;AAGJ,gBAAM,oBAAoB,CAAC,CAAC,KAAK,OAAO,CAAC,CAAC,KAAK;AAE/C,gBAAM,SACJ,gBAAAD;AAAA,YAAC;AAAA;AAAA,cAEC,YAAY,UAAU,IAAI,IAAI;AAAA,cAC9B,QAAQ,aAAa;AAAA,cAErB,0BAAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,KAAK,KAAK;AAAA,kBACV,MAAM,KAAK;AAAA,kBACX,MAAM;AAAA,kBACN;AAAA,kBACA;AAAA,kBACA,cAAc,CAAC;AAAA,kBACf,SAAS,KAAK;AAAA,kBACb,GAAI,KAAK,UAAU,EAAE,cAAc,KAAK,QAAQ,IAAI,CAAC;AAAA;AAAA,cACxD;AAAA;AAAA,YAbK;AAAA,UAcP;AAGF,iBAAO,wBAAwB,QAAQ,KAAK,SAAS,KAAK;AAAA,QAC5D,CAAC;AAAA,QAEA,iBAAiB,KAChB,gBAAAA,KAAC,OAAI,YAAY,SAAS,QAAQ,GAChC,0BAAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,MAAM,IAAI,cAAc;AAAA,YACxB;AAAA,YACA,iBAAiB,MAAM,OAAO,WAAW;AAAA,YACzC,cAAc;AAAA,YACd,cAAY,GAAG,cAAc,SAAS,mBAAmB,IAAI,SAAS,OAAO;AAAA;AAAA,QAC/E,GACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":["styled","jsx","styled","jsx","styled","jsx","styled","jsx","styled","jsx","forwardRef","styled","jsx","jsx","useDesignSystem","jsx","jsxs","useDesignSystem"]}
|
|
1
|
+
{"version":3,"sources":["../../../primitives-web/src/Box.tsx","../../../primitives-web/src/Text.tsx","../../../primitives-web/src/Spinner.tsx","../../../primitives-web/src/Icon.tsx","../../../primitives-web/src/Divider.tsx","../../../primitives-web/src/Input.tsx","../../../primitives-web/src/TextArea.tsx","../../src/Avatar.tsx","../../src/AvatarGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\nimport type { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledBox = styled.div<BoxProps>`\n display: flex;\n box-sizing: border-box;\n background-color: ${(props) => props.backgroundColor || \"transparent\"};\n border-color: ${(props) => props.borderColor || \"transparent\"};\n border-width: ${(props) =>\n typeof props.borderWidth === \"number\"\n ? `${props.borderWidth}px`\n : props.borderWidth || 0};\n\n ${(props) =>\n props.borderBottomWidth !== undefined &&\n `\n border-bottom-width: ${typeof props.borderBottomWidth === \"number\" ? `${props.borderBottomWidth}px` : props.borderBottomWidth};\n border-bottom-color: ${props.borderBottomColor || props.borderColor || \"transparent\"};\n border-bottom-style: solid;\n `}\n ${(props) =>\n props.borderTopWidth !== undefined &&\n `\n border-top-width: ${typeof props.borderTopWidth === \"number\" ? `${props.borderTopWidth}px` : props.borderTopWidth};\n border-top-color: ${props.borderTopColor || props.borderColor || \"transparent\"};\n border-top-style: solid;\n `}\n ${(props) =>\n props.borderLeftWidth !== undefined &&\n `\n border-left-width: ${typeof props.borderLeftWidth === \"number\" ? `${props.borderLeftWidth}px` : props.borderLeftWidth};\n border-left-color: ${props.borderLeftColor || props.borderColor || \"transparent\"};\n border-left-style: solid;\n `}\n ${(props) =>\n props.borderRightWidth !== undefined &&\n `\n border-right-width: ${typeof props.borderRightWidth === \"number\" ? `${props.borderRightWidth}px` : props.borderRightWidth};\n border-right-color: ${props.borderRightColor || props.borderColor || \"transparent\"};\n border-right-style: solid;\n `}\n\n border-style: ${(props) =>\n props.borderStyle ||\n (props.borderWidth ||\n props.borderBottomWidth ||\n props.borderTopWidth ||\n props.borderLeftWidth ||\n props.borderRightWidth\n ? \"solid\"\n : \"none\")};\n border-radius: ${(props) =>\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius || 0};\n height: ${(props) =>\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height || \"auto\"};\n width: ${(props) =>\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width || \"auto\"};\n min-width: ${(props) =>\n typeof props.minWidth === \"number\"\n ? `${props.minWidth}px`\n : props.minWidth || \"auto\"};\n min-height: ${(props) =>\n typeof props.minHeight === \"number\"\n ? `${props.minHeight}px`\n : props.minHeight || \"auto\"};\n\n padding: ${(props) =>\n typeof props.padding === \"number\"\n ? `${props.padding}px`\n : props.padding || 0};\n ${(props) =>\n props.paddingHorizontal &&\n `\n padding-left: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n padding-right: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n `}\n ${(props) =>\n props.paddingVertical &&\n `\n padding-top: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n padding-bottom: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n `}\n ${(props) =>\n props.paddingTop !== undefined &&\n `padding-top: ${typeof props.paddingTop === \"number\" ? `${props.paddingTop}px` : props.paddingTop};`}\n ${(props) =>\n props.paddingBottom !== undefined &&\n `padding-bottom: ${typeof props.paddingBottom === \"number\" ? `${props.paddingBottom}px` : props.paddingBottom};`}\n ${(props) =>\n props.paddingLeft !== undefined &&\n `padding-left: ${typeof props.paddingLeft === \"number\" ? `${props.paddingLeft}px` : props.paddingLeft};`}\n ${(props) =>\n props.paddingRight !== undefined &&\n `padding-right: ${typeof props.paddingRight === \"number\" ? `${props.paddingRight}px` : props.paddingRight};`}\n\n margin: ${(props) =>\n typeof props.margin === \"number\" ? `${props.margin}px` : props.margin || 0};\n ${(props) =>\n props.marginTop !== undefined &&\n `margin-top: ${typeof props.marginTop === \"number\" ? `${props.marginTop}px` : props.marginTop};`}\n ${(props) =>\n props.marginBottom !== undefined &&\n `margin-bottom: ${typeof props.marginBottom === \"number\" ? `${props.marginBottom}px` : props.marginBottom};`}\n ${(props) =>\n props.marginLeft !== undefined &&\n `margin-left: ${typeof props.marginLeft === \"number\" ? `${props.marginLeft}px` : props.marginLeft};`}\n ${(props) =>\n props.marginRight !== undefined &&\n `margin-right: ${typeof props.marginRight === \"number\" ? `${props.marginRight}px` : props.marginRight};`}\n\n flex-direction: ${(props) => props.flexDirection || \"column\"};\n flex-wrap: ${(props) => props.flexWrap || \"nowrap\"};\n align-items: ${(props) => props.alignItems || \"stretch\"};\n justify-content: ${(props) => props.justifyContent || \"flex-start\"};\n cursor: ${(props) =>\n props.cursor\n ? props.cursor\n : props.onClick || props.onPress\n ? \"pointer\"\n : \"inherit\"};\n position: ${(props) => props.position || \"static\"};\n top: ${(props) =>\n typeof props.top === \"number\" ? `${props.top}px` : props.top};\n bottom: ${(props) =>\n typeof props.bottom === \"number\" ? `${props.bottom}px` : props.bottom};\n left: ${(props) =>\n typeof props.left === \"number\" ? `${props.left}px` : props.left};\n right: ${(props) =>\n typeof props.right === \"number\" ? `${props.right}px` : props.right};\n flex: ${(props) => props.flex};\n flex-shrink: ${(props) => props.flexShrink ?? 1};\n gap: ${(props) =>\n typeof props.gap === \"number\" ? `${props.gap}px` : props.gap || 0};\n align-self: ${(props) => props.alignSelf || \"auto\"};\n overflow: ${(props) => props.overflow || \"visible\"};\n overflow-x: ${(props) => props.overflowX || \"visible\"};\n overflow-y: ${(props) => props.overflowY || \"visible\"};\n z-index: ${(props) => props.zIndex};\n opacity: ${(props) => (props.disabled ? 0.5 : 1)};\n pointer-events: ${(props) => (props.disabled ? \"none\" : \"auto\")};\n\n &:hover {\n ${(props) =>\n props.hoverStyle?.backgroundColor &&\n `background-color: ${props.hoverStyle.backgroundColor};`}\n ${(props) =>\n props.hoverStyle?.borderColor &&\n `border-color: ${props.hoverStyle.borderColor};`}\n }\n\n &:active {\n ${(props) =>\n props.pressStyle?.backgroundColor &&\n `background-color: ${props.pressStyle.backgroundColor};`}\n }\n`;\n\nexport const Box = React.forwardRef<\n HTMLDivElement | HTMLButtonElement,\n BoxProps\n>(\n (\n {\n children,\n onPress,\n onKeyDown,\n onKeyUp,\n role,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-current\": ariaCurrent,\n \"aria-disabled\": ariaDisabled,\n \"aria-live\": ariaLive,\n \"aria-busy\": ariaBusy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-expanded\": ariaExpanded,\n \"aria-haspopup\": ariaHasPopup,\n \"aria-pressed\": ariaPressed,\n \"aria-controls\": ariaControls,\n tabIndex,\n as,\n src,\n alt,\n type,\n disabled,\n id,\n ...props\n },\n ref\n ) => {\n // Handle as=\"img\" for rendering images with proper border-radius\n if (as === \"img\" && src) {\n return (\n <img\n src={src}\n alt={alt || \"\"}\n style={{\n display: \"block\",\n objectFit: \"cover\",\n width:\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width,\n height:\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height,\n borderRadius:\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius,\n position: props.position,\n top: typeof props.top === \"number\" ? `${props.top}px` : props.top,\n left:\n typeof props.left === \"number\" ? `${props.left}px` : props.left,\n right:\n typeof props.right === \"number\"\n ? `${props.right}px`\n : props.right,\n bottom:\n typeof props.bottom === \"number\"\n ? `${props.bottom}px`\n : props.bottom,\n }}\n />\n );\n }\n\n return (\n <StyledBox\n ref={ref}\n as={as}\n id={id}\n type={as === \"button\" ? type || \"button\" : undefined}\n disabled={as === \"button\" ? disabled : undefined}\n onClick={onPress}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n role={role}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-current={ariaCurrent}\n aria-disabled={ariaDisabled}\n aria-busy={ariaBusy}\n aria-describedby={ariaDescribedBy}\n aria-expanded={ariaExpanded}\n aria-haspopup={ariaHasPopup}\n aria-pressed={ariaPressed}\n aria-controls={ariaControls}\n aria-live={ariaLive}\n tabIndex={tabIndex !== undefined ? tabIndex : undefined}\n {...props}\n >\n {children}\n </StyledBox>\n );\n }\n);\n\nBox.displayName = \"Box\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledText = styled.span<TextProps>`\n color: ${(props) => props.color || \"inherit\"};\n font-size: ${(props) =>\n typeof props.fontSize === \"number\"\n ? `${props.fontSize}px`\n : props.fontSize || \"inherit\"};\n font-weight: ${(props) => props.fontWeight || \"normal\"};\n font-family: ${(props) =>\n props.fontFamily ||\n '\"Pilat Wide Bold\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif !important'};\n line-height: ${(props) =>\n typeof props.lineHeight === \"number\"\n ? `${props.lineHeight}px`\n : props.lineHeight || \"inherit\"};\n white-space: ${(props) => props.whiteSpace || \"normal\"};\n text-align: ${(props) => props.textAlign || \"inherit\"};\n text-decoration: ${(props) => props.textDecoration || \"none\"};\n`;\n\nexport const Text: React.FC<TextProps> = ({\n style,\n className,\n id,\n role,\n ...props\n}) => {\n return (\n <StyledText\n {...props}\n style={style}\n className={className}\n id={id}\n role={role}\n />\n );\n};\n","import React from \"react\";\nimport styled, { keyframes } from \"styled-components\";\nimport type { SpinnerProps } from \"@xsolla/xui-primitives-core\";\n\nconst rotate = keyframes`\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n`;\n\nconst StyledSpinner = styled.div<SpinnerProps>`\n width: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n height: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n border: ${(props) => props.strokeWidth || 2}px solid\n ${(props) => props.color || \"currentColor\"};\n border-bottom-color: transparent;\n border-radius: 50%;\n display: inline-block;\n box-sizing: border-box;\n animation: ${rotate} 1s linear infinite;\n`;\n\nexport const Spinner: React.FC<SpinnerProps> = ({\n role = \"status\",\n \"aria-label\": ariaLabel,\n \"aria-live\": ariaLive = \"polite\",\n \"aria-describedby\": ariaDescribedBy,\n testID,\n ...props\n}) => {\n return (\n <StyledSpinner\n role={role}\n aria-label={ariaLabel}\n aria-live={ariaLive}\n aria-describedby={ariaDescribedBy}\n data-testid={testID}\n {...props}\n />\n );\n};\n\nSpinner.displayName = \"Spinner\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { IconProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledIcon = styled.div<IconProps>`\n display: flex;\n align-items: center;\n justify-content: center;\n width: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n height: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n color: ${(props) => props.color || \"currentColor\"};\n\n svg {\n width: 100%;\n height: 100%;\n fill: none;\n stroke: currentColor;\n }\n`;\n\nexport const Icon: React.FC<IconProps> = ({ children, ...props }) => {\n return <StyledIcon {...props}>{children}</StyledIcon>;\n};\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { DividerProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledDivider = styled.div<DividerProps>`\n background-color: ${(props) =>\n props.dashStroke\n ? \"transparent\"\n : props.color || \"rgba(255, 255, 255, 0.15)\"};\n width: ${(props) =>\n props.vertical\n ? typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width || \"1px\"\n : \"100%\"};\n height: ${(props) =>\n props.vertical\n ? \"100%\"\n : typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height || \"1px\"};\n\n ${(props) =>\n props.dashStroke &&\n `\n border-style: dashed;\n border-color: ${props.color || \"rgba(255, 255, 255, 0.15)\"};\n border-width: 0;\n ${\n props.vertical\n ? `\n border-left-width: ${typeof props.width === \"number\" ? `${props.width}px` : props.width || \"1px\"};\n height: 100%;\n `\n : `\n border-top-width: ${typeof props.height === \"number\" ? `${props.height}px` : props.height || \"1px\"};\n width: 100%;\n `\n }\n `}\n`;\n\nexport const Divider: React.FC<DividerProps> = (props) => {\n return <StyledDivider {...props} />;\n};\n","import React, { forwardRef } from \"react\";\nimport styled from \"styled-components\";\nimport { InputPrimitiveProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledInput = styled.input<InputPrimitiveProps>`\n background: transparent;\n border: none;\n outline: none;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n color: ${(props) => props.color || \"inherit\"};\n font-size: ${(props) =>\n typeof props.fontSize === \"number\"\n ? `${props.fontSize}px`\n : props.fontSize || \"inherit\"};\n font-family: inherit;\n text-align: inherit;\n\n &::placeholder {\n color: ${(props) =>\n props.placeholderTextColor || \"rgba(255, 255, 255, 0.5)\"};\n }\n\n &:disabled {\n cursor: not-allowed;\n }\n`;\n\nexport const InputPrimitive = forwardRef<HTMLInputElement, InputPrimitiveProps>(\n (\n {\n value,\n placeholder,\n onChange,\n onChangeText,\n onFocus,\n onBlur,\n onKeyDown,\n disabled,\n secureTextEntry,\n style,\n color,\n fontSize,\n placeholderTextColor,\n maxLength,\n name,\n type,\n inputMode,\n autoComplete,\n id,\n \"aria-invalid\": ariaInvalid,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-label\": ariaLabel,\n \"aria-disabled\": ariaDisabled,\n \"data-testid\": dataTestId,\n ...rest\n },\n ref\n ) => {\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (onChange) {\n onChange(e);\n }\n if (onChangeText) {\n onChangeText(e.target.value);\n }\n };\n\n // Always pass value to make it a controlled input\n const inputValue = value !== undefined ? value : \"\";\n\n return (\n <StyledInput\n ref={ref}\n id={id}\n value={inputValue}\n name={name}\n placeholder={placeholder}\n onChange={handleChange}\n onFocus={onFocus}\n onBlur={onBlur}\n onKeyDown={onKeyDown}\n disabled={disabled}\n type={secureTextEntry ? \"password\" : type || \"text\"}\n inputMode={inputMode}\n autoComplete={autoComplete}\n style={style}\n color={color}\n fontSize={fontSize}\n placeholderTextColor={placeholderTextColor}\n maxLength={maxLength}\n aria-invalid={ariaInvalid}\n aria-describedby={ariaDescribedBy}\n aria-labelledby={ariaLabelledBy}\n aria-label={ariaLabel}\n aria-disabled={ariaDisabled}\n data-testid={dataTestId}\n {...rest}\n />\n );\n }\n);\n\nInputPrimitive.displayName = \"InputPrimitive\";\n","import { forwardRef } from \"react\";\nimport styled from \"styled-components\";\nimport { TextAreaPrimitiveProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledTextArea = styled.textarea<TextAreaPrimitiveProps>`\n background: transparent;\n border: none;\n outline: none;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n color: ${(props) => props.color || \"inherit\"};\n font-size: ${(props) =>\n typeof props.fontSize === \"number\"\n ? `${props.fontSize}px`\n : props.fontSize || \"inherit\"};\n font-family: inherit;\n text-align: inherit;\n resize: none;\n\n &::placeholder {\n color: ${(props) =>\n props.placeholderTextColor || \"rgba(255, 255, 255, 0.5)\"};\n }\n\n &:disabled {\n cursor: not-allowed;\n }\n`;\n\nexport const TextAreaPrimitive = forwardRef<\n HTMLTextAreaElement,\n TextAreaPrimitiveProps\n>(\n (\n {\n value,\n placeholder,\n onChangeText,\n onFocus,\n onBlur,\n onKeyDown,\n disabled,\n style,\n color,\n fontSize,\n placeholderTextColor,\n maxLength,\n rows,\n },\n ref\n ) => {\n return (\n <StyledTextArea\n ref={ref}\n value={value}\n placeholder={placeholder}\n onChange={(e) => onChangeText?.(e.target.value)}\n onFocus={onFocus}\n onBlur={onBlur}\n onKeyDown={onKeyDown}\n disabled={disabled}\n style={style}\n color={color}\n fontSize={fontSize}\n placeholderTextColor={placeholderTextColor}\n maxLength={maxLength}\n rows={rows}\n />\n );\n }\n);\n\nTextAreaPrimitive.displayName = \"TextAreaPrimitive\";\n","import React from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text, Icon } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem } from \"@xsolla/xui-core\";\nimport { Badge } from \"@xsolla/xui-badge\";\nimport { User } from \"@xsolla/xui-icons-base\";\n\nexport interface AvatarProps {\n /** Image source URL */\n src?: string;\n /** Icon component to display when no image is provided */\n icon?: React.ReactNode;\n /** Text/Initials to display when no image or icon is provided */\n text?: string;\n /** Size of the avatar */\n size?: \"xl\" | \"lg\" | \"md\" | \"sm\" | \"xs\";\n /** If true, the avatar will be square with small border radius. If false, it will be a circle. */\n square?: boolean;\n /** Whether to show an alert badge */\n badge?: boolean;\n /** Number or text to display in the badge notification */\n badgeCount?: React.ReactNode;\n /** If true, the avatar will have a border to separate it from other avatars in a group */\n stroke?: boolean;\n /** Background color for the avatar. Defaults to theme background secondary. */\n backgroundColor?: string;\n /** Disable hover effect. Used internally by AvatarGroup. */\n disableHover?: boolean;\n /** Accessible label for the avatar. Recommended for screen readers. */\n \"aria-label\"?: string;\n /** Alternative text for the avatar image */\n alt?: string;\n /** Click handler for the avatar */\n onClick?: () => void;\n /** Color tone for the badge */\n badgeTone?:\n | \"primary\"\n | \"secondary\"\n | \"brand\"\n | \"brandExtra\"\n | \"success\"\n | \"warning\"\n | \"alert\"\n | \"neutral\";\n}\n\nexport const Avatar: React.FC<AvatarProps> = ({\n src,\n icon,\n text,\n size = \"md\",\n square = false,\n badge = false,\n badgeCount,\n badgeTone = \"alert\",\n stroke = false,\n backgroundColor,\n disableHover = false,\n \"aria-label\": ariaLabel,\n alt,\n onClick,\n}) => {\n const { theme } = useDesignSystem();\n\n const sizeStyles = theme.sizing.avatar(size);\n\n // Border radius based on square or circle variant\n const borderRadius = square\n ? sizeStyles.borderRadiusSquare\n : sizeStyles.borderRadiusCircle;\n\n // Badge size: XL (20px) when showing count, S (8px) for dot-only\n const badgeSize = badgeCount ? \"xl\" : \"sm\";\n\n // Badge offset differs for circle vs square, and for dot vs count\n // Dot badge (8px) needs different offset per avatar size\n const getDotOffset = () => {\n if (square) {\n return { right: -3, top: -3 };\n }\n // Circle - position dot on the edge based on avatar size\n const circleOffsets = {\n xl: { right: 4, top: 4 },\n lg: { right: 3, top: 3 },\n md: { right: 2, top: 2 },\n sm: { right: 1, top: 1 },\n xs: { right: 0, top: 0 },\n };\n return circleOffsets[size];\n };\n\n const badgeOffset = badgeCount\n ? square\n ? sizeStyles.badgeOffsetSquare\n : sizeStyles.badgeOffsetCircle\n : getDotOffset();\n\n // Display badge count\n const displayBadgeCount = badgeCount;\n\n return (\n <Box\n width={sizeStyles.size}\n height={sizeStyles.size}\n position=\"relative\"\n {...(!src && { role: \"img\", \"aria-label\": ariaLabel })}\n {...(onClick && {\n onPress: onClick,\n onKeyDown: (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n onClick();\n }\n },\n cursor: \"pointer\",\n role: \"button\",\n tabIndex: 0,\n })}\n >\n <Box\n width={sizeStyles.size}\n height={sizeStyles.size}\n borderRadius={borderRadius}\n backgroundColor={backgroundColor || theme.colors.background.secondary}\n {...(!disableHover &&\n !src && {\n hoverStyle: {\n backgroundColor: theme.colors.overlay.mono,\n },\n })}\n alignItems=\"center\"\n justifyContent=\"center\"\n position=\"relative\"\n overflow=\"hidden\"\n borderWidth={stroke ? 1 : 0}\n borderColor={theme.colors.background.primary}\n >\n {src ? (\n <Box\n as=\"img\"\n src={src}\n alt={alt || ariaLabel || \"\"}\n position=\"absolute\"\n top={0}\n left={0}\n width={sizeStyles.size}\n height={sizeStyles.size}\n borderRadius={borderRadius}\n />\n ) : icon ? (\n <Icon size={sizeStyles.iconSize} color={theme.colors.content.primary}>\n {icon}\n </Icon>\n ) : text ? (\n <Text\n fontSize={sizeStyles.fontSize}\n color={theme.colors.content.primary}\n fontWeight=\"600\"\n >\n {text}\n </Text>\n ) : (\n <User\n size={sizeStyles.iconSize}\n color={theme.colors.content.primary}\n />\n )}\n </Box>\n\n {badge && (\n <Box\n position=\"absolute\"\n right={badgeOffset.right}\n top={badgeOffset.top}\n >\n <Badge\n size={badgeSize}\n tone={badgeTone}\n showStroke\n aria-label={\n displayBadgeCount\n ? `${displayBadgeCount} notifications`\n : \"Notification\"\n }\n >\n {displayBadgeCount}\n </Badge>\n </Box>\n )}\n </Box>\n );\n};\n","import React 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 { Tooltip } from \"@xsolla/xui-tooltip\";\nimport { Avatar } from \"./Avatar\";\n\n/** Theme type from the design system */\ntype Theme = ReturnType<typeof useDesignSystem>[\"theme\"];\n\n/** Item in the avatar group list */\nexport interface AvatarGroupItem {\n /** Image source URL */\n src?: string;\n /** Initials to display when no image is provided */\n initials?: string;\n /** Click handler for the avatar */\n onClick?: () => void;\n /** Tooltip text to display on hover */\n tooltip?: string;\n}\n\n/** Avatar background mode - preset colors, 'mixed' for cycling, or a theme function */\nexport type AvatarBackgroundMode =\n | \"mixed\"\n | \"brand\"\n | \"brandExtra\"\n | \"success\"\n | \"warning\"\n | \"alert\"\n | \"neutral\"\n | ((theme: Theme) => string);\n\nexport interface AvatarGroupProps {\n /**\n * List of avatars to display in the group.\n * `tooltip` property is text to be displayed in the tooltip when hovering over the avatar.\n */\n list: AvatarGroupItem[];\n /** Size of the avatars in the group */\n size?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n /**\n * The maximum number of avatars to display before collapsing the rest into a \"+N\" counter.\n * If the number of avatars exceeds this value, the extra avatars will be hidden.\n */\n maxVisible?: number;\n /** Whether to show a stroke/border around each avatar */\n stroke?: boolean;\n /**\n * Controls the background color mode for avatars in the group.\n * - 'mixed' (default): Avatars cycle through different colors\n * - 'brand', 'brandExtra', 'success', 'warning', 'alert', 'neutral': Single color for all avatars\n * - Theme function: A function that receives theme and returns any color from the design system.\n * Example: (theme) => theme.colors.core.link.link\n */\n avatarBackgroundMode?: AvatarBackgroundMode;\n /** Accessible label for the avatar group. Defaults to \"Group of X users\". */\n \"aria-label\"?: string;\n}\n\n// Map external size values to internal Avatar size values\nconst sizeMap: Record<\n \"sm\" | \"md\" | \"lg\" | \"xl\",\n \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"\n> = {\n sm: \"sm\",\n md: \"md\",\n lg: \"lg\",\n xl: \"xl\",\n};\n\nexport const AvatarGroup: React.FC<AvatarGroupProps> = ({\n list,\n size = \"md\",\n maxVisible = 6,\n stroke = true,\n avatarBackgroundMode = \"mixed\",\n \"aria-label\": ariaLabel,\n}) => {\n const { theme } = useDesignSystem();\n\n // Map external size to internal Avatar size\n const internalSize = sizeMap[size];\n\n const totalCount = list.length;\n\n // Determine which avatars to show\n // Ensure maxVisible is non-negative and doesn't exceed totalCount\n const visibleCount = Math.min(totalCount, Math.max(0, maxVisible));\n const visibleListItems = list.slice(0, visibleCount);\n const remainingCount = totalCount - visibleCount;\n\n // Overlap amount: 4px in Figma\n const overlap = -4;\n\n // Background colors for text/icon avatars (cycling through theme colors)\n const mixedBackgrounds = [\n theme.colors.background.alert.secondary,\n theme.colors.background.warning.secondary,\n theme.colors.background.brandExtra.secondary,\n theme.colors.background.neutral.secondary,\n theme.colors.background.brand.secondary,\n theme.colors.background.success.secondary,\n theme.colors.background.success.primary,\n ];\n\n // Preset color mapping\n const presetColors: Record<string, string> = {\n brand: theme.colors.background.brand.secondary,\n brandExtra: theme.colors.background.brandExtra.secondary,\n success: theme.colors.background.success.secondary,\n warning: theme.colors.background.warning.secondary,\n alert: theme.colors.background.alert.secondary,\n neutral: theme.colors.background.neutral.secondary,\n };\n\n // Get background color based on avatarBackgroundMode\n const getBackgroundColor = (index: number): string => {\n if (typeof avatarBackgroundMode === \"function\") {\n return avatarBackgroundMode(theme);\n }\n if (avatarBackgroundMode === \"mixed\") {\n return mixedBackgrounds[index % mixedBackgrounds.length];\n }\n // Preset color mode\n return (\n presetColors[avatarBackgroundMode] || theme.colors.background.secondary\n );\n };\n\n // Default accessible label for the group\n const defaultAriaLabel =\n totalCount === 1\n ? \"1 user\"\n : totalCount === visibleCount\n ? `${totalCount} users`\n : `${visibleCount} of ${totalCount} users`;\n\n // Render an avatar with optional tooltip wrapper\n const renderAvatarWithTooltip = (\n avatar: React.ReactNode,\n tooltip: string | undefined,\n key: number\n ) => {\n if (tooltip) {\n return (\n <Tooltip key={key} content={tooltip} placement=\"top\">\n {avatar}\n </Tooltip>\n );\n }\n return avatar;\n };\n\n return (\n <Box\n flexDirection=\"row\"\n alignItems=\"center\"\n role=\"group\"\n aria-label={ariaLabel || defaultAriaLabel}\n >\n {visibleListItems.map((item, index) => {\n const shouldApplyBackground = !item.src;\n const backgroundColor = shouldApplyBackground\n ? getBackgroundColor(index)\n : undefined;\n\n // Only enable hover for image avatars with onClick\n const shouldEnableHover = !!item.src && !!item.onClick;\n\n const avatar = (\n <Box\n key={index}\n marginLeft={index === 0 ? 0 : overlap}\n zIndex={totalCount - index}\n >\n <Avatar\n src={item.src}\n text={item.initials}\n size={internalSize}\n stroke={stroke}\n backgroundColor={backgroundColor}\n disableHover={!shouldEnableHover}\n onClick={item.onClick}\n {...(item.tooltip ? { \"aria-label\": item.tooltip } : {})}\n />\n </Box>\n );\n\n return renderAvatarWithTooltip(avatar, item.tooltip, index);\n })}\n\n {remainingCount > 0 && (\n <Box marginLeft={overlap} zIndex={0}>\n <Avatar\n size={internalSize}\n text={`+${remainingCount}`}\n stroke={stroke}\n backgroundColor={theme.colors.background.secondary}\n disableHover={true}\n aria-label={`${remainingCount} more ${remainingCount === 1 ? \"user\" : \"users\"}`}\n />\n </Box>\n )}\n </Box>\n );\n};\n"],"mappings":"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","names":["styled","jsx","styled","jsx","styled","jsx","styled","jsx","styled","jsx","forwardRef","styled","jsx","jsx","useDesignSystem","jsx","jsxs","useDesignSystem"]}
|