@xsolla/xui-radio 0.198.0 → 0.200.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 +66 -5
- package/native/index.js.map +1 -1
- package/native/index.mjs +66 -5
- package/native/index.mjs.map +1 -1
- package/package.json +3 -3
package/native/index.js
CHANGED
|
@@ -30,6 +30,38 @@ var import_react = require("react");
|
|
|
30
30
|
// ../../foundation/primitives-native/src/Box.tsx
|
|
31
31
|
var import_react_native = require("react-native");
|
|
32
32
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
33
|
+
var roleToAccessibilityRole = {
|
|
34
|
+
button: "button",
|
|
35
|
+
link: "link",
|
|
36
|
+
img: "image",
|
|
37
|
+
image: "image",
|
|
38
|
+
summary: "summary",
|
|
39
|
+
switch: "switch",
|
|
40
|
+
checkbox: "checkbox",
|
|
41
|
+
radio: "radio",
|
|
42
|
+
heading: "header",
|
|
43
|
+
text: "text",
|
|
44
|
+
search: "search",
|
|
45
|
+
alert: "alert",
|
|
46
|
+
none: "none",
|
|
47
|
+
presentation: "none",
|
|
48
|
+
progressbar: "progressbar",
|
|
49
|
+
scrollbar: "scrollbar",
|
|
50
|
+
adjustable: "adjustable",
|
|
51
|
+
tab: "tab",
|
|
52
|
+
menu: "menu",
|
|
53
|
+
menuitem: "menuitem",
|
|
54
|
+
list: "list",
|
|
55
|
+
timer: "timer"
|
|
56
|
+
};
|
|
57
|
+
var toGapValue = (gap) => {
|
|
58
|
+
if (gap === void 0) return void 0;
|
|
59
|
+
if (typeof gap === "number") return gap;
|
|
60
|
+
const pxMatch = /^(\d+(?:\.\d+)?)px$/.exec(gap);
|
|
61
|
+
if (pxMatch) return Number(pxMatch[1]);
|
|
62
|
+
const asNumber = Number(gap);
|
|
63
|
+
return Number.isFinite(asNumber) ? asNumber : void 0;
|
|
64
|
+
};
|
|
33
65
|
var Box = ({
|
|
34
66
|
children,
|
|
35
67
|
onPress,
|
|
@@ -62,8 +94,10 @@ var Box = ({
|
|
|
62
94
|
marginLeft,
|
|
63
95
|
marginRight,
|
|
64
96
|
flexDirection,
|
|
97
|
+
flexWrap,
|
|
65
98
|
alignItems,
|
|
66
99
|
justifyContent,
|
|
100
|
+
alignSelf,
|
|
67
101
|
position,
|
|
68
102
|
top,
|
|
69
103
|
bottom,
|
|
@@ -75,11 +109,14 @@ var Box = ({
|
|
|
75
109
|
maxWidth,
|
|
76
110
|
maxHeight,
|
|
77
111
|
flex,
|
|
112
|
+
flexShrink,
|
|
113
|
+
gap,
|
|
78
114
|
overflow,
|
|
79
115
|
zIndex,
|
|
80
116
|
hoverStyle,
|
|
81
117
|
pressStyle,
|
|
82
118
|
style,
|
|
119
|
+
disabled,
|
|
83
120
|
"data-testid": dataTestId,
|
|
84
121
|
testID,
|
|
85
122
|
as,
|
|
@@ -118,14 +155,18 @@ var Box = ({
|
|
|
118
155
|
marginLeft,
|
|
119
156
|
marginRight,
|
|
120
157
|
flexDirection,
|
|
158
|
+
flexWrap,
|
|
121
159
|
alignItems,
|
|
122
160
|
justifyContent,
|
|
161
|
+
alignSelf,
|
|
123
162
|
position,
|
|
124
163
|
top,
|
|
125
164
|
bottom,
|
|
126
165
|
left,
|
|
127
166
|
right,
|
|
128
167
|
flex,
|
|
168
|
+
flexShrink,
|
|
169
|
+
gap: toGapValue(gap),
|
|
129
170
|
...style
|
|
130
171
|
});
|
|
131
172
|
const finalTestID = dataTestId || testID;
|
|
@@ -134,15 +175,25 @@ var Box = ({
|
|
|
134
175
|
tabIndex,
|
|
135
176
|
onKeyDown,
|
|
136
177
|
onKeyUp,
|
|
137
|
-
"aria-label":
|
|
178
|
+
"aria-label": ariaLabel,
|
|
138
179
|
"aria-labelledby": _ariaLabelledBy,
|
|
139
180
|
"aria-current": _ariaCurrent,
|
|
140
|
-
"aria-disabled":
|
|
141
|
-
"aria-live":
|
|
181
|
+
"aria-disabled": ariaDisabled,
|
|
182
|
+
"aria-live": ariaLive,
|
|
183
|
+
"aria-busy": ariaBusy,
|
|
142
184
|
className,
|
|
143
185
|
"data-testid": _dataTestId,
|
|
186
|
+
cursor: _cursor,
|
|
187
|
+
type: _type,
|
|
144
188
|
...nativeRest
|
|
145
189
|
} = rest;
|
|
190
|
+
const accessibilityRole = typeof role === "string" && roleToAccessibilityRole[role] || (as === "button" ? "button" : void 0);
|
|
191
|
+
const isDisabled = Boolean(disabled || ariaDisabled);
|
|
192
|
+
const accessibilityState = {
|
|
193
|
+
disabled: isDisabled || void 0,
|
|
194
|
+
busy: Boolean(ariaBusy) || void 0
|
|
195
|
+
};
|
|
196
|
+
const accessibilityLiveRegion = ariaLive === "polite" || ariaLive === "assertive" ? ariaLive : void 0;
|
|
146
197
|
if (as === "img" && src) {
|
|
147
198
|
const imageStyle = {
|
|
148
199
|
width,
|
|
@@ -161,16 +212,18 @@ var Box = ({
|
|
|
161
212
|
source: { uri: src },
|
|
162
213
|
style: imageStyle,
|
|
163
214
|
testID: finalTestID,
|
|
215
|
+
accessibilityLabel: typeof ariaLabel === "string" ? ariaLabel : alt,
|
|
164
216
|
resizeMode: "cover",
|
|
165
217
|
...nativeRest
|
|
166
218
|
}
|
|
167
219
|
);
|
|
168
220
|
}
|
|
169
|
-
if (onPress) {
|
|
221
|
+
if (onPress || as === "button") {
|
|
170
222
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
171
223
|
import_react_native.Pressable,
|
|
172
224
|
{
|
|
173
|
-
onPress,
|
|
225
|
+
onPress: !isDisabled && onPress ? onPress : void 0,
|
|
226
|
+
disabled: isDisabled,
|
|
174
227
|
onLayout,
|
|
175
228
|
onMoveShouldSetResponder,
|
|
176
229
|
onResponderGrant,
|
|
@@ -179,6 +232,10 @@ var Box = ({
|
|
|
179
232
|
onResponderTerminate,
|
|
180
233
|
style: ({ pressed }) => getContainerStyle(pressed),
|
|
181
234
|
testID: finalTestID,
|
|
235
|
+
accessibilityRole,
|
|
236
|
+
accessibilityLabel: typeof ariaLabel === "string" ? ariaLabel : void 0,
|
|
237
|
+
accessibilityState,
|
|
238
|
+
accessibilityLiveRegion,
|
|
182
239
|
...nativeRest,
|
|
183
240
|
children
|
|
184
241
|
}
|
|
@@ -195,6 +252,10 @@ var Box = ({
|
|
|
195
252
|
onResponderMove,
|
|
196
253
|
onResponderRelease,
|
|
197
254
|
onResponderTerminate,
|
|
255
|
+
accessibilityRole,
|
|
256
|
+
accessibilityLabel: typeof ariaLabel === "string" ? ariaLabel : void 0,
|
|
257
|
+
accessibilityState,
|
|
258
|
+
accessibilityLiveRegion,
|
|
198
259
|
...nativeRest,
|
|
199
260
|
children
|
|
200
261
|
}
|
package/native/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.tsx","../../src/Radio.tsx","../../../../foundation/primitives-native/src/Box.tsx","../../../../foundation/primitives-native/src/Text.tsx"],"sourcesContent":["export * from \"./Radio\";\n","import React, { useState } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text } from \"@xsolla/xui-primitives\";\nimport {\n useResolvedTheme,\n radiusScale,\n type ThemeOverrideProps,\n} from \"@xsolla/xui-core\";\n\nexport interface RadioProps extends ThemeOverrideProps {\n /** Size of the radio button */\n size?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n /** Whether the radio button is checked */\n checked?: boolean;\n /** Value of the radio button (for RadioGroup) */\n value?: string;\n /** Visual state of the radio button */\n state?: \"default\" | \"hover\" | \"disable\" | \"error\";\n /** Whether the radio button is disabled */\n disabled?: boolean;\n /** Label text to display next to the radio button */\n label?: string;\n /** Description text to display below the label */\n description?: string;\n /** Error label text to display when state is 'error' */\n errorLabel?: string;\n /** Callback when the radio button is pressed */\n onPress?: () => void;\n /** Callback when the radio button value changes (for compatibility with Checkbox-like APIs) */\n onValueChange?: (value: boolean) => void;\n /** Accessible label for screen readers (if label is not provided) */\n \"aria-label\"?: string;\n /** ID of element that labels this radio */\n \"aria-labelledby\"?: string;\n testID?: string;\n}\n\n// Mocking useRadioGroup here to avoid circular dependency in local dev\n// In a real monorepo this might be handled via a shared types or core package\ndeclare const require: (id: string) => any;\nconst useRadioGroup = () => {\n try {\n return require(\"@xsolla/xui-radio-group\").useRadioGroup();\n } catch {\n return {};\n }\n};\n\nexport const Radio: React.FC<RadioProps> = ({\n size: propSize,\n checked: propChecked,\n value,\n state = \"default\",\n disabled = false,\n label,\n description,\n errorLabel,\n onPress,\n onValueChange,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n testID,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const radioGroup = useRadioGroup();\n\n const size = propSize || radioGroup.size || \"md\";\n const isControlled =\n propChecked !== undefined ||\n (radioGroup.value !== undefined && value !== undefined);\n const [internalChecked, setInternalChecked] = useState(false);\n const checked = isControlled\n ? propChecked !== undefined\n ? propChecked\n : radioGroup.value === value\n : internalChecked;\n const isDisable = state === \"disable\" || disabled || radioGroup.disabled;\n const isError = state === \"error\";\n const isHover = state === \"hover\";\n const showErrorLabel = isError && errorLabel;\n\n const sizing = theme.sizing.radio(size);\n\n const checkColors = theme.colors.control.check;\n const textColors = theme.colors.control.text;\n\n const handlePress = () => {\n if (!isDisable) {\n if (!isControlled) {\n setInternalChecked(true);\n }\n if (onPress) {\n onPress();\n }\n if (radioGroup.onChange && value !== undefined) {\n radioGroup.onChange(value);\n }\n if (onValueChange) {\n onValueChange(!checked);\n }\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (!isDisable && event.key === \" \") {\n event.preventDefault(); // Prevent scrolling on Space\n handlePress();\n }\n };\n\n const getBgColor = () => {\n if (isDisable) return checkColors.bgDisable;\n if (isHover) {\n return checked ? checkColors.bgHover : theme.colors.control.faint.bgHover;\n }\n if (checked) return checkColors.bg;\n return theme.colors.control.faint.bg;\n };\n\n const getBorderColor = () => {\n if (isDisable) return checkColors.borderDisable;\n if (isHover) {\n if (checked) return checkColors.borderHover;\n if (isError) return theme.colors.border.alert;\n return theme.colors.control.faint.borderHover;\n }\n if (checked) return checkColors.border;\n if (isError) return theme.colors.border.alert;\n return theme.colors.control.faint.border;\n };\n\n const getTextColor = () => {\n if (isDisable) return textColors.disable;\n return textColors.primary;\n };\n\n const getDotColor = () => {\n if (isDisable) return textColors.disable;\n return checkColors.icon;\n };\n\n const dotSize = sizing.iconSize;\n\n const getHoverStyle = () => {\n if (isDisable) return undefined;\n\n if (checked) {\n return {\n backgroundColor: checkColors.bgHover,\n borderColor: checkColors.borderHover,\n };\n } else if (isError) {\n return {\n backgroundColor: theme.colors.control.faint.bgHover,\n borderColor: theme.colors.border.alert,\n };\n } else {\n return {\n backgroundColor: theme.colors.control.faint.bgHover,\n borderColor: theme.colors.control.faint.borderHover,\n };\n }\n };\n\n return (\n <Box\n testID={testID}\n role=\"radio\"\n aria-checked={checked}\n aria-disabled={isDisable || undefined}\n aria-invalid={isError || undefined}\n aria-label={\n ariaLabelledBy\n ? undefined\n : ariaLabel || (label ? undefined : \"Radio button\")\n }\n aria-labelledby={ariaLabelledBy}\n tabIndex={isDisable ? -1 : 0}\n flexDirection=\"row\"\n alignItems={description || showErrorLabel ? \"flex-start\" : \"center\"}\n gap={sizing.labelGap}\n onPress={handlePress}\n onKeyDown={handleKeyDown}\n cursor={!isDisable ? \"pointer\" : \"default\"}\n >\n <Box\n width={sizing.size}\n height={sizing.size}\n backgroundColor={getBgColor()}\n borderColor={getBorderColor()}\n borderWidth={sizing.borderWidth}\n borderRadius={radiusScale[\"999\"]}\n alignItems=\"center\"\n justifyContent=\"center\"\n hoverStyle={getHoverStyle()}\n >\n {checked && (\n <Box\n width={dotSize}\n height={dotSize}\n backgroundColor={getDotColor()}\n borderRadius={radiusScale[\"999\"]}\n />\n )}\n </Box>\n\n {(label || description || showErrorLabel) && (\n <Box flexDirection=\"column\" gap={sizing.textGap}>\n {label && (\n <Text\n color={getTextColor()}\n fontSize={sizing.fontSize}\n lineHeight={sizing.lineHeight}\n fontWeight=\"400\"\n >\n {label}\n </Text>\n )}\n {description && (\n <Text\n color={theme.colors.content.tertiary}\n fontSize={sizing.descriptionFontSize}\n lineHeight={sizing.descriptionLineHeight}\n >\n {description}\n </Text>\n )}\n {showErrorLabel && (\n <Text\n color={theme.colors.content.alert.primary}\n fontSize={sizing.descriptionFontSize}\n lineHeight={sizing.descriptionLineHeight}\n >\n {errorLabel}\n </Text>\n )}\n </Box>\n )}\n </Box>\n );\n};\n","import React from \"react\";\nimport {\n View,\n Pressable,\n Image,\n ViewStyle,\n ImageStyle,\n DimensionValue,\n AnimatableNumericValue,\n} from \"react-native\";\nimport { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Box: React.FC<BoxProps> = ({\n children,\n onPress,\n onLayout,\n onMoveShouldSetResponder,\n onResponderGrant,\n onResponderMove,\n onResponderRelease,\n onResponderTerminate,\n backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius,\n borderStyle,\n height,\n padding,\n paddingHorizontal,\n paddingVertical,\n margin,\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n flexDirection,\n alignItems,\n justifyContent,\n position,\n top,\n bottom,\n left,\n right,\n width,\n minWidth,\n minHeight,\n maxWidth,\n maxHeight,\n flex,\n overflow,\n zIndex,\n hoverStyle,\n pressStyle,\n style,\n \"data-testid\": dataTestId,\n testID,\n as,\n src,\n alt,\n ...rest\n}) => {\n const getContainerStyle = (pressed?: boolean): ViewStyle => ({\n backgroundColor:\n pressed && pressStyle?.backgroundColor\n ? pressStyle.backgroundColor\n : backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius: borderRadius as AnimatableNumericValue,\n borderStyle: borderStyle as ViewStyle[\"borderStyle\"],\n overflow,\n zIndex,\n height: height as DimensionValue,\n width: width as DimensionValue,\n minWidth: minWidth as DimensionValue,\n minHeight: minHeight as DimensionValue,\n maxWidth: maxWidth as DimensionValue,\n maxHeight: maxHeight as DimensionValue,\n padding: padding as DimensionValue,\n paddingHorizontal: paddingHorizontal as DimensionValue,\n paddingVertical: paddingVertical as DimensionValue,\n margin: margin as DimensionValue,\n marginTop: marginTop as DimensionValue,\n marginBottom: marginBottom as DimensionValue,\n marginLeft: marginLeft as DimensionValue,\n marginRight: marginRight as DimensionValue,\n flexDirection,\n alignItems,\n justifyContent,\n position: position as ViewStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n flex,\n ...(style as ViewStyle),\n });\n\n const finalTestID = dataTestId || testID;\n\n // Destructure and drop web-only props from rest before passing to RN components\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const {\n role,\n tabIndex,\n onKeyDown,\n onKeyUp,\n \"aria-label\": _ariaLabel,\n \"aria-labelledby\": _ariaLabelledBy,\n \"aria-current\": _ariaCurrent,\n \"aria-disabled\": _ariaDisabled,\n \"aria-live\": _ariaLive,\n className,\n \"data-testid\": _dataTestId,\n ...nativeRest\n } = rest as Record<string, unknown>;\n\n // Handle as=\"img\" for React Native\n if (as === \"img\" && src) {\n const imageStyle: ImageStyle = {\n width: width as DimensionValue,\n height: height as DimensionValue,\n borderRadius: borderRadius as number,\n position: position as ImageStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n ...(style as ImageStyle),\n };\n\n return (\n <Image\n source={{ uri: src }}\n style={imageStyle}\n testID={finalTestID}\n resizeMode=\"cover\"\n {...nativeRest}\n />\n );\n }\n\n if (onPress) {\n return (\n <Pressable\n onPress={onPress}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n style={({ pressed }) => getContainerStyle(pressed)}\n testID={finalTestID}\n {...nativeRest}\n >\n {children}\n </Pressable>\n );\n }\n\n return (\n <View\n style={getContainerStyle()}\n testID={finalTestID}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n {...nativeRest}\n >\n {children}\n </View>\n );\n};\n","import React from \"react\";\nimport {\n Text as RNText,\n TextStyle,\n AccessibilityRole,\n StyleSheet,\n} from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst roleMap: Record<string, AccessibilityRole> = {\n alert: \"alert\",\n heading: \"header\",\n button: \"button\",\n link: \"link\",\n text: \"text\",\n};\n\nconst parseNumericValue = (\n value: string | number | undefined\n): number | undefined => {\n if (value === undefined) return undefined;\n if (typeof value === \"number\") return value;\n const parsed = parseFloat(value);\n return isNaN(parsed) ? undefined : parsed;\n};\n\nexport const Text: React.FC<TextProps> = ({\n children,\n color,\n fontSize,\n fontWeight,\n fontFamily,\n textAlign,\n lineHeight,\n numberOfLines,\n id,\n role,\n testID,\n \"data-testid\": dataTestId,\n style: styleProp,\n ...props\n}) => {\n let resolvedFontFamily = fontFamily\n ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n : undefined;\n\n if (\n resolvedFontFamily === \"Pilat Wide\" ||\n resolvedFontFamily === \"Pilat Wide Bold\" ||\n resolvedFontFamily === \"Aktiv Grotesk\"\n ) {\n resolvedFontFamily = undefined;\n }\n\n const incomingStyle = StyleSheet.flatten(styleProp) as TextStyle | undefined;\n\n const baseStyle: TextStyle = {\n color: color ?? incomingStyle?.color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n fontWeight: fontWeight as TextStyle[\"fontWeight\"],\n fontFamily: resolvedFontFamily,\n textDecorationLine: props.textDecoration as TextStyle[\"textDecorationLine\"],\n textAlign: textAlign ?? incomingStyle?.textAlign,\n lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),\n marginTop: parseNumericValue(\n incomingStyle?.marginTop as number | string | undefined\n ),\n marginBottom: parseNumericValue(\n incomingStyle?.marginBottom as number | string | undefined\n ),\n };\n\n const accessibilityRole = role ? roleMap[role] : undefined;\n\n return (\n <RNText\n style={baseStyle}\n numberOfLines={numberOfLines}\n testID={dataTestId || testID || id}\n accessibilityRole={accessibilityRole}\n >\n {children}\n </RNText>\n );\n};\n"],"mappings":"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","names":["import_react_native","import_jsx_runtime","RNText","import_jsx_runtime"]}
|
|
1
|
+
{"version":3,"sources":["../../src/index.tsx","../../src/Radio.tsx","../../../../foundation/primitives-native/src/Box.tsx","../../../../foundation/primitives-native/src/Text.tsx"],"sourcesContent":["export * from \"./Radio\";\n","import React, { useState } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text } from \"@xsolla/xui-primitives\";\nimport {\n useResolvedTheme,\n radiusScale,\n type ThemeOverrideProps,\n} from \"@xsolla/xui-core\";\n\nexport interface RadioProps extends ThemeOverrideProps {\n /** Size of the radio button */\n size?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n /** Whether the radio button is checked */\n checked?: boolean;\n /** Value of the radio button (for RadioGroup) */\n value?: string;\n /** Visual state of the radio button */\n state?: \"default\" | \"hover\" | \"disable\" | \"error\";\n /** Whether the radio button is disabled */\n disabled?: boolean;\n /** Label text to display next to the radio button */\n label?: string;\n /** Description text to display below the label */\n description?: string;\n /** Error label text to display when state is 'error' */\n errorLabel?: string;\n /** Callback when the radio button is pressed */\n onPress?: () => void;\n /** Callback when the radio button value changes (for compatibility with Checkbox-like APIs) */\n onValueChange?: (value: boolean) => void;\n /** Accessible label for screen readers (if label is not provided) */\n \"aria-label\"?: string;\n /** ID of element that labels this radio */\n \"aria-labelledby\"?: string;\n testID?: string;\n}\n\n// Mocking useRadioGroup here to avoid circular dependency in local dev\n// In a real monorepo this might be handled via a shared types or core package\ndeclare const require: (id: string) => any;\nconst useRadioGroup = () => {\n try {\n return require(\"@xsolla/xui-radio-group\").useRadioGroup();\n } catch {\n return {};\n }\n};\n\nexport const Radio: React.FC<RadioProps> = ({\n size: propSize,\n checked: propChecked,\n value,\n state = \"default\",\n disabled = false,\n label,\n description,\n errorLabel,\n onPress,\n onValueChange,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n testID,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const radioGroup = useRadioGroup();\n\n const size = propSize || radioGroup.size || \"md\";\n const isControlled =\n propChecked !== undefined ||\n (radioGroup.value !== undefined && value !== undefined);\n const [internalChecked, setInternalChecked] = useState(false);\n const checked = isControlled\n ? propChecked !== undefined\n ? propChecked\n : radioGroup.value === value\n : internalChecked;\n const isDisable = state === \"disable\" || disabled || radioGroup.disabled;\n const isError = state === \"error\";\n const isHover = state === \"hover\";\n const showErrorLabel = isError && errorLabel;\n\n const sizing = theme.sizing.radio(size);\n\n const checkColors = theme.colors.control.check;\n const textColors = theme.colors.control.text;\n\n const handlePress = () => {\n if (!isDisable) {\n if (!isControlled) {\n setInternalChecked(true);\n }\n if (onPress) {\n onPress();\n }\n if (radioGroup.onChange && value !== undefined) {\n radioGroup.onChange(value);\n }\n if (onValueChange) {\n onValueChange(!checked);\n }\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (!isDisable && event.key === \" \") {\n event.preventDefault(); // Prevent scrolling on Space\n handlePress();\n }\n };\n\n const getBgColor = () => {\n if (isDisable) return checkColors.bgDisable;\n if (isHover) {\n return checked ? checkColors.bgHover : theme.colors.control.faint.bgHover;\n }\n if (checked) return checkColors.bg;\n return theme.colors.control.faint.bg;\n };\n\n const getBorderColor = () => {\n if (isDisable) return checkColors.borderDisable;\n if (isHover) {\n if (checked) return checkColors.borderHover;\n if (isError) return theme.colors.border.alert;\n return theme.colors.control.faint.borderHover;\n }\n if (checked) return checkColors.border;\n if (isError) return theme.colors.border.alert;\n return theme.colors.control.faint.border;\n };\n\n const getTextColor = () => {\n if (isDisable) return textColors.disable;\n return textColors.primary;\n };\n\n const getDotColor = () => {\n if (isDisable) return textColors.disable;\n return checkColors.icon;\n };\n\n const dotSize = sizing.iconSize;\n\n const getHoverStyle = () => {\n if (isDisable) return undefined;\n\n if (checked) {\n return {\n backgroundColor: checkColors.bgHover,\n borderColor: checkColors.borderHover,\n };\n } else if (isError) {\n return {\n backgroundColor: theme.colors.control.faint.bgHover,\n borderColor: theme.colors.border.alert,\n };\n } else {\n return {\n backgroundColor: theme.colors.control.faint.bgHover,\n borderColor: theme.colors.control.faint.borderHover,\n };\n }\n };\n\n return (\n <Box\n testID={testID}\n role=\"radio\"\n aria-checked={checked}\n aria-disabled={isDisable || undefined}\n aria-invalid={isError || undefined}\n aria-label={\n ariaLabelledBy\n ? undefined\n : ariaLabel || (label ? undefined : \"Radio button\")\n }\n aria-labelledby={ariaLabelledBy}\n tabIndex={isDisable ? -1 : 0}\n flexDirection=\"row\"\n alignItems={description || showErrorLabel ? \"flex-start\" : \"center\"}\n gap={sizing.labelGap}\n onPress={handlePress}\n onKeyDown={handleKeyDown}\n cursor={!isDisable ? \"pointer\" : \"default\"}\n >\n <Box\n width={sizing.size}\n height={sizing.size}\n backgroundColor={getBgColor()}\n borderColor={getBorderColor()}\n borderWidth={sizing.borderWidth}\n borderRadius={radiusScale[\"999\"]}\n alignItems=\"center\"\n justifyContent=\"center\"\n hoverStyle={getHoverStyle()}\n >\n {checked && (\n <Box\n width={dotSize}\n height={dotSize}\n backgroundColor={getDotColor()}\n borderRadius={radiusScale[\"999\"]}\n />\n )}\n </Box>\n\n {(label || description || showErrorLabel) && (\n <Box flexDirection=\"column\" gap={sizing.textGap}>\n {label && (\n <Text\n color={getTextColor()}\n fontSize={sizing.fontSize}\n lineHeight={sizing.lineHeight}\n fontWeight=\"400\"\n >\n {label}\n </Text>\n )}\n {description && (\n <Text\n color={theme.colors.content.tertiary}\n fontSize={sizing.descriptionFontSize}\n lineHeight={sizing.descriptionLineHeight}\n >\n {description}\n </Text>\n )}\n {showErrorLabel && (\n <Text\n color={theme.colors.content.alert.primary}\n fontSize={sizing.descriptionFontSize}\n lineHeight={sizing.descriptionLineHeight}\n >\n {errorLabel}\n </Text>\n )}\n </Box>\n )}\n </Box>\n );\n};\n","import React from \"react\";\nimport {\n View,\n Pressable,\n Image,\n ViewStyle,\n ImageStyle,\n DimensionValue,\n AnimatableNumericValue,\n AccessibilityRole,\n} from \"react-native\";\nimport { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nconst roleToAccessibilityRole: Record<string, AccessibilityRole> = {\n button: \"button\",\n link: \"link\",\n img: \"image\",\n image: \"image\",\n summary: \"summary\",\n switch: \"switch\",\n checkbox: \"checkbox\",\n radio: \"radio\",\n heading: \"header\",\n text: \"text\",\n search: \"search\",\n alert: \"alert\",\n none: \"none\",\n presentation: \"none\",\n progressbar: \"progressbar\",\n scrollbar: \"scrollbar\",\n adjustable: \"adjustable\",\n tab: \"tab\",\n menu: \"menu\",\n menuitem: \"menuitem\",\n list: \"list\",\n timer: \"timer\",\n};\n\n/** RN ViewStyle.gap is typed as number (Yoga gap), not DimensionValue. */\nconst toGapValue = (gap: number | string | undefined): number | undefined => {\n if (gap === undefined) return undefined;\n if (typeof gap === \"number\") return gap;\n const pxMatch = /^(\\d+(?:\\.\\d+)?)px$/.exec(gap);\n if (pxMatch) return Number(pxMatch[1]);\n const asNumber = Number(gap);\n return Number.isFinite(asNumber) ? asNumber : undefined;\n};\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 flexWrap,\n alignItems,\n justifyContent,\n alignSelf,\n position,\n top,\n bottom,\n left,\n right,\n width,\n minWidth,\n minHeight,\n maxWidth,\n maxHeight,\n flex,\n flexShrink,\n gap,\n overflow,\n zIndex,\n hoverStyle,\n pressStyle,\n style,\n disabled,\n \"data-testid\": dataTestId,\n testID,\n as,\n src,\n alt,\n ...rest\n}) => {\n const getContainerStyle = (pressed?: boolean): ViewStyle => ({\n backgroundColor:\n pressed && pressStyle?.backgroundColor\n ? pressStyle.backgroundColor\n : backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius: borderRadius as AnimatableNumericValue,\n borderStyle: borderStyle as ViewStyle[\"borderStyle\"],\n overflow,\n zIndex,\n height: height as DimensionValue,\n width: width as DimensionValue,\n minWidth: minWidth as DimensionValue,\n minHeight: minHeight as DimensionValue,\n maxWidth: maxWidth as DimensionValue,\n maxHeight: maxHeight as DimensionValue,\n padding: padding as DimensionValue,\n paddingHorizontal: paddingHorizontal as DimensionValue,\n paddingVertical: paddingVertical as DimensionValue,\n margin: margin as DimensionValue,\n marginTop: marginTop as DimensionValue,\n marginBottom: marginBottom as DimensionValue,\n marginLeft: marginLeft as DimensionValue,\n marginRight: marginRight as DimensionValue,\n flexDirection,\n flexWrap,\n alignItems,\n justifyContent,\n alignSelf,\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 flexShrink,\n gap: toGapValue(gap),\n ...(style as ViewStyle),\n });\n\n const finalTestID = dataTestId || testID;\n\n // Map web a11y props; drop the rest of the web-only attributes before\n // spreading onto RN hosts (unknown props warn at runtime).\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 \"aria-busy\": ariaBusy,\n className,\n \"data-testid\": _dataTestId,\n cursor: _cursor,\n type: _type,\n ...nativeRest\n } = rest as Record<string, unknown>;\n\n const accessibilityRole =\n (typeof role === \"string\" && roleToAccessibilityRole[role]) ||\n (as === \"button\" ? \"button\" : undefined);\n const isDisabled = Boolean(disabled || ariaDisabled);\n const accessibilityState = {\n disabled: isDisabled || undefined,\n busy: Boolean(ariaBusy) || undefined,\n };\n const accessibilityLiveRegion =\n ariaLive === \"polite\" || ariaLive === \"assertive\" ? ariaLive : undefined;\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 accessibilityLabel={typeof ariaLabel === \"string\" ? ariaLabel : alt}\n resizeMode=\"cover\"\n {...nativeRest}\n />\n );\n }\n\n // Prefer Pressable whenever the node is interactive or explicitly a button,\n // so disabled / aria-disabled controls stay in the a11y tree as buttons.\n if (onPress || as === \"button\") {\n return (\n <Pressable\n onPress={!isDisabled && onPress ? onPress : undefined}\n disabled={isDisabled}\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 accessibilityRole={accessibilityRole}\n accessibilityLabel={\n typeof ariaLabel === \"string\" ? ariaLabel : undefined\n }\n accessibilityState={accessibilityState}\n accessibilityLiveRegion={accessibilityLiveRegion}\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 accessibilityRole={accessibilityRole}\n accessibilityLabel={typeof ariaLabel === \"string\" ? ariaLabel : undefined}\n accessibilityState={accessibilityState}\n accessibilityLiveRegion={accessibilityLiveRegion}\n {...nativeRest}\n >\n {children}\n </View>\n );\n};\n","import React from \"react\";\nimport {\n Text as RNText,\n TextStyle,\n AccessibilityRole,\n StyleSheet,\n} from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst roleMap: Record<string, AccessibilityRole> = {\n alert: \"alert\",\n heading: \"header\",\n button: \"button\",\n link: \"link\",\n text: \"text\",\n};\n\nconst parseNumericValue = (\n value: string | number | undefined\n): number | undefined => {\n if (value === undefined) return undefined;\n if (typeof value === \"number\") return value;\n const parsed = parseFloat(value);\n return isNaN(parsed) ? undefined : parsed;\n};\n\nexport const Text: React.FC<TextProps> = ({\n children,\n color,\n fontSize,\n fontWeight,\n fontFamily,\n textAlign,\n lineHeight,\n numberOfLines,\n id,\n role,\n testID,\n \"data-testid\": dataTestId,\n style: styleProp,\n ...props\n}) => {\n let resolvedFontFamily = fontFamily\n ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n : undefined;\n\n if (\n resolvedFontFamily === \"Pilat Wide\" ||\n resolvedFontFamily === \"Pilat Wide Bold\" ||\n resolvedFontFamily === \"Aktiv Grotesk\"\n ) {\n resolvedFontFamily = undefined;\n }\n\n const incomingStyle = StyleSheet.flatten(styleProp) as TextStyle | undefined;\n\n const baseStyle: TextStyle = {\n color: color ?? incomingStyle?.color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n fontWeight: fontWeight as TextStyle[\"fontWeight\"],\n fontFamily: resolvedFontFamily,\n textDecorationLine: props.textDecoration as TextStyle[\"textDecorationLine\"],\n textAlign: textAlign ?? incomingStyle?.textAlign,\n lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),\n marginTop: parseNumericValue(\n incomingStyle?.marginTop as number | string | undefined\n ),\n marginBottom: parseNumericValue(\n incomingStyle?.marginBottom as number | string | undefined\n ),\n };\n\n const accessibilityRole = role ? roleMap[role] : undefined;\n\n return (\n <RNText\n style={baseStyle}\n numberOfLines={numberOfLines}\n testID={dataTestId || testID || id}\n accessibilityRole={accessibilityRole}\n >\n {children}\n </RNText>\n );\n};\n"],"mappings":"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","names":["import_react_native","import_jsx_runtime","RNText","import_jsx_runtime"]}
|
package/native/index.mjs
CHANGED
|
@@ -15,6 +15,38 @@ import {
|
|
|
15
15
|
Image
|
|
16
16
|
} from "react-native";
|
|
17
17
|
import { jsx } from "react/jsx-runtime";
|
|
18
|
+
var roleToAccessibilityRole = {
|
|
19
|
+
button: "button",
|
|
20
|
+
link: "link",
|
|
21
|
+
img: "image",
|
|
22
|
+
image: "image",
|
|
23
|
+
summary: "summary",
|
|
24
|
+
switch: "switch",
|
|
25
|
+
checkbox: "checkbox",
|
|
26
|
+
radio: "radio",
|
|
27
|
+
heading: "header",
|
|
28
|
+
text: "text",
|
|
29
|
+
search: "search",
|
|
30
|
+
alert: "alert",
|
|
31
|
+
none: "none",
|
|
32
|
+
presentation: "none",
|
|
33
|
+
progressbar: "progressbar",
|
|
34
|
+
scrollbar: "scrollbar",
|
|
35
|
+
adjustable: "adjustable",
|
|
36
|
+
tab: "tab",
|
|
37
|
+
menu: "menu",
|
|
38
|
+
menuitem: "menuitem",
|
|
39
|
+
list: "list",
|
|
40
|
+
timer: "timer"
|
|
41
|
+
};
|
|
42
|
+
var toGapValue = (gap) => {
|
|
43
|
+
if (gap === void 0) return void 0;
|
|
44
|
+
if (typeof gap === "number") return gap;
|
|
45
|
+
const pxMatch = /^(\d+(?:\.\d+)?)px$/.exec(gap);
|
|
46
|
+
if (pxMatch) return Number(pxMatch[1]);
|
|
47
|
+
const asNumber = Number(gap);
|
|
48
|
+
return Number.isFinite(asNumber) ? asNumber : void 0;
|
|
49
|
+
};
|
|
18
50
|
var Box = ({
|
|
19
51
|
children,
|
|
20
52
|
onPress,
|
|
@@ -47,8 +79,10 @@ var Box = ({
|
|
|
47
79
|
marginLeft,
|
|
48
80
|
marginRight,
|
|
49
81
|
flexDirection,
|
|
82
|
+
flexWrap,
|
|
50
83
|
alignItems,
|
|
51
84
|
justifyContent,
|
|
85
|
+
alignSelf,
|
|
52
86
|
position,
|
|
53
87
|
top,
|
|
54
88
|
bottom,
|
|
@@ -60,11 +94,14 @@ var Box = ({
|
|
|
60
94
|
maxWidth,
|
|
61
95
|
maxHeight,
|
|
62
96
|
flex,
|
|
97
|
+
flexShrink,
|
|
98
|
+
gap,
|
|
63
99
|
overflow,
|
|
64
100
|
zIndex,
|
|
65
101
|
hoverStyle,
|
|
66
102
|
pressStyle,
|
|
67
103
|
style,
|
|
104
|
+
disabled,
|
|
68
105
|
"data-testid": dataTestId,
|
|
69
106
|
testID,
|
|
70
107
|
as,
|
|
@@ -103,14 +140,18 @@ var Box = ({
|
|
|
103
140
|
marginLeft,
|
|
104
141
|
marginRight,
|
|
105
142
|
flexDirection,
|
|
143
|
+
flexWrap,
|
|
106
144
|
alignItems,
|
|
107
145
|
justifyContent,
|
|
146
|
+
alignSelf,
|
|
108
147
|
position,
|
|
109
148
|
top,
|
|
110
149
|
bottom,
|
|
111
150
|
left,
|
|
112
151
|
right,
|
|
113
152
|
flex,
|
|
153
|
+
flexShrink,
|
|
154
|
+
gap: toGapValue(gap),
|
|
114
155
|
...style
|
|
115
156
|
});
|
|
116
157
|
const finalTestID = dataTestId || testID;
|
|
@@ -119,15 +160,25 @@ var Box = ({
|
|
|
119
160
|
tabIndex,
|
|
120
161
|
onKeyDown,
|
|
121
162
|
onKeyUp,
|
|
122
|
-
"aria-label":
|
|
163
|
+
"aria-label": ariaLabel,
|
|
123
164
|
"aria-labelledby": _ariaLabelledBy,
|
|
124
165
|
"aria-current": _ariaCurrent,
|
|
125
|
-
"aria-disabled":
|
|
126
|
-
"aria-live":
|
|
166
|
+
"aria-disabled": ariaDisabled,
|
|
167
|
+
"aria-live": ariaLive,
|
|
168
|
+
"aria-busy": ariaBusy,
|
|
127
169
|
className,
|
|
128
170
|
"data-testid": _dataTestId,
|
|
171
|
+
cursor: _cursor,
|
|
172
|
+
type: _type,
|
|
129
173
|
...nativeRest
|
|
130
174
|
} = rest;
|
|
175
|
+
const accessibilityRole = typeof role === "string" && roleToAccessibilityRole[role] || (as === "button" ? "button" : void 0);
|
|
176
|
+
const isDisabled = Boolean(disabled || ariaDisabled);
|
|
177
|
+
const accessibilityState = {
|
|
178
|
+
disabled: isDisabled || void 0,
|
|
179
|
+
busy: Boolean(ariaBusy) || void 0
|
|
180
|
+
};
|
|
181
|
+
const accessibilityLiveRegion = ariaLive === "polite" || ariaLive === "assertive" ? ariaLive : void 0;
|
|
131
182
|
if (as === "img" && src) {
|
|
132
183
|
const imageStyle = {
|
|
133
184
|
width,
|
|
@@ -146,16 +197,18 @@ var Box = ({
|
|
|
146
197
|
source: { uri: src },
|
|
147
198
|
style: imageStyle,
|
|
148
199
|
testID: finalTestID,
|
|
200
|
+
accessibilityLabel: typeof ariaLabel === "string" ? ariaLabel : alt,
|
|
149
201
|
resizeMode: "cover",
|
|
150
202
|
...nativeRest
|
|
151
203
|
}
|
|
152
204
|
);
|
|
153
205
|
}
|
|
154
|
-
if (onPress) {
|
|
206
|
+
if (onPress || as === "button") {
|
|
155
207
|
return /* @__PURE__ */ jsx(
|
|
156
208
|
Pressable,
|
|
157
209
|
{
|
|
158
|
-
onPress,
|
|
210
|
+
onPress: !isDisabled && onPress ? onPress : void 0,
|
|
211
|
+
disabled: isDisabled,
|
|
159
212
|
onLayout,
|
|
160
213
|
onMoveShouldSetResponder,
|
|
161
214
|
onResponderGrant,
|
|
@@ -164,6 +217,10 @@ var Box = ({
|
|
|
164
217
|
onResponderTerminate,
|
|
165
218
|
style: ({ pressed }) => getContainerStyle(pressed),
|
|
166
219
|
testID: finalTestID,
|
|
220
|
+
accessibilityRole,
|
|
221
|
+
accessibilityLabel: typeof ariaLabel === "string" ? ariaLabel : void 0,
|
|
222
|
+
accessibilityState,
|
|
223
|
+
accessibilityLiveRegion,
|
|
167
224
|
...nativeRest,
|
|
168
225
|
children
|
|
169
226
|
}
|
|
@@ -180,6 +237,10 @@ var Box = ({
|
|
|
180
237
|
onResponderMove,
|
|
181
238
|
onResponderRelease,
|
|
182
239
|
onResponderTerminate,
|
|
240
|
+
accessibilityRole,
|
|
241
|
+
accessibilityLabel: typeof ariaLabel === "string" ? ariaLabel : void 0,
|
|
242
|
+
accessibilityState,
|
|
243
|
+
accessibilityLiveRegion,
|
|
183
244
|
...nativeRest,
|
|
184
245
|
children
|
|
185
246
|
}
|
package/native/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Radio.tsx","../../../../foundation/primitives-native/src/Box.tsx","../../../../foundation/primitives-native/src/Text.tsx"],"sourcesContent":["import React, { useState } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text } from \"@xsolla/xui-primitives\";\nimport {\n useResolvedTheme,\n radiusScale,\n type ThemeOverrideProps,\n} from \"@xsolla/xui-core\";\n\nexport interface RadioProps extends ThemeOverrideProps {\n /** Size of the radio button */\n size?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n /** Whether the radio button is checked */\n checked?: boolean;\n /** Value of the radio button (for RadioGroup) */\n value?: string;\n /** Visual state of the radio button */\n state?: \"default\" | \"hover\" | \"disable\" | \"error\";\n /** Whether the radio button is disabled */\n disabled?: boolean;\n /** Label text to display next to the radio button */\n label?: string;\n /** Description text to display below the label */\n description?: string;\n /** Error label text to display when state is 'error' */\n errorLabel?: string;\n /** Callback when the radio button is pressed */\n onPress?: () => void;\n /** Callback when the radio button value changes (for compatibility with Checkbox-like APIs) */\n onValueChange?: (value: boolean) => void;\n /** Accessible label for screen readers (if label is not provided) */\n \"aria-label\"?: string;\n /** ID of element that labels this radio */\n \"aria-labelledby\"?: string;\n testID?: string;\n}\n\n// Mocking useRadioGroup here to avoid circular dependency in local dev\n// In a real monorepo this might be handled via a shared types or core package\ndeclare const require: (id: string) => any;\nconst useRadioGroup = () => {\n try {\n return require(\"@xsolla/xui-radio-group\").useRadioGroup();\n } catch {\n return {};\n }\n};\n\nexport const Radio: React.FC<RadioProps> = ({\n size: propSize,\n checked: propChecked,\n value,\n state = \"default\",\n disabled = false,\n label,\n description,\n errorLabel,\n onPress,\n onValueChange,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n testID,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const radioGroup = useRadioGroup();\n\n const size = propSize || radioGroup.size || \"md\";\n const isControlled =\n propChecked !== undefined ||\n (radioGroup.value !== undefined && value !== undefined);\n const [internalChecked, setInternalChecked] = useState(false);\n const checked = isControlled\n ? propChecked !== undefined\n ? propChecked\n : radioGroup.value === value\n : internalChecked;\n const isDisable = state === \"disable\" || disabled || radioGroup.disabled;\n const isError = state === \"error\";\n const isHover = state === \"hover\";\n const showErrorLabel = isError && errorLabel;\n\n const sizing = theme.sizing.radio(size);\n\n const checkColors = theme.colors.control.check;\n const textColors = theme.colors.control.text;\n\n const handlePress = () => {\n if (!isDisable) {\n if (!isControlled) {\n setInternalChecked(true);\n }\n if (onPress) {\n onPress();\n }\n if (radioGroup.onChange && value !== undefined) {\n radioGroup.onChange(value);\n }\n if (onValueChange) {\n onValueChange(!checked);\n }\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (!isDisable && event.key === \" \") {\n event.preventDefault(); // Prevent scrolling on Space\n handlePress();\n }\n };\n\n const getBgColor = () => {\n if (isDisable) return checkColors.bgDisable;\n if (isHover) {\n return checked ? checkColors.bgHover : theme.colors.control.faint.bgHover;\n }\n if (checked) return checkColors.bg;\n return theme.colors.control.faint.bg;\n };\n\n const getBorderColor = () => {\n if (isDisable) return checkColors.borderDisable;\n if (isHover) {\n if (checked) return checkColors.borderHover;\n if (isError) return theme.colors.border.alert;\n return theme.colors.control.faint.borderHover;\n }\n if (checked) return checkColors.border;\n if (isError) return theme.colors.border.alert;\n return theme.colors.control.faint.border;\n };\n\n const getTextColor = () => {\n if (isDisable) return textColors.disable;\n return textColors.primary;\n };\n\n const getDotColor = () => {\n if (isDisable) return textColors.disable;\n return checkColors.icon;\n };\n\n const dotSize = sizing.iconSize;\n\n const getHoverStyle = () => {\n if (isDisable) return undefined;\n\n if (checked) {\n return {\n backgroundColor: checkColors.bgHover,\n borderColor: checkColors.borderHover,\n };\n } else if (isError) {\n return {\n backgroundColor: theme.colors.control.faint.bgHover,\n borderColor: theme.colors.border.alert,\n };\n } else {\n return {\n backgroundColor: theme.colors.control.faint.bgHover,\n borderColor: theme.colors.control.faint.borderHover,\n };\n }\n };\n\n return (\n <Box\n testID={testID}\n role=\"radio\"\n aria-checked={checked}\n aria-disabled={isDisable || undefined}\n aria-invalid={isError || undefined}\n aria-label={\n ariaLabelledBy\n ? undefined\n : ariaLabel || (label ? undefined : \"Radio button\")\n }\n aria-labelledby={ariaLabelledBy}\n tabIndex={isDisable ? -1 : 0}\n flexDirection=\"row\"\n alignItems={description || showErrorLabel ? \"flex-start\" : \"center\"}\n gap={sizing.labelGap}\n onPress={handlePress}\n onKeyDown={handleKeyDown}\n cursor={!isDisable ? \"pointer\" : \"default\"}\n >\n <Box\n width={sizing.size}\n height={sizing.size}\n backgroundColor={getBgColor()}\n borderColor={getBorderColor()}\n borderWidth={sizing.borderWidth}\n borderRadius={radiusScale[\"999\"]}\n alignItems=\"center\"\n justifyContent=\"center\"\n hoverStyle={getHoverStyle()}\n >\n {checked && (\n <Box\n width={dotSize}\n height={dotSize}\n backgroundColor={getDotColor()}\n borderRadius={radiusScale[\"999\"]}\n />\n )}\n </Box>\n\n {(label || description || showErrorLabel) && (\n <Box flexDirection=\"column\" gap={sizing.textGap}>\n {label && (\n <Text\n color={getTextColor()}\n fontSize={sizing.fontSize}\n lineHeight={sizing.lineHeight}\n fontWeight=\"400\"\n >\n {label}\n </Text>\n )}\n {description && (\n <Text\n color={theme.colors.content.tertiary}\n fontSize={sizing.descriptionFontSize}\n lineHeight={sizing.descriptionLineHeight}\n >\n {description}\n </Text>\n )}\n {showErrorLabel && (\n <Text\n color={theme.colors.content.alert.primary}\n fontSize={sizing.descriptionFontSize}\n lineHeight={sizing.descriptionLineHeight}\n >\n {errorLabel}\n </Text>\n )}\n </Box>\n )}\n </Box>\n );\n};\n","import React from \"react\";\nimport {\n View,\n Pressable,\n Image,\n ViewStyle,\n ImageStyle,\n DimensionValue,\n AnimatableNumericValue,\n} from \"react-native\";\nimport { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Box: React.FC<BoxProps> = ({\n children,\n onPress,\n onLayout,\n onMoveShouldSetResponder,\n onResponderGrant,\n onResponderMove,\n onResponderRelease,\n onResponderTerminate,\n backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius,\n borderStyle,\n height,\n padding,\n paddingHorizontal,\n paddingVertical,\n margin,\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n flexDirection,\n alignItems,\n justifyContent,\n position,\n top,\n bottom,\n left,\n right,\n width,\n minWidth,\n minHeight,\n maxWidth,\n maxHeight,\n flex,\n overflow,\n zIndex,\n hoverStyle,\n pressStyle,\n style,\n \"data-testid\": dataTestId,\n testID,\n as,\n src,\n alt,\n ...rest\n}) => {\n const getContainerStyle = (pressed?: boolean): ViewStyle => ({\n backgroundColor:\n pressed && pressStyle?.backgroundColor\n ? pressStyle.backgroundColor\n : backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius: borderRadius as AnimatableNumericValue,\n borderStyle: borderStyle as ViewStyle[\"borderStyle\"],\n overflow,\n zIndex,\n height: height as DimensionValue,\n width: width as DimensionValue,\n minWidth: minWidth as DimensionValue,\n minHeight: minHeight as DimensionValue,\n maxWidth: maxWidth as DimensionValue,\n maxHeight: maxHeight as DimensionValue,\n padding: padding as DimensionValue,\n paddingHorizontal: paddingHorizontal as DimensionValue,\n paddingVertical: paddingVertical as DimensionValue,\n margin: margin as DimensionValue,\n marginTop: marginTop as DimensionValue,\n marginBottom: marginBottom as DimensionValue,\n marginLeft: marginLeft as DimensionValue,\n marginRight: marginRight as DimensionValue,\n flexDirection,\n alignItems,\n justifyContent,\n position: position as ViewStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n flex,\n ...(style as ViewStyle),\n });\n\n const finalTestID = dataTestId || testID;\n\n // Destructure and drop web-only props from rest before passing to RN components\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const {\n role,\n tabIndex,\n onKeyDown,\n onKeyUp,\n \"aria-label\": _ariaLabel,\n \"aria-labelledby\": _ariaLabelledBy,\n \"aria-current\": _ariaCurrent,\n \"aria-disabled\": _ariaDisabled,\n \"aria-live\": _ariaLive,\n className,\n \"data-testid\": _dataTestId,\n ...nativeRest\n } = rest as Record<string, unknown>;\n\n // Handle as=\"img\" for React Native\n if (as === \"img\" && src) {\n const imageStyle: ImageStyle = {\n width: width as DimensionValue,\n height: height as DimensionValue,\n borderRadius: borderRadius as number,\n position: position as ImageStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n ...(style as ImageStyle),\n };\n\n return (\n <Image\n source={{ uri: src }}\n style={imageStyle}\n testID={finalTestID}\n resizeMode=\"cover\"\n {...nativeRest}\n />\n );\n }\n\n if (onPress) {\n return (\n <Pressable\n onPress={onPress}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n style={({ pressed }) => getContainerStyle(pressed)}\n testID={finalTestID}\n {...nativeRest}\n >\n {children}\n </Pressable>\n );\n }\n\n return (\n <View\n style={getContainerStyle()}\n testID={finalTestID}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n {...nativeRest}\n >\n {children}\n </View>\n );\n};\n","import React from \"react\";\nimport {\n Text as RNText,\n TextStyle,\n AccessibilityRole,\n StyleSheet,\n} from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst roleMap: Record<string, AccessibilityRole> = {\n alert: \"alert\",\n heading: \"header\",\n button: \"button\",\n link: \"link\",\n text: \"text\",\n};\n\nconst parseNumericValue = (\n value: string | number | undefined\n): number | undefined => {\n if (value === undefined) return undefined;\n if (typeof value === \"number\") return value;\n const parsed = parseFloat(value);\n return isNaN(parsed) ? undefined : parsed;\n};\n\nexport const Text: React.FC<TextProps> = ({\n children,\n color,\n fontSize,\n fontWeight,\n fontFamily,\n textAlign,\n lineHeight,\n numberOfLines,\n id,\n role,\n testID,\n \"data-testid\": dataTestId,\n style: styleProp,\n ...props\n}) => {\n let resolvedFontFamily = fontFamily\n ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n : undefined;\n\n if (\n resolvedFontFamily === \"Pilat Wide\" ||\n resolvedFontFamily === \"Pilat Wide Bold\" ||\n resolvedFontFamily === \"Aktiv Grotesk\"\n ) {\n resolvedFontFamily = undefined;\n }\n\n const incomingStyle = StyleSheet.flatten(styleProp) as TextStyle | undefined;\n\n const baseStyle: TextStyle = {\n color: color ?? incomingStyle?.color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n fontWeight: fontWeight as TextStyle[\"fontWeight\"],\n fontFamily: resolvedFontFamily,\n textDecorationLine: props.textDecoration as TextStyle[\"textDecorationLine\"],\n textAlign: textAlign ?? incomingStyle?.textAlign,\n lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),\n marginTop: parseNumericValue(\n incomingStyle?.marginTop as number | string | undefined\n ),\n marginBottom: parseNumericValue(\n incomingStyle?.marginBottom as number | string | undefined\n ),\n };\n\n const accessibilityRole = role ? roleMap[role] : undefined;\n\n return (\n <RNText\n style={baseStyle}\n numberOfLines={numberOfLines}\n testID={dataTestId || testID || id}\n accessibilityRole={accessibilityRole}\n >\n {children}\n </RNText>\n );\n};\n"],"mappings":"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","names":["jsx","jsx"]}
|
|
1
|
+
{"version":3,"sources":["../../src/Radio.tsx","../../../../foundation/primitives-native/src/Box.tsx","../../../../foundation/primitives-native/src/Text.tsx"],"sourcesContent":["import React, { useState } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text } from \"@xsolla/xui-primitives\";\nimport {\n useResolvedTheme,\n radiusScale,\n type ThemeOverrideProps,\n} from \"@xsolla/xui-core\";\n\nexport interface RadioProps extends ThemeOverrideProps {\n /** Size of the radio button */\n size?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n /** Whether the radio button is checked */\n checked?: boolean;\n /** Value of the radio button (for RadioGroup) */\n value?: string;\n /** Visual state of the radio button */\n state?: \"default\" | \"hover\" | \"disable\" | \"error\";\n /** Whether the radio button is disabled */\n disabled?: boolean;\n /** Label text to display next to the radio button */\n label?: string;\n /** Description text to display below the label */\n description?: string;\n /** Error label text to display when state is 'error' */\n errorLabel?: string;\n /** Callback when the radio button is pressed */\n onPress?: () => void;\n /** Callback when the radio button value changes (for compatibility with Checkbox-like APIs) */\n onValueChange?: (value: boolean) => void;\n /** Accessible label for screen readers (if label is not provided) */\n \"aria-label\"?: string;\n /** ID of element that labels this radio */\n \"aria-labelledby\"?: string;\n testID?: string;\n}\n\n// Mocking useRadioGroup here to avoid circular dependency in local dev\n// In a real monorepo this might be handled via a shared types or core package\ndeclare const require: (id: string) => any;\nconst useRadioGroup = () => {\n try {\n return require(\"@xsolla/xui-radio-group\").useRadioGroup();\n } catch {\n return {};\n }\n};\n\nexport const Radio: React.FC<RadioProps> = ({\n size: propSize,\n checked: propChecked,\n value,\n state = \"default\",\n disabled = false,\n label,\n description,\n errorLabel,\n onPress,\n onValueChange,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n testID,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const radioGroup = useRadioGroup();\n\n const size = propSize || radioGroup.size || \"md\";\n const isControlled =\n propChecked !== undefined ||\n (radioGroup.value !== undefined && value !== undefined);\n const [internalChecked, setInternalChecked] = useState(false);\n const checked = isControlled\n ? propChecked !== undefined\n ? propChecked\n : radioGroup.value === value\n : internalChecked;\n const isDisable = state === \"disable\" || disabled || radioGroup.disabled;\n const isError = state === \"error\";\n const isHover = state === \"hover\";\n const showErrorLabel = isError && errorLabel;\n\n const sizing = theme.sizing.radio(size);\n\n const checkColors = theme.colors.control.check;\n const textColors = theme.colors.control.text;\n\n const handlePress = () => {\n if (!isDisable) {\n if (!isControlled) {\n setInternalChecked(true);\n }\n if (onPress) {\n onPress();\n }\n if (radioGroup.onChange && value !== undefined) {\n radioGroup.onChange(value);\n }\n if (onValueChange) {\n onValueChange(!checked);\n }\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (!isDisable && event.key === \" \") {\n event.preventDefault(); // Prevent scrolling on Space\n handlePress();\n }\n };\n\n const getBgColor = () => {\n if (isDisable) return checkColors.bgDisable;\n if (isHover) {\n return checked ? checkColors.bgHover : theme.colors.control.faint.bgHover;\n }\n if (checked) return checkColors.bg;\n return theme.colors.control.faint.bg;\n };\n\n const getBorderColor = () => {\n if (isDisable) return checkColors.borderDisable;\n if (isHover) {\n if (checked) return checkColors.borderHover;\n if (isError) return theme.colors.border.alert;\n return theme.colors.control.faint.borderHover;\n }\n if (checked) return checkColors.border;\n if (isError) return theme.colors.border.alert;\n return theme.colors.control.faint.border;\n };\n\n const getTextColor = () => {\n if (isDisable) return textColors.disable;\n return textColors.primary;\n };\n\n const getDotColor = () => {\n if (isDisable) return textColors.disable;\n return checkColors.icon;\n };\n\n const dotSize = sizing.iconSize;\n\n const getHoverStyle = () => {\n if (isDisable) return undefined;\n\n if (checked) {\n return {\n backgroundColor: checkColors.bgHover,\n borderColor: checkColors.borderHover,\n };\n } else if (isError) {\n return {\n backgroundColor: theme.colors.control.faint.bgHover,\n borderColor: theme.colors.border.alert,\n };\n } else {\n return {\n backgroundColor: theme.colors.control.faint.bgHover,\n borderColor: theme.colors.control.faint.borderHover,\n };\n }\n };\n\n return (\n <Box\n testID={testID}\n role=\"radio\"\n aria-checked={checked}\n aria-disabled={isDisable || undefined}\n aria-invalid={isError || undefined}\n aria-label={\n ariaLabelledBy\n ? undefined\n : ariaLabel || (label ? undefined : \"Radio button\")\n }\n aria-labelledby={ariaLabelledBy}\n tabIndex={isDisable ? -1 : 0}\n flexDirection=\"row\"\n alignItems={description || showErrorLabel ? \"flex-start\" : \"center\"}\n gap={sizing.labelGap}\n onPress={handlePress}\n onKeyDown={handleKeyDown}\n cursor={!isDisable ? \"pointer\" : \"default\"}\n >\n <Box\n width={sizing.size}\n height={sizing.size}\n backgroundColor={getBgColor()}\n borderColor={getBorderColor()}\n borderWidth={sizing.borderWidth}\n borderRadius={radiusScale[\"999\"]}\n alignItems=\"center\"\n justifyContent=\"center\"\n hoverStyle={getHoverStyle()}\n >\n {checked && (\n <Box\n width={dotSize}\n height={dotSize}\n backgroundColor={getDotColor()}\n borderRadius={radiusScale[\"999\"]}\n />\n )}\n </Box>\n\n {(label || description || showErrorLabel) && (\n <Box flexDirection=\"column\" gap={sizing.textGap}>\n {label && (\n <Text\n color={getTextColor()}\n fontSize={sizing.fontSize}\n lineHeight={sizing.lineHeight}\n fontWeight=\"400\"\n >\n {label}\n </Text>\n )}\n {description && (\n <Text\n color={theme.colors.content.tertiary}\n fontSize={sizing.descriptionFontSize}\n lineHeight={sizing.descriptionLineHeight}\n >\n {description}\n </Text>\n )}\n {showErrorLabel && (\n <Text\n color={theme.colors.content.alert.primary}\n fontSize={sizing.descriptionFontSize}\n lineHeight={sizing.descriptionLineHeight}\n >\n {errorLabel}\n </Text>\n )}\n </Box>\n )}\n </Box>\n );\n};\n","import React from \"react\";\nimport {\n View,\n Pressable,\n Image,\n ViewStyle,\n ImageStyle,\n DimensionValue,\n AnimatableNumericValue,\n AccessibilityRole,\n} from \"react-native\";\nimport { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nconst roleToAccessibilityRole: Record<string, AccessibilityRole> = {\n button: \"button\",\n link: \"link\",\n img: \"image\",\n image: \"image\",\n summary: \"summary\",\n switch: \"switch\",\n checkbox: \"checkbox\",\n radio: \"radio\",\n heading: \"header\",\n text: \"text\",\n search: \"search\",\n alert: \"alert\",\n none: \"none\",\n presentation: \"none\",\n progressbar: \"progressbar\",\n scrollbar: \"scrollbar\",\n adjustable: \"adjustable\",\n tab: \"tab\",\n menu: \"menu\",\n menuitem: \"menuitem\",\n list: \"list\",\n timer: \"timer\",\n};\n\n/** RN ViewStyle.gap is typed as number (Yoga gap), not DimensionValue. */\nconst toGapValue = (gap: number | string | undefined): number | undefined => {\n if (gap === undefined) return undefined;\n if (typeof gap === \"number\") return gap;\n const pxMatch = /^(\\d+(?:\\.\\d+)?)px$/.exec(gap);\n if (pxMatch) return Number(pxMatch[1]);\n const asNumber = Number(gap);\n return Number.isFinite(asNumber) ? asNumber : undefined;\n};\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 flexWrap,\n alignItems,\n justifyContent,\n alignSelf,\n position,\n top,\n bottom,\n left,\n right,\n width,\n minWidth,\n minHeight,\n maxWidth,\n maxHeight,\n flex,\n flexShrink,\n gap,\n overflow,\n zIndex,\n hoverStyle,\n pressStyle,\n style,\n disabled,\n \"data-testid\": dataTestId,\n testID,\n as,\n src,\n alt,\n ...rest\n}) => {\n const getContainerStyle = (pressed?: boolean): ViewStyle => ({\n backgroundColor:\n pressed && pressStyle?.backgroundColor\n ? pressStyle.backgroundColor\n : backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius: borderRadius as AnimatableNumericValue,\n borderStyle: borderStyle as ViewStyle[\"borderStyle\"],\n overflow,\n zIndex,\n height: height as DimensionValue,\n width: width as DimensionValue,\n minWidth: minWidth as DimensionValue,\n minHeight: minHeight as DimensionValue,\n maxWidth: maxWidth as DimensionValue,\n maxHeight: maxHeight as DimensionValue,\n padding: padding as DimensionValue,\n paddingHorizontal: paddingHorizontal as DimensionValue,\n paddingVertical: paddingVertical as DimensionValue,\n margin: margin as DimensionValue,\n marginTop: marginTop as DimensionValue,\n marginBottom: marginBottom as DimensionValue,\n marginLeft: marginLeft as DimensionValue,\n marginRight: marginRight as DimensionValue,\n flexDirection,\n flexWrap,\n alignItems,\n justifyContent,\n alignSelf,\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 flexShrink,\n gap: toGapValue(gap),\n ...(style as ViewStyle),\n });\n\n const finalTestID = dataTestId || testID;\n\n // Map web a11y props; drop the rest of the web-only attributes before\n // spreading onto RN hosts (unknown props warn at runtime).\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 \"aria-busy\": ariaBusy,\n className,\n \"data-testid\": _dataTestId,\n cursor: _cursor,\n type: _type,\n ...nativeRest\n } = rest as Record<string, unknown>;\n\n const accessibilityRole =\n (typeof role === \"string\" && roleToAccessibilityRole[role]) ||\n (as === \"button\" ? \"button\" : undefined);\n const isDisabled = Boolean(disabled || ariaDisabled);\n const accessibilityState = {\n disabled: isDisabled || undefined,\n busy: Boolean(ariaBusy) || undefined,\n };\n const accessibilityLiveRegion =\n ariaLive === \"polite\" || ariaLive === \"assertive\" ? ariaLive : undefined;\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 accessibilityLabel={typeof ariaLabel === \"string\" ? ariaLabel : alt}\n resizeMode=\"cover\"\n {...nativeRest}\n />\n );\n }\n\n // Prefer Pressable whenever the node is interactive or explicitly a button,\n // so disabled / aria-disabled controls stay in the a11y tree as buttons.\n if (onPress || as === \"button\") {\n return (\n <Pressable\n onPress={!isDisabled && onPress ? onPress : undefined}\n disabled={isDisabled}\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 accessibilityRole={accessibilityRole}\n accessibilityLabel={\n typeof ariaLabel === \"string\" ? ariaLabel : undefined\n }\n accessibilityState={accessibilityState}\n accessibilityLiveRegion={accessibilityLiveRegion}\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 accessibilityRole={accessibilityRole}\n accessibilityLabel={typeof ariaLabel === \"string\" ? ariaLabel : undefined}\n accessibilityState={accessibilityState}\n accessibilityLiveRegion={accessibilityLiveRegion}\n {...nativeRest}\n >\n {children}\n </View>\n );\n};\n","import React from \"react\";\nimport {\n Text as RNText,\n TextStyle,\n AccessibilityRole,\n StyleSheet,\n} from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst roleMap: Record<string, AccessibilityRole> = {\n alert: \"alert\",\n heading: \"header\",\n button: \"button\",\n link: \"link\",\n text: \"text\",\n};\n\nconst parseNumericValue = (\n value: string | number | undefined\n): number | undefined => {\n if (value === undefined) return undefined;\n if (typeof value === \"number\") return value;\n const parsed = parseFloat(value);\n return isNaN(parsed) ? undefined : parsed;\n};\n\nexport const Text: React.FC<TextProps> = ({\n children,\n color,\n fontSize,\n fontWeight,\n fontFamily,\n textAlign,\n lineHeight,\n numberOfLines,\n id,\n role,\n testID,\n \"data-testid\": dataTestId,\n style: styleProp,\n ...props\n}) => {\n let resolvedFontFamily = fontFamily\n ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n : undefined;\n\n if (\n resolvedFontFamily === \"Pilat Wide\" ||\n resolvedFontFamily === \"Pilat Wide Bold\" ||\n resolvedFontFamily === \"Aktiv Grotesk\"\n ) {\n resolvedFontFamily = undefined;\n }\n\n const incomingStyle = StyleSheet.flatten(styleProp) as TextStyle | undefined;\n\n const baseStyle: TextStyle = {\n color: color ?? incomingStyle?.color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n fontWeight: fontWeight as TextStyle[\"fontWeight\"],\n fontFamily: resolvedFontFamily,\n textDecorationLine: props.textDecoration as TextStyle[\"textDecorationLine\"],\n textAlign: textAlign ?? incomingStyle?.textAlign,\n lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),\n marginTop: parseNumericValue(\n incomingStyle?.marginTop as number | string | undefined\n ),\n marginBottom: parseNumericValue(\n incomingStyle?.marginBottom as number | string | undefined\n ),\n };\n\n const accessibilityRole = role ? roleMap[role] : undefined;\n\n return (\n <RNText\n style={baseStyle}\n numberOfLines={numberOfLines}\n testID={dataTestId || testID || id}\n accessibilityRole={accessibilityRole}\n >\n {children}\n </RNText>\n );\n};\n"],"mappings":"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","names":["jsx","jsx"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-radio",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.200.0",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -13,8 +13,8 @@
|
|
|
13
13
|
"test:coverage": "vitest run --coverage"
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
|
-
"@xsolla/xui-core": "0.
|
|
17
|
-
"@xsolla/xui-primitives-core": "0.
|
|
16
|
+
"@xsolla/xui-core": "0.200.0",
|
|
17
|
+
"@xsolla/xui-primitives-core": "0.200.0"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
|
20
20
|
"react": ">=16.8.0",
|