@xsolla/xui-checkbox 0.141.0 → 0.147.1

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 CHANGED
@@ -27,7 +27,7 @@ module.exports = __toCommonJS(index_exports);
27
27
  // src/Checkbox.tsx
28
28
  var import_react = require("react");
29
29
 
30
- // ../primitives-native/src/Box.tsx
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
33
  var Box = ({
@@ -201,7 +201,7 @@ var Box = ({
201
201
  );
202
202
  };
203
203
 
204
- // ../primitives-native/src/Text.tsx
204
+ // ../../foundation/primitives-native/src/Text.tsx
205
205
  var import_react_native2 = require("react-native");
206
206
  var import_jsx_runtime2 = require("react/jsx-runtime");
207
207
  var roleMap = {
@@ -266,22 +266,49 @@ var Text = ({
266
266
 
267
267
  // src/Checkbox.tsx
268
268
  var import_xui_core = require("@xsolla/xui-core");
269
- var import_xui_icons = require("@xsolla/xui-icons");
270
269
  var import_jsx_runtime3 = require("react/jsx-runtime");
270
+ var CheckIcon = ({ size, color }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
271
+ "svg",
272
+ {
273
+ width: size,
274
+ height: size,
275
+ viewBox: "0 0 12 12",
276
+ fill: "none",
277
+ xmlns: "http://www.w3.org/2000/svg",
278
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
279
+ "path",
280
+ {
281
+ d: "M10.6699 4.2959L6.00293 8.96387C5.72637 9.24043 5.27761 9.24031 5.00098 8.96387L2 5.96289L3.2959 4.66699L5.50098 6.87207L9.37402 3L10.6699 4.2959Z",
282
+ fill: color
283
+ }
284
+ )
285
+ }
286
+ );
287
+ var MinusIcon = ({ size, color }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
288
+ "svg",
289
+ {
290
+ width: size,
291
+ height: size,
292
+ viewBox: "0 0 12 12",
293
+ fill: "none",
294
+ xmlns: "http://www.w3.org/2000/svg",
295
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M11 5V7H1V5H11Z", fill: color })
296
+ }
297
+ );
271
298
  var iconSizeMap = {
272
- sm: 12,
273
- md: 14,
274
- lg: 16,
275
- xl: 18
299
+ sm: 10,
300
+ md: 12,
301
+ lg: 14,
302
+ xl: 16
276
303
  };
277
304
  var checkboxSizeMap = {
278
305
  sm: 16,
279
306
  md: 18,
280
307
  lg: 20,
281
- xl: 22
308
+ xl: 24
282
309
  };
283
310
  var labelGapMap = {
284
- sm: 8,
311
+ sm: 6,
285
312
  md: 8,
286
313
  lg: 10,
287
314
  xl: 12
@@ -296,7 +323,7 @@ var fontSizeMap = {
296
323
  sm: 14,
297
324
  md: 16,
298
325
  lg: 18,
299
- xl: 18
326
+ xl: 20
300
327
  };
301
328
  var lineHeightMap = {
302
329
  sm: 16,
@@ -308,13 +335,13 @@ var descriptionFontSizeMap = {
308
335
  sm: 12,
309
336
  md: 14,
310
337
  lg: 16,
311
- xl: 16
338
+ xl: 18
312
339
  };
313
340
  var descriptionLineHeightMap = {
314
341
  sm: 14,
315
342
  md: 16,
316
343
  lg: 18,
317
- xl: 18
344
+ xl: 20
318
345
  };
319
346
  var Checkbox = (0, import_react.forwardRef)(
320
347
  function Checkbox2({
@@ -398,11 +425,11 @@ var Checkbox = (0, import_react.forwardRef)(
398
425
  return faintColors.bg;
399
426
  };
400
427
  const getBorderColor = () => {
401
- if (isError && !isCheckedOrIndeterminate) {
428
+ if (isError) {
402
429
  return borderColors.alert;
403
430
  }
404
431
  if (isCheckedOrIndeterminate && !disabled) {
405
- return checkColors.bg;
432
+ return checkColors.border;
406
433
  }
407
434
  return faintColors.border;
408
435
  };
@@ -433,7 +460,6 @@ var Checkbox = (0, import_react.forwardRef)(
433
460
  flexDirection: "row",
434
461
  alignItems: "flex-start",
435
462
  gap: labelGapMap[size],
436
- onPress: handleToggle,
437
463
  disabled,
438
464
  role: "checkbox",
439
465
  "aria-checked": getAriaChecked(),
@@ -444,6 +470,12 @@ var Checkbox = (0, import_react.forwardRef)(
444
470
  "aria-label": !children ? ariaLabel : void 0,
445
471
  tabIndex: disabled ? -1 : 0,
446
472
  onKeyDown: handleKeyDown,
473
+ focusStyle: {
474
+ outlineColor: theme.colors.border.brand,
475
+ outlineWidth: 2,
476
+ outlineOffset: 2,
477
+ outlineStyle: "solid"
478
+ },
447
479
  "data-testid": "checkbox",
448
480
  children: [
449
481
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -453,17 +485,19 @@ var Checkbox = (0, import_react.forwardRef)(
453
485
  height: checkboxSizeMap[size],
454
486
  backgroundColor: getCheckboxBgColor(),
455
487
  borderColor: getBorderColor(),
456
- borderWidth: 2,
457
- borderRadius: 2,
488
+ borderWidth: 1,
489
+ borderRadius: 4,
458
490
  alignItems: "center",
459
491
  justifyContent: "center",
460
492
  flexShrink: 0,
493
+ onPress: handleToggle,
494
+ cursor: disabled ? "not-allowed" : "pointer",
461
495
  hoverStyle: !disabled ? {
462
496
  backgroundColor: isCheckedOrIndeterminate ? checkColors.bgHover : faintColors.bgHover,
463
- borderColor: isError && !isCheckedOrIndeterminate ? borderColors.alert : isCheckedOrIndeterminate ? checkColors.bgHover : faintColors.borderHover
497
+ borderColor: isError ? borderColors.alert : isCheckedOrIndeterminate ? checkColors.borderHover : faintColors.borderHover
464
498
  } : void 0,
465
499
  "data-testid": "checkbox__box",
466
- children: isCheckedOrIndeterminate && (indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_xui_icons.Minus, { size: iconSizeMap[size], color: getIconColor() }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_xui_icons.Check, { size: iconSizeMap[size], color: getIconColor() }))
500
+ children: isCheckedOrIndeterminate && (indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MinusIcon, { size: iconSizeMap[size], color: getIconColor() }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CheckIcon, { size: iconSizeMap[size], color: getIconColor() }))
467
501
  }
468
502
  ),
469
503
  hasTexts && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
@@ -474,15 +508,22 @@ var Checkbox = (0, import_react.forwardRef)(
474
508
  gap: textGapMap[size],
475
509
  children: [
476
510
  children && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
477
- Text,
511
+ Box,
478
512
  {
479
- id: labelId,
480
- color: getLabelColor(),
481
- fontSize: fontSizeMap[size],
482
- lineHeight: lineHeightMap[size],
483
- fontWeight: 400,
484
- "data-testid": "checkbox__label",
485
- children
513
+ onPress: handleToggle,
514
+ cursor: disabled ? "not-allowed" : "pointer",
515
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
516
+ Text,
517
+ {
518
+ id: labelId,
519
+ color: getLabelColor(),
520
+ fontSize: fontSizeMap[size],
521
+ lineHeight: lineHeightMap[size],
522
+ fontWeight: 400,
523
+ "data-testid": "checkbox__label",
524
+ children
525
+ }
526
+ )
486
527
  }
487
528
  ),
488
529
  description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/index.tsx","../../src/Checkbox.tsx","../../../primitives-native/src/Box.tsx","../../../primitives-native/src/Text.tsx"],"sourcesContent":["export * from \"./Checkbox\";\n","import React, {\n forwardRef,\n useRef,\n useState,\n useImperativeHandle,\n} from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text } from \"@xsolla/xui-primitives\";\nimport {\n useResolvedTheme,\n useId,\n type ThemeOverrideProps,\n} from \"@xsolla/xui-core\";\nimport { Check, Minus } from \"@xsolla/xui-icons\";\n\ntype ComponentSize = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport interface CheckboxProps extends ThemeOverrideProps {\n /** Content/label to display next to the checkbox */\n children?: React.ReactNode;\n /** Size of the checkbox */\n size?: ComponentSize;\n /** Whether the checkbox is checked */\n checked?: boolean;\n /** The indeterminate checked state of checkbox */\n indeterminate?: boolean;\n /** Additional descriptive text below the label */\n description?: string;\n /** Error message to display (also highlights control as invalid) */\n errorMessage?: string;\n /** Highlight control as invalid without message */\n error?: boolean;\n /** Whether the checkbox is disabled */\n disabled?: boolean;\n /** Name attribute for the checkbox */\n name?: string;\n /** Value attribute for the checkbox */\n value?: string;\n /** Callback when the checkbox value changes */\n onChange?: (e: {\n target: { checked: boolean; name?: string; value?: string };\n }) => void;\n /** Unique identifier for the checkbox */\n id?: string;\n /** Accessible label for screen readers when no visible label */\n \"aria-label\"?: string;\n}\n\n// Ref type that works for both web and native\nexport interface CheckboxRef {\n focus: () => void;\n blur: () => void;\n}\n\n// Icon sizes for each component size\nconst iconSizeMap: Record<ComponentSize, number> = {\n sm: 12,\n md: 14,\n lg: 16,\n xl: 18,\n};\n\n// Checkbox box sizes\nconst checkboxSizeMap: Record<ComponentSize, number> = {\n sm: 16,\n md: 18,\n lg: 20,\n xl: 22,\n};\n\n// Label gap sizes (gap between checkbox and text)\nconst labelGapMap: Record<ComponentSize, number> = {\n sm: 8,\n md: 8,\n lg: 10,\n xl: 12,\n};\n\n// Text gap sizes (gap between label and description/error)\nconst textGapMap: Record<ComponentSize, number> = {\n sm: 0,\n md: 2,\n lg: 2,\n xl: 4,\n};\n\n// Font sizes for label (from Figma)\nconst fontSizeMap: Record<ComponentSize, number> = {\n sm: 14,\n md: 16,\n lg: 18,\n xl: 18,\n};\n\n// Line height for label (matches checkbox height for vertical centering)\nconst lineHeightMap: Record<ComponentSize, number> = {\n sm: 16,\n md: 18,\n lg: 20,\n xl: 22,\n};\n\n// Font sizes for description/error\nconst descriptionFontSizeMap: Record<ComponentSize, number> = {\n sm: 12,\n md: 14,\n lg: 16,\n xl: 16,\n};\n\n// Line height for description/error\nconst descriptionLineHeightMap: Record<ComponentSize, number> = {\n sm: 14,\n md: 16,\n lg: 18,\n xl: 18,\n};\n\nexport const Checkbox = forwardRef<CheckboxRef, CheckboxProps>(\n function Checkbox(\n {\n children,\n size = \"md\",\n checked,\n indeterminate = false,\n description,\n errorMessage,\n error,\n disabled,\n name,\n value,\n onChange,\n id: providedId,\n \"aria-label\": ariaLabel,\n themeMode,\n themeProductContext,\n },\n ref\n ) {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const containerRef = useRef<HTMLDivElement>(null);\n\n // Internal state for uncontrolled mode\n const [internalChecked, setInternalChecked] = useState(false);\n\n // Generate unique IDs for accessibility\n const rawId = useId();\n const safeId = rawId.replace(/:/g, \"\");\n const checkboxId = providedId || `checkbox-${safeId}`;\n const labelId = `${checkboxId}-label`;\n const descriptionId = `${checkboxId}-description`;\n const errorId = `${checkboxId}-error`;\n\n // Determine if controlled or uncontrolled\n const isControlled = checked !== undefined;\n const isChecked = isControlled ? checked : internalChecked;\n\n // Expose focus/blur methods via ref\n useImperativeHandle(\n ref,\n () => ({\n focus: () => containerRef.current?.focus(),\n blur: () => containerRef.current?.blur(),\n }),\n []\n );\n\n // Handle toggle for both controlled and uncontrolled modes\n const handleToggle = () => {\n if (disabled) return;\n\n // If indeterminate, always set to checked (true) for predictable UX\n const newChecked = indeterminate ? true : !isChecked;\n\n if (!isControlled) {\n setInternalChecked(newChecked);\n }\n\n onChange?.({\n target: {\n checked: newChecked,\n name,\n value,\n },\n });\n };\n\n // Handle keyboard interaction\n const handleKeyDown = (event: React.KeyboardEvent) => {\n const key = event.key;\n // Normalize Space key detection across browsers\n const isSpace = key === \" \" || key === \"Spacebar\" || key === \"Space\";\n if (isSpace || key === \"Enter\") {\n event.preventDefault();\n handleToggle();\n }\n };\n\n const isError = !!(errorMessage || error);\n const hasTexts = !!children || !!description;\n const isShowErrorMessage = !!errorMessage && hasTexts;\n const isCheckedOrIndeterminate = isChecked || indeterminate;\n\n // Build aria-describedby value\n // Only reference IDs of elements that are actually rendered\n const ariaDescribedByParts: string[] = [];\n if (description) ariaDescribedByParts.push(descriptionId);\n if (isShowErrorMessage) ariaDescribedByParts.push(errorId);\n const ariaDescribedBy =\n ariaDescribedByParts.length > 0\n ? ariaDescribedByParts.join(\" \")\n : undefined;\n\n // Resolve Colors from Theme\n const checkColors = theme.colors.control.check;\n const faintColors = theme.colors.control.faint;\n const textColors = theme.colors.control.text;\n const contentColors = theme.colors.content;\n const borderColors = theme.colors.border;\n\n /**\n * Get checkbox background color based on state\n */\n const getCheckboxBgColor = () => {\n if (disabled) {\n return checkColors.bgDisable;\n }\n if (isCheckedOrIndeterminate) {\n return checkColors.bg;\n }\n return faintColors.bg;\n };\n\n /**\n * Get checkbox border color\n */\n const getBorderColor = () => {\n if (isError && !isCheckedOrIndeterminate) {\n return borderColors.alert;\n }\n if (isCheckedOrIndeterminate && !disabled) {\n return checkColors.bg;\n }\n return faintColors.border;\n };\n\n /**\n * Get label text color\n */\n const getLabelColor = () => {\n if (disabled) return textColors.disable;\n return textColors.primary;\n };\n\n /**\n * Get description text color\n */\n const getDescriptionColor = () => {\n if (disabled) return textColors.disable;\n return contentColors.tertiary;\n };\n\n /**\n * Get error message text color\n */\n const getErrorMessageColor = () => {\n return contentColors.alert.primary;\n };\n\n /**\n * Get checkmark/minus icon color\n */\n const getIconColor = () => {\n if (disabled) return textColors.disable;\n return checkColors.icon;\n };\n\n // Determine aria-checked value\n const getAriaChecked = (): \"true\" | \"false\" | \"mixed\" => {\n if (indeterminate) return \"mixed\";\n return isChecked ? \"true\" : \"false\";\n };\n\n return (\n <Box\n id={checkboxId}\n ref={containerRef}\n flexDirection=\"row\"\n alignItems=\"flex-start\"\n gap={labelGapMap[size]}\n onPress={handleToggle}\n disabled={disabled}\n role=\"checkbox\"\n aria-checked={getAriaChecked()}\n aria-disabled={disabled || undefined}\n aria-invalid={isError || undefined}\n aria-describedby={ariaDescribedBy}\n aria-labelledby={children ? labelId : undefined}\n aria-label={!children ? ariaLabel : undefined}\n tabIndex={disabled ? -1 : 0}\n onKeyDown={handleKeyDown}\n data-testid=\"checkbox\"\n >\n {/* Custom checkbox visual */}\n <Box\n width={checkboxSizeMap[size]}\n height={checkboxSizeMap[size]}\n backgroundColor={getCheckboxBgColor()}\n borderColor={getBorderColor()}\n borderWidth={2}\n borderRadius={2}\n alignItems=\"center\"\n justifyContent=\"center\"\n flexShrink={0}\n hoverStyle={\n !disabled\n ? {\n backgroundColor: isCheckedOrIndeterminate\n ? checkColors.bgHover\n : faintColors.bgHover,\n borderColor:\n isError && !isCheckedOrIndeterminate\n ? borderColors.alert\n : isCheckedOrIndeterminate\n ? checkColors.bgHover\n : faintColors.borderHover,\n }\n : undefined\n }\n data-testid=\"checkbox__box\"\n >\n {isCheckedOrIndeterminate &&\n (indeterminate ? (\n <Minus size={iconSizeMap[size]} color={getIconColor()} />\n ) : (\n <Check size={iconSizeMap[size]} color={getIconColor()} />\n ))}\n </Box>\n\n {/* Label, Description & Error Message */}\n {hasTexts && (\n <Box\n flexDirection=\"column\"\n alignItems=\"flex-start\"\n gap={textGapMap[size]}\n >\n {children && (\n <Text\n id={labelId}\n color={getLabelColor()}\n fontSize={fontSizeMap[size]}\n lineHeight={lineHeightMap[size]}\n fontWeight={400}\n data-testid=\"checkbox__label\"\n >\n {children}\n </Text>\n )}\n {description && (\n <Text\n id={descriptionId}\n color={getDescriptionColor()}\n fontSize={descriptionFontSizeMap[size]}\n lineHeight={descriptionLineHeightMap[size]}\n data-testid=\"checkbox__description\"\n >\n {description}\n </Text>\n )}\n {isShowErrorMessage && (\n <Text\n id={errorId}\n role=\"alert\"\n color={getErrorMessageColor()}\n fontSize={descriptionFontSizeMap[size]}\n lineHeight={descriptionLineHeightMap[size]}\n data-testid=\"checkbox__error\"\n >\n {errorMessage}\n </Text>\n )}\n </Box>\n )}\n </Box>\n );\n }\n);\n\nCheckbox.displayName = \"Checkbox\";\n","import React from \"react\";\nimport {\n View,\n Pressable,\n Image,\n ViewStyle,\n ImageStyle,\n DimensionValue,\n AnimatableNumericValue,\n} from \"react-native\";\nimport { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Box: React.FC<BoxProps> = ({\n children,\n onPress,\n onLayout,\n onMoveShouldSetResponder,\n onResponderGrant,\n onResponderMove,\n onResponderRelease,\n onResponderTerminate,\n backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius,\n borderStyle,\n height,\n padding,\n paddingHorizontal,\n paddingVertical,\n margin,\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n flexDirection,\n alignItems,\n justifyContent,\n position,\n top,\n bottom,\n left,\n right,\n width,\n minWidth,\n minHeight,\n maxWidth,\n maxHeight,\n flex,\n overflow,\n zIndex,\n hoverStyle,\n pressStyle,\n style,\n \"data-testid\": dataTestId,\n testID,\n as,\n src,\n alt,\n ...rest\n}) => {\n const getContainerStyle = (pressed?: boolean): ViewStyle => ({\n backgroundColor:\n pressed && pressStyle?.backgroundColor\n ? pressStyle.backgroundColor\n : backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius: borderRadius as AnimatableNumericValue,\n borderStyle: borderStyle as ViewStyle[\"borderStyle\"],\n overflow,\n zIndex,\n height: height as DimensionValue,\n width: width as DimensionValue,\n minWidth: minWidth as DimensionValue,\n minHeight: minHeight as DimensionValue,\n maxWidth: maxWidth as DimensionValue,\n maxHeight: maxHeight as DimensionValue,\n padding: padding as DimensionValue,\n paddingHorizontal: paddingHorizontal as DimensionValue,\n paddingVertical: paddingVertical as DimensionValue,\n margin: margin as DimensionValue,\n marginTop: marginTop as DimensionValue,\n marginBottom: marginBottom as DimensionValue,\n marginLeft: marginLeft as DimensionValue,\n marginRight: marginRight as DimensionValue,\n flexDirection,\n alignItems,\n justifyContent,\n position: position as ViewStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n flex,\n ...(style as ViewStyle),\n });\n\n const finalTestID = dataTestId || testID;\n\n // Destructure and drop web-only props from rest before passing to RN components\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const {\n role,\n tabIndex,\n onKeyDown,\n onKeyUp,\n \"aria-label\": _ariaLabel,\n \"aria-labelledby\": _ariaLabelledBy,\n \"aria-current\": _ariaCurrent,\n \"aria-disabled\": _ariaDisabled,\n \"aria-live\": _ariaLive,\n className,\n \"data-testid\": _dataTestId,\n ...nativeRest\n } = rest as Record<string, unknown>;\n\n // Handle as=\"img\" for React Native\n if (as === \"img\" && src) {\n const imageStyle: ImageStyle = {\n width: width as DimensionValue,\n height: height as DimensionValue,\n borderRadius: borderRadius as number,\n position: position as ImageStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n ...(style as ImageStyle),\n };\n\n return (\n <Image\n source={{ uri: src }}\n style={imageStyle}\n testID={finalTestID}\n resizeMode=\"cover\"\n {...nativeRest}\n />\n );\n }\n\n if (onPress) {\n return (\n <Pressable\n onPress={onPress}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n style={({ pressed }) => getContainerStyle(pressed)}\n testID={finalTestID}\n {...nativeRest}\n >\n {children}\n </Pressable>\n );\n }\n\n return (\n <View\n style={getContainerStyle()}\n testID={finalTestID}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n {...nativeRest}\n >\n {children}\n </View>\n );\n};\n","import React from \"react\";\nimport {\n Text as RNText,\n TextStyle,\n AccessibilityRole,\n StyleSheet,\n} from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst roleMap: Record<string, AccessibilityRole> = {\n alert: \"alert\",\n heading: \"header\",\n button: \"button\",\n link: \"link\",\n text: \"text\",\n};\n\nconst parseNumericValue = (\n value: string | number | undefined\n): number | undefined => {\n if (value === undefined) return undefined;\n if (typeof value === \"number\") return value;\n const parsed = parseFloat(value);\n return isNaN(parsed) ? undefined : parsed;\n};\n\nexport const Text: React.FC<TextProps> = ({\n children,\n color,\n fontSize,\n fontWeight,\n fontFamily,\n textAlign,\n lineHeight,\n numberOfLines,\n id,\n role,\n style: styleProp,\n ...props\n}) => {\n let resolvedFontFamily = fontFamily\n ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n : undefined;\n\n if (\n resolvedFontFamily === \"Pilat Wide\" ||\n resolvedFontFamily === \"Pilat Wide Bold\" ||\n resolvedFontFamily === \"Aktiv Grotesk\"\n ) {\n resolvedFontFamily = undefined;\n }\n\n const incomingStyle = StyleSheet.flatten(styleProp) as TextStyle | undefined;\n\n const baseStyle: TextStyle = {\n color: color ?? incomingStyle?.color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n fontWeight: fontWeight as TextStyle[\"fontWeight\"],\n fontFamily: resolvedFontFamily,\n textDecorationLine: props.textDecoration as TextStyle[\"textDecorationLine\"],\n textAlign: textAlign ?? incomingStyle?.textAlign,\n lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),\n marginTop: parseNumericValue(\n incomingStyle?.marginTop as number | string | undefined\n ),\n marginBottom: parseNumericValue(\n incomingStyle?.marginBottom as number | string | undefined\n ),\n };\n\n const accessibilityRole = role ? roleMap[role] : undefined;\n\n return (\n <RNText\n style={baseStyle}\n numberOfLines={numberOfLines}\n testID={id}\n accessibilityRole={accessibilityRole}\n >\n {children}\n </RNText>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAKO;;;ACJP,0BAQO;AA2ID;AAxIC,IAAM,MAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,oBAAoB,CAAC,aAAkC;AAAA,IAC3D,iBACE,WAAW,YAAY,kBACnB,WAAW,kBACX;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAI;AAAA,EACN;AAEA,QAAM,cAAc,cAAc;AAIlC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb;AAAA,IACA,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAI;AAGJ,MAAI,OAAO,SAAS,KAAK;AACvB,UAAM,aAAyB;AAAA,MAC7B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAI;AAAA,IACN;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ,EAAE,KAAK,IAAI;AAAA,QACnB,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,YAAW;AAAA,QACV,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AAEA,MAAI,SAAS;AACX,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO,CAAC,EAAE,QAAQ,MAAM,kBAAkB,OAAO;AAAA,QACjD,QAAQ;AAAA,QACP,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,kBAAkB;AAAA,MACzB,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;;;AC/LA,IAAAA,uBAKO;AAmEH,IAAAC,sBAAA;AAhEJ,IAAM,UAA6C;AAAA,EACjD,OAAO;AAAA,EACP,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,MAAM;AACR;AAEA,IAAM,oBAAoB,CACxB,UACuB;AACvB,MAAI,UAAU,OAAW,QAAO;AAChC,MAAI,OAAO,UAAU,SAAU,QAAO;AACtC,QAAM,SAAS,WAAW,KAAK;AAC/B,SAAO,MAAM,MAAM,IAAI,SAAY;AACrC;AAEO,IAAM,OAA4B,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,MAAM;AACJ,MAAI,qBAAqB,aACrB,WAAW,MAAM,GAAG,EAAE,CAAC,EAAE,QAAQ,SAAS,EAAE,EAAE,KAAK,IACnD;AAEJ,MACE,uBAAuB,gBACvB,uBAAuB,qBACvB,uBAAuB,iBACvB;AACA,yBAAqB;AAAA,EACvB;AAEA,QAAM,gBAAgB,gCAAW,QAAQ,SAAS;AAElD,QAAM,YAAuB;AAAA,IAC3B,OAAO,SAAS,eAAe;AAAA,IAC/B,UAAU,OAAO,aAAa,WAAW,WAAW;AAAA,IACpD;AAAA,IACA,YAAY;AAAA,IACZ,oBAAoB,MAAM;AAAA,IAC1B,WAAW,aAAa,eAAe;AAAA,IACvC,YAAY,kBAAkB,cAAc,eAAe,UAAU;AAAA,IACrE,WAAW;AAAA,MACT,eAAe;AAAA,IACjB;AAAA,IACA,cAAc;AAAA,MACZ,eAAe;AAAA,IACjB;AAAA,EACF;AAEA,QAAM,oBAAoB,OAAO,QAAQ,IAAI,IAAI;AAEjD,SACE;AAAA,IAAC,qBAAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;;;AF1EA,sBAIO;AACP,uBAA6B;AAgUf,IAAAC,sBAAA;AAtRd,IAAM,cAA6C;AAAA,EACjD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGA,IAAM,kBAAiD;AAAA,EACrD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGA,IAAM,cAA6C;AAAA,EACjD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGA,IAAM,aAA4C;AAAA,EAChD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGA,IAAM,cAA6C;AAAA,EACjD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGA,IAAM,gBAA+C;AAAA,EACnD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGA,IAAM,yBAAwD;AAAA,EAC5D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGA,IAAM,2BAA0D;AAAA,EAC9D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,IAAM,eAAW;AAAA,EACtB,SAASC,UACP;AAAA,IACE;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,IAAI;AAAA,IACJ,cAAc;AAAA,IACd;AAAA,IACA;AAAA,EACF,GACA,KACA;AACA,UAAM,EAAE,MAAM,QAAI,kCAAiB,EAAE,WAAW,oBAAoB,CAAC;AACrE,UAAM,mBAAe,qBAAuB,IAAI;AAGhD,UAAM,CAAC,iBAAiB,kBAAkB,QAAI,uBAAS,KAAK;AAG5D,UAAM,YAAQ,uBAAM;AACpB,UAAM,SAAS,MAAM,QAAQ,MAAM,EAAE;AACrC,UAAM,aAAa,cAAc,YAAY,MAAM;AACnD,UAAM,UAAU,GAAG,UAAU;AAC7B,UAAM,gBAAgB,GAAG,UAAU;AACnC,UAAM,UAAU,GAAG,UAAU;AAG7B,UAAM,eAAe,YAAY;AACjC,UAAM,YAAY,eAAe,UAAU;AAG3C;AAAA,MACE;AAAA,MACA,OAAO;AAAA,QACL,OAAO,MAAM,aAAa,SAAS,MAAM;AAAA,QACzC,MAAM,MAAM,aAAa,SAAS,KAAK;AAAA,MACzC;AAAA,MACA,CAAC;AAAA,IACH;AAGA,UAAM,eAAe,MAAM;AACzB,UAAI,SAAU;AAGd,YAAM,aAAa,gBAAgB,OAAO,CAAC;AAE3C,UAAI,CAAC,cAAc;AACjB,2BAAmB,UAAU;AAAA,MAC/B;AAEA,iBAAW;AAAA,QACT,QAAQ;AAAA,UACN,SAAS;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH;AAGA,UAAM,gBAAgB,CAAC,UAA+B;AACpD,YAAM,MAAM,MAAM;AAElB,YAAM,UAAU,QAAQ,OAAO,QAAQ,cAAc,QAAQ;AAC7D,UAAI,WAAW,QAAQ,SAAS;AAC9B,cAAM,eAAe;AACrB,qBAAa;AAAA,MACf;AAAA,IACF;AAEA,UAAM,UAAU,CAAC,EAAE,gBAAgB;AACnC,UAAM,WAAW,CAAC,CAAC,YAAY,CAAC,CAAC;AACjC,UAAM,qBAAqB,CAAC,CAAC,gBAAgB;AAC7C,UAAM,2BAA2B,aAAa;AAI9C,UAAM,uBAAiC,CAAC;AACxC,QAAI,YAAa,sBAAqB,KAAK,aAAa;AACxD,QAAI,mBAAoB,sBAAqB,KAAK,OAAO;AACzD,UAAM,kBACJ,qBAAqB,SAAS,IAC1B,qBAAqB,KAAK,GAAG,IAC7B;AAGN,UAAM,cAAc,MAAM,OAAO,QAAQ;AACzC,UAAM,cAAc,MAAM,OAAO,QAAQ;AACzC,UAAM,aAAa,MAAM,OAAO,QAAQ;AACxC,UAAM,gBAAgB,MAAM,OAAO;AACnC,UAAM,eAAe,MAAM,OAAO;AAKlC,UAAM,qBAAqB,MAAM;AAC/B,UAAI,UAAU;AACZ,eAAO,YAAY;AAAA,MACrB;AACA,UAAI,0BAA0B;AAC5B,eAAO,YAAY;AAAA,MACrB;AACA,aAAO,YAAY;AAAA,IACrB;AAKA,UAAM,iBAAiB,MAAM;AAC3B,UAAI,WAAW,CAAC,0BAA0B;AACxC,eAAO,aAAa;AAAA,MACtB;AACA,UAAI,4BAA4B,CAAC,UAAU;AACzC,eAAO,YAAY;AAAA,MACrB;AACA,aAAO,YAAY;AAAA,IACrB;AAKA,UAAM,gBAAgB,MAAM;AAC1B,UAAI,SAAU,QAAO,WAAW;AAChC,aAAO,WAAW;AAAA,IACpB;AAKA,UAAM,sBAAsB,MAAM;AAChC,UAAI,SAAU,QAAO,WAAW;AAChC,aAAO,cAAc;AAAA,IACvB;AAKA,UAAM,uBAAuB,MAAM;AACjC,aAAO,cAAc,MAAM;AAAA,IAC7B;AAKA,UAAM,eAAe,MAAM;AACzB,UAAI,SAAU,QAAO,WAAW;AAChC,aAAO,YAAY;AAAA,IACrB;AAGA,UAAM,iBAAiB,MAAkC;AACvD,UAAI,cAAe,QAAO;AAC1B,aAAO,YAAY,SAAS;AAAA,IAC9B;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ,KAAK;AAAA,QACL,eAAc;AAAA,QACd,YAAW;AAAA,QACX,KAAK,YAAY,IAAI;AAAA,QACrB,SAAS;AAAA,QACT;AAAA,QACA,MAAK;AAAA,QACL,gBAAc,eAAe;AAAA,QAC7B,iBAAe,YAAY;AAAA,QAC3B,gBAAc,WAAW;AAAA,QACzB,oBAAkB;AAAA,QAClB,mBAAiB,WAAW,UAAU;AAAA,QACtC,cAAY,CAAC,WAAW,YAAY;AAAA,QACpC,UAAU,WAAW,KAAK;AAAA,QAC1B,WAAW;AAAA,QACX,eAAY;AAAA,QAGZ;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,OAAO,gBAAgB,IAAI;AAAA,cAC3B,QAAQ,gBAAgB,IAAI;AAAA,cAC5B,iBAAiB,mBAAmB;AAAA,cACpC,aAAa,eAAe;AAAA,cAC5B,aAAa;AAAA,cACb,cAAc;AAAA,cACd,YAAW;AAAA,cACX,gBAAe;AAAA,cACf,YAAY;AAAA,cACZ,YACE,CAAC,WACG;AAAA,gBACE,iBAAiB,2BACb,YAAY,UACZ,YAAY;AAAA,gBAChB,aACE,WAAW,CAAC,2BACR,aAAa,QACb,2BACE,YAAY,UACZ,YAAY;AAAA,cACtB,IACA;AAAA,cAEN,eAAY;AAAA,cAEX,uCACE,gBACC,6CAAC,0BAAM,MAAM,YAAY,IAAI,GAAG,OAAO,aAAa,GAAG,IAEvD,6CAAC,0BAAM,MAAM,YAAY,IAAI,GAAG,OAAO,aAAa,GAAG;AAAA;AAAA,UAE7D;AAAA,UAGC,YACC;AAAA,YAAC;AAAA;AAAA,cACC,eAAc;AAAA,cACd,YAAW;AAAA,cACX,KAAK,WAAW,IAAI;AAAA,cAEnB;AAAA,4BACC;AAAA,kBAAC;AAAA;AAAA,oBACC,IAAI;AAAA,oBACJ,OAAO,cAAc;AAAA,oBACrB,UAAU,YAAY,IAAI;AAAA,oBAC1B,YAAY,cAAc,IAAI;AAAA,oBAC9B,YAAY;AAAA,oBACZ,eAAY;AAAA,oBAEX;AAAA;AAAA,gBACH;AAAA,gBAED,eACC;AAAA,kBAAC;AAAA;AAAA,oBACC,IAAI;AAAA,oBACJ,OAAO,oBAAoB;AAAA,oBAC3B,UAAU,uBAAuB,IAAI;AAAA,oBACrC,YAAY,yBAAyB,IAAI;AAAA,oBACzC,eAAY;AAAA,oBAEX;AAAA;AAAA,gBACH;AAAA,gBAED,sBACC;AAAA,kBAAC;AAAA;AAAA,oBACC,IAAI;AAAA,oBACJ,MAAK;AAAA,oBACL,OAAO,qBAAqB;AAAA,oBAC5B,UAAU,uBAAuB,IAAI;AAAA,oBACrC,YAAY,yBAAyB,IAAI;AAAA,oBACzC,eAAY;AAAA,oBAEX;AAAA;AAAA,gBACH;AAAA;AAAA;AAAA,UAEJ;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,SAAS,cAAc;","names":["import_react_native","import_jsx_runtime","RNText","import_jsx_runtime","Checkbox"]}
1
+ {"version":3,"sources":["../../src/index.tsx","../../src/Checkbox.tsx","../../../../foundation/primitives-native/src/Box.tsx","../../../../foundation/primitives-native/src/Text.tsx"],"sourcesContent":["export * from \"./Checkbox\";\n","import React, {\n forwardRef,\n useRef,\n useState,\n useImperativeHandle,\n} from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text } from \"@xsolla/xui-primitives\";\nimport {\n useResolvedTheme,\n useId,\n type ThemeOverrideProps,\n} from \"@xsolla/xui-core\";\ntype ComponentSize = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\n// Inline 12×12 glyphs so stroke thickness scales correctly at every checkbox size.\nconst CheckIcon = ({ size, color }: { size: number; color: string }) => (\n <svg\n width={size}\n height={size}\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M10.6699 4.2959L6.00293 8.96387C5.72637 9.24043 5.27761 9.24031 5.00098 8.96387L2 5.96289L3.2959 4.66699L5.50098 6.87207L9.37402 3L10.6699 4.2959Z\"\n fill={color}\n />\n </svg>\n);\n\nconst MinusIcon = ({ size, color }: { size: number; color: string }) => (\n <svg\n width={size}\n height={size}\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M11 5V7H1V5H11Z\" fill={color} />\n </svg>\n);\n\nexport interface CheckboxProps extends ThemeOverrideProps {\n /** Content/label to display next to the checkbox */\n children?: React.ReactNode;\n /** Size of the checkbox */\n size?: ComponentSize;\n /** Whether the checkbox is checked */\n checked?: boolean;\n /** The indeterminate checked state of checkbox */\n indeterminate?: boolean;\n /** Additional descriptive text below the label */\n description?: string;\n /** Error message to display (also highlights control as invalid) */\n errorMessage?: string;\n /** Highlight control as invalid without message */\n error?: boolean;\n /** Whether the checkbox is disabled */\n disabled?: boolean;\n /** Name attribute for the checkbox */\n name?: string;\n /** Value attribute for the checkbox */\n value?: string;\n /** Callback when the checkbox value changes */\n onChange?: (e: {\n target: { checked: boolean; name?: string; value?: string };\n }) => void;\n /** Unique identifier for the checkbox */\n id?: string;\n /** Accessible label for screen readers when no visible label */\n \"aria-label\"?: string;\n}\n\n// Ref type that works for both web and native\nexport interface CheckboxRef {\n focus: () => void;\n blur: () => void;\n}\n\n// Icon sizes (Figma: checkbox/{size}/icon/size; md inferred as 12 — linear pattern 10/12/14/16)\nconst iconSizeMap: Record<ComponentSize, number> = {\n sm: 10,\n md: 12,\n lg: 14,\n xl: 16,\n};\n\n// Checkbox box sizes (Figma: checkbox/{size}/frame/size)\nconst checkboxSizeMap: Record<ComponentSize, number> = {\n sm: 16,\n md: 18,\n lg: 20,\n xl: 24,\n};\n\n// Label gap sizes (Figma: checkbox/{size}/gap)\nconst labelGapMap: Record<ComponentSize, number> = {\n sm: 6,\n md: 8,\n lg: 10,\n xl: 12,\n};\n\n// Text gap sizes (gap between label and description/error)\nconst textGapMap: Record<ComponentSize, number> = {\n sm: 0,\n md: 2,\n lg: 2,\n xl: 4,\n};\n\n// Label font-size (Figma: checkbox/{size}/typography/font-size)\nconst fontSizeMap: Record<ComponentSize, number> = {\n sm: 14,\n md: 16,\n lg: 18,\n xl: 20,\n};\n\n// Label line-height (Figma: checkbox/{size}/typography/line-height)\nconst lineHeightMap: Record<ComponentSize, number> = {\n sm: 16,\n md: 18,\n lg: 20,\n xl: 22,\n};\n\n// Description font-size (Figma: field-group/{size}/typography/font-size)\nconst descriptionFontSizeMap: Record<ComponentSize, number> = {\n sm: 12,\n md: 14,\n lg: 16,\n xl: 18,\n};\n\n// Description line-height (Figma: field-group/{size}/typography/line-height)\nconst descriptionLineHeightMap: Record<ComponentSize, number> = {\n sm: 14,\n md: 16,\n lg: 18,\n xl: 20,\n};\n\nexport const Checkbox = forwardRef<CheckboxRef, CheckboxProps>(\n function Checkbox(\n {\n children,\n size = \"md\",\n checked,\n indeterminate = false,\n description,\n errorMessage,\n error,\n disabled,\n name,\n value,\n onChange,\n id: providedId,\n \"aria-label\": ariaLabel,\n themeMode,\n themeProductContext,\n },\n ref\n ) {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const containerRef = useRef<HTMLDivElement>(null);\n\n // Internal state for uncontrolled mode\n const [internalChecked, setInternalChecked] = useState(false);\n\n // Generate unique IDs for accessibility\n const rawId = useId();\n const safeId = rawId.replace(/:/g, \"\");\n const checkboxId = providedId || `checkbox-${safeId}`;\n const labelId = `${checkboxId}-label`;\n const descriptionId = `${checkboxId}-description`;\n const errorId = `${checkboxId}-error`;\n\n // Determine if controlled or uncontrolled\n const isControlled = checked !== undefined;\n const isChecked = isControlled ? checked : internalChecked;\n\n // Expose focus/blur methods via ref\n useImperativeHandle(\n ref,\n () => ({\n focus: () => containerRef.current?.focus(),\n blur: () => containerRef.current?.blur(),\n }),\n []\n );\n\n // Handle toggle for both controlled and uncontrolled modes\n const handleToggle = () => {\n if (disabled) return;\n\n // If indeterminate, always set to checked (true) for predictable UX\n const newChecked = indeterminate ? true : !isChecked;\n\n if (!isControlled) {\n setInternalChecked(newChecked);\n }\n\n onChange?.({\n target: {\n checked: newChecked,\n name,\n value,\n },\n });\n };\n\n // Handle keyboard interaction\n const handleKeyDown = (event: React.KeyboardEvent) => {\n const key = event.key;\n // Normalize Space key detection across browsers\n const isSpace = key === \" \" || key === \"Spacebar\" || key === \"Space\";\n if (isSpace || key === \"Enter\") {\n event.preventDefault();\n handleToggle();\n }\n };\n\n const isError = !!(errorMessage || error);\n const hasTexts = !!children || !!description;\n const isShowErrorMessage = !!errorMessage && hasTexts;\n const isCheckedOrIndeterminate = isChecked || indeterminate;\n\n // Build aria-describedby value\n // Only reference IDs of elements that are actually rendered\n const ariaDescribedByParts: string[] = [];\n if (description) ariaDescribedByParts.push(descriptionId);\n if (isShowErrorMessage) ariaDescribedByParts.push(errorId);\n const ariaDescribedBy =\n ariaDescribedByParts.length > 0\n ? ariaDescribedByParts.join(\" \")\n : undefined;\n\n // Resolve Colors from Theme\n const checkColors = theme.colors.control.check;\n const faintColors = theme.colors.control.faint;\n const textColors = theme.colors.control.text;\n const contentColors = theme.colors.content;\n const borderColors = theme.colors.border;\n\n /**\n * Get checkbox background color based on state\n */\n const getCheckboxBgColor = () => {\n if (disabled) {\n return checkColors.bgDisable;\n }\n if (isCheckedOrIndeterminate) {\n return checkColors.bg;\n }\n return faintColors.bg;\n };\n\n /**\n * Get checkbox border color\n */\n const getBorderColor = () => {\n if (isError) {\n return borderColors.alert;\n }\n if (isCheckedOrIndeterminate && !disabled) {\n return checkColors.border;\n }\n return faintColors.border;\n };\n\n /**\n * Get label text color\n */\n const getLabelColor = () => {\n if (disabled) return textColors.disable;\n return textColors.primary;\n };\n\n /**\n * Get description text color\n */\n const getDescriptionColor = () => {\n if (disabled) return textColors.disable;\n return contentColors.tertiary;\n };\n\n /**\n * Get error message text color\n */\n const getErrorMessageColor = () => {\n return contentColors.alert.primary;\n };\n\n /**\n * Get checkmark/minus icon color\n */\n const getIconColor = () => {\n if (disabled) return textColors.disable;\n return checkColors.icon;\n };\n\n // Determine aria-checked value\n const getAriaChecked = (): \"true\" | \"false\" | \"mixed\" => {\n if (indeterminate) return \"mixed\";\n return isChecked ? \"true\" : \"false\";\n };\n\n return (\n <Box\n id={checkboxId}\n ref={containerRef}\n flexDirection=\"row\"\n alignItems=\"flex-start\"\n gap={labelGapMap[size]}\n disabled={disabled}\n role=\"checkbox\"\n aria-checked={getAriaChecked()}\n aria-disabled={disabled || undefined}\n aria-invalid={isError || undefined}\n aria-describedby={ariaDescribedBy}\n aria-labelledby={children ? labelId : undefined}\n aria-label={!children ? ariaLabel : undefined}\n tabIndex={disabled ? -1 : 0}\n onKeyDown={handleKeyDown}\n focusStyle={{\n outlineColor: theme.colors.border.brand,\n outlineWidth: 2,\n outlineOffset: 2,\n outlineStyle: \"solid\",\n }}\n data-testid=\"checkbox\"\n >\n {/* Custom checkbox visual */}\n <Box\n width={checkboxSizeMap[size]}\n height={checkboxSizeMap[size]}\n backgroundColor={getCheckboxBgColor()}\n borderColor={getBorderColor()}\n borderWidth={1}\n borderRadius={4}\n alignItems=\"center\"\n justifyContent=\"center\"\n flexShrink={0}\n onPress={handleToggle}\n cursor={disabled ? \"not-allowed\" : \"pointer\"}\n hoverStyle={\n !disabled\n ? {\n backgroundColor: isCheckedOrIndeterminate\n ? checkColors.bgHover\n : faintColors.bgHover,\n borderColor: isError\n ? borderColors.alert\n : isCheckedOrIndeterminate\n ? checkColors.borderHover\n : faintColors.borderHover,\n }\n : undefined\n }\n data-testid=\"checkbox__box\"\n >\n {isCheckedOrIndeterminate &&\n (indeterminate ? (\n <MinusIcon size={iconSizeMap[size]} color={getIconColor()} />\n ) : (\n <CheckIcon size={iconSizeMap[size]} color={getIconColor()} />\n ))}\n </Box>\n\n {/* Label, Description & Error Message */}\n {hasTexts && (\n <Box\n flexDirection=\"column\"\n alignItems=\"flex-start\"\n gap={textGapMap[size]}\n >\n {children && (\n <Box\n onPress={handleToggle}\n cursor={disabled ? \"not-allowed\" : \"pointer\"}\n >\n <Text\n id={labelId}\n color={getLabelColor()}\n fontSize={fontSizeMap[size]}\n lineHeight={lineHeightMap[size]}\n fontWeight={400}\n data-testid=\"checkbox__label\"\n >\n {children}\n </Text>\n </Box>\n )}\n {description && (\n <Text\n id={descriptionId}\n color={getDescriptionColor()}\n fontSize={descriptionFontSizeMap[size]}\n lineHeight={descriptionLineHeightMap[size]}\n data-testid=\"checkbox__description\"\n >\n {description}\n </Text>\n )}\n {isShowErrorMessage && (\n <Text\n id={errorId}\n role=\"alert\"\n color={getErrorMessageColor()}\n fontSize={descriptionFontSizeMap[size]}\n lineHeight={descriptionLineHeightMap[size]}\n data-testid=\"checkbox__error\"\n >\n {errorMessage}\n </Text>\n )}\n </Box>\n )}\n </Box>\n );\n }\n);\n\nCheckbox.displayName = \"Checkbox\";\n","import React from \"react\";\nimport {\n View,\n Pressable,\n Image,\n ViewStyle,\n ImageStyle,\n DimensionValue,\n AnimatableNumericValue,\n} from \"react-native\";\nimport { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Box: React.FC<BoxProps> = ({\n children,\n onPress,\n onLayout,\n onMoveShouldSetResponder,\n onResponderGrant,\n onResponderMove,\n onResponderRelease,\n onResponderTerminate,\n backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius,\n borderStyle,\n height,\n padding,\n paddingHorizontal,\n paddingVertical,\n margin,\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n flexDirection,\n alignItems,\n justifyContent,\n position,\n top,\n bottom,\n left,\n right,\n width,\n minWidth,\n minHeight,\n maxWidth,\n maxHeight,\n flex,\n overflow,\n zIndex,\n hoverStyle,\n pressStyle,\n style,\n \"data-testid\": dataTestId,\n testID,\n as,\n src,\n alt,\n ...rest\n}) => {\n const getContainerStyle = (pressed?: boolean): ViewStyle => ({\n backgroundColor:\n pressed && pressStyle?.backgroundColor\n ? pressStyle.backgroundColor\n : backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius: borderRadius as AnimatableNumericValue,\n borderStyle: borderStyle as ViewStyle[\"borderStyle\"],\n overflow,\n zIndex,\n height: height as DimensionValue,\n width: width as DimensionValue,\n minWidth: minWidth as DimensionValue,\n minHeight: minHeight as DimensionValue,\n maxWidth: maxWidth as DimensionValue,\n maxHeight: maxHeight as DimensionValue,\n padding: padding as DimensionValue,\n paddingHorizontal: paddingHorizontal as DimensionValue,\n paddingVertical: paddingVertical as DimensionValue,\n margin: margin as DimensionValue,\n marginTop: marginTop as DimensionValue,\n marginBottom: marginBottom as DimensionValue,\n marginLeft: marginLeft as DimensionValue,\n marginRight: marginRight as DimensionValue,\n flexDirection,\n alignItems,\n justifyContent,\n position: position as ViewStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n flex,\n ...(style as ViewStyle),\n });\n\n const finalTestID = dataTestId || testID;\n\n // Destructure and drop web-only props from rest before passing to RN components\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const {\n role,\n tabIndex,\n onKeyDown,\n onKeyUp,\n \"aria-label\": _ariaLabel,\n \"aria-labelledby\": _ariaLabelledBy,\n \"aria-current\": _ariaCurrent,\n \"aria-disabled\": _ariaDisabled,\n \"aria-live\": _ariaLive,\n className,\n \"data-testid\": _dataTestId,\n ...nativeRest\n } = rest as Record<string, unknown>;\n\n // Handle as=\"img\" for React Native\n if (as === \"img\" && src) {\n const imageStyle: ImageStyle = {\n width: width as DimensionValue,\n height: height as DimensionValue,\n borderRadius: borderRadius as number,\n position: position as ImageStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n ...(style as ImageStyle),\n };\n\n return (\n <Image\n source={{ uri: src }}\n style={imageStyle}\n testID={finalTestID}\n resizeMode=\"cover\"\n {...nativeRest}\n />\n );\n }\n\n if (onPress) {\n return (\n <Pressable\n onPress={onPress}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n style={({ pressed }) => getContainerStyle(pressed)}\n testID={finalTestID}\n {...nativeRest}\n >\n {children}\n </Pressable>\n );\n }\n\n return (\n <View\n style={getContainerStyle()}\n testID={finalTestID}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n {...nativeRest}\n >\n {children}\n </View>\n );\n};\n","import React from \"react\";\nimport {\n Text as RNText,\n TextStyle,\n AccessibilityRole,\n StyleSheet,\n} from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst roleMap: Record<string, AccessibilityRole> = {\n alert: \"alert\",\n heading: \"header\",\n button: \"button\",\n link: \"link\",\n text: \"text\",\n};\n\nconst parseNumericValue = (\n value: string | number | undefined\n): number | undefined => {\n if (value === undefined) return undefined;\n if (typeof value === \"number\") return value;\n const parsed = parseFloat(value);\n return isNaN(parsed) ? undefined : parsed;\n};\n\nexport const Text: React.FC<TextProps> = ({\n children,\n color,\n fontSize,\n fontWeight,\n fontFamily,\n textAlign,\n lineHeight,\n numberOfLines,\n id,\n role,\n style: styleProp,\n ...props\n}) => {\n let resolvedFontFamily = fontFamily\n ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n : undefined;\n\n if (\n resolvedFontFamily === \"Pilat Wide\" ||\n resolvedFontFamily === \"Pilat Wide Bold\" ||\n resolvedFontFamily === \"Aktiv Grotesk\"\n ) {\n resolvedFontFamily = undefined;\n }\n\n const incomingStyle = StyleSheet.flatten(styleProp) as TextStyle | undefined;\n\n const baseStyle: TextStyle = {\n color: color ?? incomingStyle?.color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n fontWeight: fontWeight as TextStyle[\"fontWeight\"],\n fontFamily: resolvedFontFamily,\n textDecorationLine: props.textDecoration as TextStyle[\"textDecorationLine\"],\n textAlign: textAlign ?? incomingStyle?.textAlign,\n lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),\n marginTop: parseNumericValue(\n incomingStyle?.marginTop as number | string | undefined\n ),\n marginBottom: parseNumericValue(\n incomingStyle?.marginBottom as number | string | undefined\n ),\n };\n\n const accessibilityRole = role ? roleMap[role] : undefined;\n\n return (\n <RNText\n style={baseStyle}\n numberOfLines={numberOfLines}\n testID={id}\n accessibilityRole={accessibilityRole}\n >\n {children}\n </RNText>\n );\n};\n"],"mappings":"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","names":["import_react_native","import_jsx_runtime","RNText","import_jsx_runtime","Checkbox"]}
package/native/index.mjs CHANGED
@@ -6,7 +6,7 @@ import {
6
6
  useImperativeHandle
7
7
  } from "react";
8
8
 
9
- // ../primitives-native/src/Box.tsx
9
+ // ../../foundation/primitives-native/src/Box.tsx
10
10
  import {
11
11
  View,
12
12
  Pressable,
@@ -184,7 +184,7 @@ var Box = ({
184
184
  );
185
185
  };
186
186
 
187
- // ../primitives-native/src/Text.tsx
187
+ // ../../foundation/primitives-native/src/Text.tsx
188
188
  import {
189
189
  Text as RNText,
190
190
  StyleSheet
@@ -255,22 +255,49 @@ import {
255
255
  useResolvedTheme,
256
256
  useId
257
257
  } from "@xsolla/xui-core";
258
- import { Check, Minus } from "@xsolla/xui-icons";
259
258
  import { jsx as jsx3, jsxs } from "react/jsx-runtime";
259
+ var CheckIcon = ({ size, color }) => /* @__PURE__ */ jsx3(
260
+ "svg",
261
+ {
262
+ width: size,
263
+ height: size,
264
+ viewBox: "0 0 12 12",
265
+ fill: "none",
266
+ xmlns: "http://www.w3.org/2000/svg",
267
+ children: /* @__PURE__ */ jsx3(
268
+ "path",
269
+ {
270
+ d: "M10.6699 4.2959L6.00293 8.96387C5.72637 9.24043 5.27761 9.24031 5.00098 8.96387L2 5.96289L3.2959 4.66699L5.50098 6.87207L9.37402 3L10.6699 4.2959Z",
271
+ fill: color
272
+ }
273
+ )
274
+ }
275
+ );
276
+ var MinusIcon = ({ size, color }) => /* @__PURE__ */ jsx3(
277
+ "svg",
278
+ {
279
+ width: size,
280
+ height: size,
281
+ viewBox: "0 0 12 12",
282
+ fill: "none",
283
+ xmlns: "http://www.w3.org/2000/svg",
284
+ children: /* @__PURE__ */ jsx3("path", { d: "M11 5V7H1V5H11Z", fill: color })
285
+ }
286
+ );
260
287
  var iconSizeMap = {
261
- sm: 12,
262
- md: 14,
263
- lg: 16,
264
- xl: 18
288
+ sm: 10,
289
+ md: 12,
290
+ lg: 14,
291
+ xl: 16
265
292
  };
266
293
  var checkboxSizeMap = {
267
294
  sm: 16,
268
295
  md: 18,
269
296
  lg: 20,
270
- xl: 22
297
+ xl: 24
271
298
  };
272
299
  var labelGapMap = {
273
- sm: 8,
300
+ sm: 6,
274
301
  md: 8,
275
302
  lg: 10,
276
303
  xl: 12
@@ -285,7 +312,7 @@ var fontSizeMap = {
285
312
  sm: 14,
286
313
  md: 16,
287
314
  lg: 18,
288
- xl: 18
315
+ xl: 20
289
316
  };
290
317
  var lineHeightMap = {
291
318
  sm: 16,
@@ -297,13 +324,13 @@ var descriptionFontSizeMap = {
297
324
  sm: 12,
298
325
  md: 14,
299
326
  lg: 16,
300
- xl: 16
327
+ xl: 18
301
328
  };
302
329
  var descriptionLineHeightMap = {
303
330
  sm: 14,
304
331
  md: 16,
305
332
  lg: 18,
306
- xl: 18
333
+ xl: 20
307
334
  };
308
335
  var Checkbox = forwardRef(
309
336
  function Checkbox2({
@@ -387,11 +414,11 @@ var Checkbox = forwardRef(
387
414
  return faintColors.bg;
388
415
  };
389
416
  const getBorderColor = () => {
390
- if (isError && !isCheckedOrIndeterminate) {
417
+ if (isError) {
391
418
  return borderColors.alert;
392
419
  }
393
420
  if (isCheckedOrIndeterminate && !disabled) {
394
- return checkColors.bg;
421
+ return checkColors.border;
395
422
  }
396
423
  return faintColors.border;
397
424
  };
@@ -422,7 +449,6 @@ var Checkbox = forwardRef(
422
449
  flexDirection: "row",
423
450
  alignItems: "flex-start",
424
451
  gap: labelGapMap[size],
425
- onPress: handleToggle,
426
452
  disabled,
427
453
  role: "checkbox",
428
454
  "aria-checked": getAriaChecked(),
@@ -433,6 +459,12 @@ var Checkbox = forwardRef(
433
459
  "aria-label": !children ? ariaLabel : void 0,
434
460
  tabIndex: disabled ? -1 : 0,
435
461
  onKeyDown: handleKeyDown,
462
+ focusStyle: {
463
+ outlineColor: theme.colors.border.brand,
464
+ outlineWidth: 2,
465
+ outlineOffset: 2,
466
+ outlineStyle: "solid"
467
+ },
436
468
  "data-testid": "checkbox",
437
469
  children: [
438
470
  /* @__PURE__ */ jsx3(
@@ -442,17 +474,19 @@ var Checkbox = forwardRef(
442
474
  height: checkboxSizeMap[size],
443
475
  backgroundColor: getCheckboxBgColor(),
444
476
  borderColor: getBorderColor(),
445
- borderWidth: 2,
446
- borderRadius: 2,
477
+ borderWidth: 1,
478
+ borderRadius: 4,
447
479
  alignItems: "center",
448
480
  justifyContent: "center",
449
481
  flexShrink: 0,
482
+ onPress: handleToggle,
483
+ cursor: disabled ? "not-allowed" : "pointer",
450
484
  hoverStyle: !disabled ? {
451
485
  backgroundColor: isCheckedOrIndeterminate ? checkColors.bgHover : faintColors.bgHover,
452
- borderColor: isError && !isCheckedOrIndeterminate ? borderColors.alert : isCheckedOrIndeterminate ? checkColors.bgHover : faintColors.borderHover
486
+ borderColor: isError ? borderColors.alert : isCheckedOrIndeterminate ? checkColors.borderHover : faintColors.borderHover
453
487
  } : void 0,
454
488
  "data-testid": "checkbox__box",
455
- children: isCheckedOrIndeterminate && (indeterminate ? /* @__PURE__ */ jsx3(Minus, { size: iconSizeMap[size], color: getIconColor() }) : /* @__PURE__ */ jsx3(Check, { size: iconSizeMap[size], color: getIconColor() }))
489
+ children: isCheckedOrIndeterminate && (indeterminate ? /* @__PURE__ */ jsx3(MinusIcon, { size: iconSizeMap[size], color: getIconColor() }) : /* @__PURE__ */ jsx3(CheckIcon, { size: iconSizeMap[size], color: getIconColor() }))
456
490
  }
457
491
  ),
458
492
  hasTexts && /* @__PURE__ */ jsxs(
@@ -463,15 +497,22 @@ var Checkbox = forwardRef(
463
497
  gap: textGapMap[size],
464
498
  children: [
465
499
  children && /* @__PURE__ */ jsx3(
466
- Text,
500
+ Box,
467
501
  {
468
- id: labelId,
469
- color: getLabelColor(),
470
- fontSize: fontSizeMap[size],
471
- lineHeight: lineHeightMap[size],
472
- fontWeight: 400,
473
- "data-testid": "checkbox__label",
474
- children
502
+ onPress: handleToggle,
503
+ cursor: disabled ? "not-allowed" : "pointer",
504
+ children: /* @__PURE__ */ jsx3(
505
+ Text,
506
+ {
507
+ id: labelId,
508
+ color: getLabelColor(),
509
+ fontSize: fontSizeMap[size],
510
+ lineHeight: lineHeightMap[size],
511
+ fontWeight: 400,
512
+ "data-testid": "checkbox__label",
513
+ children
514
+ }
515
+ )
475
516
  }
476
517
  ),
477
518
  description && /* @__PURE__ */ jsx3(
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Checkbox.tsx","../../../primitives-native/src/Box.tsx","../../../primitives-native/src/Text.tsx"],"sourcesContent":["import React, {\n forwardRef,\n useRef,\n useState,\n useImperativeHandle,\n} from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text } from \"@xsolla/xui-primitives\";\nimport {\n useResolvedTheme,\n useId,\n type ThemeOverrideProps,\n} from \"@xsolla/xui-core\";\nimport { Check, Minus } from \"@xsolla/xui-icons\";\n\ntype ComponentSize = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport interface CheckboxProps extends ThemeOverrideProps {\n /** Content/label to display next to the checkbox */\n children?: React.ReactNode;\n /** Size of the checkbox */\n size?: ComponentSize;\n /** Whether the checkbox is checked */\n checked?: boolean;\n /** The indeterminate checked state of checkbox */\n indeterminate?: boolean;\n /** Additional descriptive text below the label */\n description?: string;\n /** Error message to display (also highlights control as invalid) */\n errorMessage?: string;\n /** Highlight control as invalid without message */\n error?: boolean;\n /** Whether the checkbox is disabled */\n disabled?: boolean;\n /** Name attribute for the checkbox */\n name?: string;\n /** Value attribute for the checkbox */\n value?: string;\n /** Callback when the checkbox value changes */\n onChange?: (e: {\n target: { checked: boolean; name?: string; value?: string };\n }) => void;\n /** Unique identifier for the checkbox */\n id?: string;\n /** Accessible label for screen readers when no visible label */\n \"aria-label\"?: string;\n}\n\n// Ref type that works for both web and native\nexport interface CheckboxRef {\n focus: () => void;\n blur: () => void;\n}\n\n// Icon sizes for each component size\nconst iconSizeMap: Record<ComponentSize, number> = {\n sm: 12,\n md: 14,\n lg: 16,\n xl: 18,\n};\n\n// Checkbox box sizes\nconst checkboxSizeMap: Record<ComponentSize, number> = {\n sm: 16,\n md: 18,\n lg: 20,\n xl: 22,\n};\n\n// Label gap sizes (gap between checkbox and text)\nconst labelGapMap: Record<ComponentSize, number> = {\n sm: 8,\n md: 8,\n lg: 10,\n xl: 12,\n};\n\n// Text gap sizes (gap between label and description/error)\nconst textGapMap: Record<ComponentSize, number> = {\n sm: 0,\n md: 2,\n lg: 2,\n xl: 4,\n};\n\n// Font sizes for label (from Figma)\nconst fontSizeMap: Record<ComponentSize, number> = {\n sm: 14,\n md: 16,\n lg: 18,\n xl: 18,\n};\n\n// Line height for label (matches checkbox height for vertical centering)\nconst lineHeightMap: Record<ComponentSize, number> = {\n sm: 16,\n md: 18,\n lg: 20,\n xl: 22,\n};\n\n// Font sizes for description/error\nconst descriptionFontSizeMap: Record<ComponentSize, number> = {\n sm: 12,\n md: 14,\n lg: 16,\n xl: 16,\n};\n\n// Line height for description/error\nconst descriptionLineHeightMap: Record<ComponentSize, number> = {\n sm: 14,\n md: 16,\n lg: 18,\n xl: 18,\n};\n\nexport const Checkbox = forwardRef<CheckboxRef, CheckboxProps>(\n function Checkbox(\n {\n children,\n size = \"md\",\n checked,\n indeterminate = false,\n description,\n errorMessage,\n error,\n disabled,\n name,\n value,\n onChange,\n id: providedId,\n \"aria-label\": ariaLabel,\n themeMode,\n themeProductContext,\n },\n ref\n ) {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const containerRef = useRef<HTMLDivElement>(null);\n\n // Internal state for uncontrolled mode\n const [internalChecked, setInternalChecked] = useState(false);\n\n // Generate unique IDs for accessibility\n const rawId = useId();\n const safeId = rawId.replace(/:/g, \"\");\n const checkboxId = providedId || `checkbox-${safeId}`;\n const labelId = `${checkboxId}-label`;\n const descriptionId = `${checkboxId}-description`;\n const errorId = `${checkboxId}-error`;\n\n // Determine if controlled or uncontrolled\n const isControlled = checked !== undefined;\n const isChecked = isControlled ? checked : internalChecked;\n\n // Expose focus/blur methods via ref\n useImperativeHandle(\n ref,\n () => ({\n focus: () => containerRef.current?.focus(),\n blur: () => containerRef.current?.blur(),\n }),\n []\n );\n\n // Handle toggle for both controlled and uncontrolled modes\n const handleToggle = () => {\n if (disabled) return;\n\n // If indeterminate, always set to checked (true) for predictable UX\n const newChecked = indeterminate ? true : !isChecked;\n\n if (!isControlled) {\n setInternalChecked(newChecked);\n }\n\n onChange?.({\n target: {\n checked: newChecked,\n name,\n value,\n },\n });\n };\n\n // Handle keyboard interaction\n const handleKeyDown = (event: React.KeyboardEvent) => {\n const key = event.key;\n // Normalize Space key detection across browsers\n const isSpace = key === \" \" || key === \"Spacebar\" || key === \"Space\";\n if (isSpace || key === \"Enter\") {\n event.preventDefault();\n handleToggle();\n }\n };\n\n const isError = !!(errorMessage || error);\n const hasTexts = !!children || !!description;\n const isShowErrorMessage = !!errorMessage && hasTexts;\n const isCheckedOrIndeterminate = isChecked || indeterminate;\n\n // Build aria-describedby value\n // Only reference IDs of elements that are actually rendered\n const ariaDescribedByParts: string[] = [];\n if (description) ariaDescribedByParts.push(descriptionId);\n if (isShowErrorMessage) ariaDescribedByParts.push(errorId);\n const ariaDescribedBy =\n ariaDescribedByParts.length > 0\n ? ariaDescribedByParts.join(\" \")\n : undefined;\n\n // Resolve Colors from Theme\n const checkColors = theme.colors.control.check;\n const faintColors = theme.colors.control.faint;\n const textColors = theme.colors.control.text;\n const contentColors = theme.colors.content;\n const borderColors = theme.colors.border;\n\n /**\n * Get checkbox background color based on state\n */\n const getCheckboxBgColor = () => {\n if (disabled) {\n return checkColors.bgDisable;\n }\n if (isCheckedOrIndeterminate) {\n return checkColors.bg;\n }\n return faintColors.bg;\n };\n\n /**\n * Get checkbox border color\n */\n const getBorderColor = () => {\n if (isError && !isCheckedOrIndeterminate) {\n return borderColors.alert;\n }\n if (isCheckedOrIndeterminate && !disabled) {\n return checkColors.bg;\n }\n return faintColors.border;\n };\n\n /**\n * Get label text color\n */\n const getLabelColor = () => {\n if (disabled) return textColors.disable;\n return textColors.primary;\n };\n\n /**\n * Get description text color\n */\n const getDescriptionColor = () => {\n if (disabled) return textColors.disable;\n return contentColors.tertiary;\n };\n\n /**\n * Get error message text color\n */\n const getErrorMessageColor = () => {\n return contentColors.alert.primary;\n };\n\n /**\n * Get checkmark/minus icon color\n */\n const getIconColor = () => {\n if (disabled) return textColors.disable;\n return checkColors.icon;\n };\n\n // Determine aria-checked value\n const getAriaChecked = (): \"true\" | \"false\" | \"mixed\" => {\n if (indeterminate) return \"mixed\";\n return isChecked ? \"true\" : \"false\";\n };\n\n return (\n <Box\n id={checkboxId}\n ref={containerRef}\n flexDirection=\"row\"\n alignItems=\"flex-start\"\n gap={labelGapMap[size]}\n onPress={handleToggle}\n disabled={disabled}\n role=\"checkbox\"\n aria-checked={getAriaChecked()}\n aria-disabled={disabled || undefined}\n aria-invalid={isError || undefined}\n aria-describedby={ariaDescribedBy}\n aria-labelledby={children ? labelId : undefined}\n aria-label={!children ? ariaLabel : undefined}\n tabIndex={disabled ? -1 : 0}\n onKeyDown={handleKeyDown}\n data-testid=\"checkbox\"\n >\n {/* Custom checkbox visual */}\n <Box\n width={checkboxSizeMap[size]}\n height={checkboxSizeMap[size]}\n backgroundColor={getCheckboxBgColor()}\n borderColor={getBorderColor()}\n borderWidth={2}\n borderRadius={2}\n alignItems=\"center\"\n justifyContent=\"center\"\n flexShrink={0}\n hoverStyle={\n !disabled\n ? {\n backgroundColor: isCheckedOrIndeterminate\n ? checkColors.bgHover\n : faintColors.bgHover,\n borderColor:\n isError && !isCheckedOrIndeterminate\n ? borderColors.alert\n : isCheckedOrIndeterminate\n ? checkColors.bgHover\n : faintColors.borderHover,\n }\n : undefined\n }\n data-testid=\"checkbox__box\"\n >\n {isCheckedOrIndeterminate &&\n (indeterminate ? (\n <Minus size={iconSizeMap[size]} color={getIconColor()} />\n ) : (\n <Check size={iconSizeMap[size]} color={getIconColor()} />\n ))}\n </Box>\n\n {/* Label, Description & Error Message */}\n {hasTexts && (\n <Box\n flexDirection=\"column\"\n alignItems=\"flex-start\"\n gap={textGapMap[size]}\n >\n {children && (\n <Text\n id={labelId}\n color={getLabelColor()}\n fontSize={fontSizeMap[size]}\n lineHeight={lineHeightMap[size]}\n fontWeight={400}\n data-testid=\"checkbox__label\"\n >\n {children}\n </Text>\n )}\n {description && (\n <Text\n id={descriptionId}\n color={getDescriptionColor()}\n fontSize={descriptionFontSizeMap[size]}\n lineHeight={descriptionLineHeightMap[size]}\n data-testid=\"checkbox__description\"\n >\n {description}\n </Text>\n )}\n {isShowErrorMessage && (\n <Text\n id={errorId}\n role=\"alert\"\n color={getErrorMessageColor()}\n fontSize={descriptionFontSizeMap[size]}\n lineHeight={descriptionLineHeightMap[size]}\n data-testid=\"checkbox__error\"\n >\n {errorMessage}\n </Text>\n )}\n </Box>\n )}\n </Box>\n );\n }\n);\n\nCheckbox.displayName = \"Checkbox\";\n","import React from \"react\";\nimport {\n View,\n Pressable,\n Image,\n ViewStyle,\n ImageStyle,\n DimensionValue,\n AnimatableNumericValue,\n} from \"react-native\";\nimport { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Box: React.FC<BoxProps> = ({\n children,\n onPress,\n onLayout,\n onMoveShouldSetResponder,\n onResponderGrant,\n onResponderMove,\n onResponderRelease,\n onResponderTerminate,\n backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius,\n borderStyle,\n height,\n padding,\n paddingHorizontal,\n paddingVertical,\n margin,\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n flexDirection,\n alignItems,\n justifyContent,\n position,\n top,\n bottom,\n left,\n right,\n width,\n minWidth,\n minHeight,\n maxWidth,\n maxHeight,\n flex,\n overflow,\n zIndex,\n hoverStyle,\n pressStyle,\n style,\n \"data-testid\": dataTestId,\n testID,\n as,\n src,\n alt,\n ...rest\n}) => {\n const getContainerStyle = (pressed?: boolean): ViewStyle => ({\n backgroundColor:\n pressed && pressStyle?.backgroundColor\n ? pressStyle.backgroundColor\n : backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius: borderRadius as AnimatableNumericValue,\n borderStyle: borderStyle as ViewStyle[\"borderStyle\"],\n overflow,\n zIndex,\n height: height as DimensionValue,\n width: width as DimensionValue,\n minWidth: minWidth as DimensionValue,\n minHeight: minHeight as DimensionValue,\n maxWidth: maxWidth as DimensionValue,\n maxHeight: maxHeight as DimensionValue,\n padding: padding as DimensionValue,\n paddingHorizontal: paddingHorizontal as DimensionValue,\n paddingVertical: paddingVertical as DimensionValue,\n margin: margin as DimensionValue,\n marginTop: marginTop as DimensionValue,\n marginBottom: marginBottom as DimensionValue,\n marginLeft: marginLeft as DimensionValue,\n marginRight: marginRight as DimensionValue,\n flexDirection,\n alignItems,\n justifyContent,\n position: position as ViewStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n flex,\n ...(style as ViewStyle),\n });\n\n const finalTestID = dataTestId || testID;\n\n // Destructure and drop web-only props from rest before passing to RN components\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const {\n role,\n tabIndex,\n onKeyDown,\n onKeyUp,\n \"aria-label\": _ariaLabel,\n \"aria-labelledby\": _ariaLabelledBy,\n \"aria-current\": _ariaCurrent,\n \"aria-disabled\": _ariaDisabled,\n \"aria-live\": _ariaLive,\n className,\n \"data-testid\": _dataTestId,\n ...nativeRest\n } = rest as Record<string, unknown>;\n\n // Handle as=\"img\" for React Native\n if (as === \"img\" && src) {\n const imageStyle: ImageStyle = {\n width: width as DimensionValue,\n height: height as DimensionValue,\n borderRadius: borderRadius as number,\n position: position as ImageStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n ...(style as ImageStyle),\n };\n\n return (\n <Image\n source={{ uri: src }}\n style={imageStyle}\n testID={finalTestID}\n resizeMode=\"cover\"\n {...nativeRest}\n />\n );\n }\n\n if (onPress) {\n return (\n <Pressable\n onPress={onPress}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n style={({ pressed }) => getContainerStyle(pressed)}\n testID={finalTestID}\n {...nativeRest}\n >\n {children}\n </Pressable>\n );\n }\n\n return (\n <View\n style={getContainerStyle()}\n testID={finalTestID}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n {...nativeRest}\n >\n {children}\n </View>\n );\n};\n","import React from \"react\";\nimport {\n Text as RNText,\n TextStyle,\n AccessibilityRole,\n StyleSheet,\n} from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst roleMap: Record<string, AccessibilityRole> = {\n alert: \"alert\",\n heading: \"header\",\n button: \"button\",\n link: \"link\",\n text: \"text\",\n};\n\nconst parseNumericValue = (\n value: string | number | undefined\n): number | undefined => {\n if (value === undefined) return undefined;\n if (typeof value === \"number\") return value;\n const parsed = parseFloat(value);\n return isNaN(parsed) ? undefined : parsed;\n};\n\nexport const Text: React.FC<TextProps> = ({\n children,\n color,\n fontSize,\n fontWeight,\n fontFamily,\n textAlign,\n lineHeight,\n numberOfLines,\n id,\n role,\n style: styleProp,\n ...props\n}) => {\n let resolvedFontFamily = fontFamily\n ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n : undefined;\n\n if (\n resolvedFontFamily === \"Pilat Wide\" ||\n resolvedFontFamily === \"Pilat Wide Bold\" ||\n resolvedFontFamily === \"Aktiv Grotesk\"\n ) {\n resolvedFontFamily = undefined;\n }\n\n const incomingStyle = StyleSheet.flatten(styleProp) as TextStyle | undefined;\n\n const baseStyle: TextStyle = {\n color: color ?? incomingStyle?.color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n fontWeight: fontWeight as TextStyle[\"fontWeight\"],\n fontFamily: resolvedFontFamily,\n textDecorationLine: props.textDecoration as TextStyle[\"textDecorationLine\"],\n textAlign: textAlign ?? incomingStyle?.textAlign,\n lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),\n marginTop: parseNumericValue(\n incomingStyle?.marginTop as number | string | undefined\n ),\n marginBottom: parseNumericValue(\n incomingStyle?.marginBottom as number | string | undefined\n ),\n };\n\n const accessibilityRole = role ? roleMap[role] : undefined;\n\n return (\n <RNText\n style={baseStyle}\n numberOfLines={numberOfLines}\n testID={id}\n accessibilityRole={accessibilityRole}\n >\n {children}\n </RNText>\n );\n};\n"],"mappings":";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;;;ACJP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AA2ID;AAxIC,IAAM,MAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,oBAAoB,CAAC,aAAkC;AAAA,IAC3D,iBACE,WAAW,YAAY,kBACnB,WAAW,kBACX;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAI;AAAA,EACN;AAEA,QAAM,cAAc,cAAc;AAIlC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb;AAAA,IACA,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAI;AAGJ,MAAI,OAAO,SAAS,KAAK;AACvB,UAAM,aAAyB;AAAA,MAC7B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAI;AAAA,IACN;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ,EAAE,KAAK,IAAI;AAAA,QACnB,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,YAAW;AAAA,QACV,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AAEA,MAAI,SAAS;AACX,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO,CAAC,EAAE,QAAQ,MAAM,kBAAkB,OAAO;AAAA,QACjD,QAAQ;AAAA,QACP,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,kBAAkB;AAAA,MACzB,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;;;AC/LA;AAAA,EACE,QAAQ;AAAA,EAGR;AAAA,OACK;AAmEH,gBAAAA,YAAA;AAhEJ,IAAM,UAA6C;AAAA,EACjD,OAAO;AAAA,EACP,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,MAAM;AACR;AAEA,IAAM,oBAAoB,CACxB,UACuB;AACvB,MAAI,UAAU,OAAW,QAAO;AAChC,MAAI,OAAO,UAAU,SAAU,QAAO;AACtC,QAAM,SAAS,WAAW,KAAK;AAC/B,SAAO,MAAM,MAAM,IAAI,SAAY;AACrC;AAEO,IAAM,OAA4B,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,MAAM;AACJ,MAAI,qBAAqB,aACrB,WAAW,MAAM,GAAG,EAAE,CAAC,EAAE,QAAQ,SAAS,EAAE,EAAE,KAAK,IACnD;AAEJ,MACE,uBAAuB,gBACvB,uBAAuB,qBACvB,uBAAuB,iBACvB;AACA,yBAAqB;AAAA,EACvB;AAEA,QAAM,gBAAgB,WAAW,QAAQ,SAAS;AAElD,QAAM,YAAuB;AAAA,IAC3B,OAAO,SAAS,eAAe;AAAA,IAC/B,UAAU,OAAO,aAAa,WAAW,WAAW;AAAA,IACpD;AAAA,IACA,YAAY;AAAA,IACZ,oBAAoB,MAAM;AAAA,IAC1B,WAAW,aAAa,eAAe;AAAA,IACvC,YAAY,kBAAkB,cAAc,eAAe,UAAU;AAAA,IACrE,WAAW;AAAA,MACT,eAAe;AAAA,IACjB;AAAA,IACA,cAAc;AAAA,MACZ,eAAe;AAAA,IACjB;AAAA,EACF;AAEA,QAAM,oBAAoB,OAAO,QAAQ,IAAI,IAAI;AAEjD,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;;;AF1EA;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP,SAAS,OAAO,aAAa;AAgUf,gBAAAC,MAQJ,YARI;AAtRd,IAAM,cAA6C;AAAA,EACjD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGA,IAAM,kBAAiD;AAAA,EACrD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGA,IAAM,cAA6C;AAAA,EACjD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGA,IAAM,aAA4C;AAAA,EAChD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGA,IAAM,cAA6C;AAAA,EACjD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGA,IAAM,gBAA+C;AAAA,EACnD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGA,IAAM,yBAAwD;AAAA,EAC5D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGA,IAAM,2BAA0D;AAAA,EAC9D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,IAAM,WAAW;AAAA,EACtB,SAASC,UACP;AAAA,IACE;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,IAAI;AAAA,IACJ,cAAc;AAAA,IACd;AAAA,IACA;AAAA,EACF,GACA,KACA;AACA,UAAM,EAAE,MAAM,IAAI,iBAAiB,EAAE,WAAW,oBAAoB,CAAC;AACrE,UAAM,eAAe,OAAuB,IAAI;AAGhD,UAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS,KAAK;AAG5D,UAAM,QAAQ,MAAM;AACpB,UAAM,SAAS,MAAM,QAAQ,MAAM,EAAE;AACrC,UAAM,aAAa,cAAc,YAAY,MAAM;AACnD,UAAM,UAAU,GAAG,UAAU;AAC7B,UAAM,gBAAgB,GAAG,UAAU;AACnC,UAAM,UAAU,GAAG,UAAU;AAG7B,UAAM,eAAe,YAAY;AACjC,UAAM,YAAY,eAAe,UAAU;AAG3C;AAAA,MACE;AAAA,MACA,OAAO;AAAA,QACL,OAAO,MAAM,aAAa,SAAS,MAAM;AAAA,QACzC,MAAM,MAAM,aAAa,SAAS,KAAK;AAAA,MACzC;AAAA,MACA,CAAC;AAAA,IACH;AAGA,UAAM,eAAe,MAAM;AACzB,UAAI,SAAU;AAGd,YAAM,aAAa,gBAAgB,OAAO,CAAC;AAE3C,UAAI,CAAC,cAAc;AACjB,2BAAmB,UAAU;AAAA,MAC/B;AAEA,iBAAW;AAAA,QACT,QAAQ;AAAA,UACN,SAAS;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH;AAGA,UAAM,gBAAgB,CAAC,UAA+B;AACpD,YAAM,MAAM,MAAM;AAElB,YAAM,UAAU,QAAQ,OAAO,QAAQ,cAAc,QAAQ;AAC7D,UAAI,WAAW,QAAQ,SAAS;AAC9B,cAAM,eAAe;AACrB,qBAAa;AAAA,MACf;AAAA,IACF;AAEA,UAAM,UAAU,CAAC,EAAE,gBAAgB;AACnC,UAAM,WAAW,CAAC,CAAC,YAAY,CAAC,CAAC;AACjC,UAAM,qBAAqB,CAAC,CAAC,gBAAgB;AAC7C,UAAM,2BAA2B,aAAa;AAI9C,UAAM,uBAAiC,CAAC;AACxC,QAAI,YAAa,sBAAqB,KAAK,aAAa;AACxD,QAAI,mBAAoB,sBAAqB,KAAK,OAAO;AACzD,UAAM,kBACJ,qBAAqB,SAAS,IAC1B,qBAAqB,KAAK,GAAG,IAC7B;AAGN,UAAM,cAAc,MAAM,OAAO,QAAQ;AACzC,UAAM,cAAc,MAAM,OAAO,QAAQ;AACzC,UAAM,aAAa,MAAM,OAAO,QAAQ;AACxC,UAAM,gBAAgB,MAAM,OAAO;AACnC,UAAM,eAAe,MAAM,OAAO;AAKlC,UAAM,qBAAqB,MAAM;AAC/B,UAAI,UAAU;AACZ,eAAO,YAAY;AAAA,MACrB;AACA,UAAI,0BAA0B;AAC5B,eAAO,YAAY;AAAA,MACrB;AACA,aAAO,YAAY;AAAA,IACrB;AAKA,UAAM,iBAAiB,MAAM;AAC3B,UAAI,WAAW,CAAC,0BAA0B;AACxC,eAAO,aAAa;AAAA,MACtB;AACA,UAAI,4BAA4B,CAAC,UAAU;AACzC,eAAO,YAAY;AAAA,MACrB;AACA,aAAO,YAAY;AAAA,IACrB;AAKA,UAAM,gBAAgB,MAAM;AAC1B,UAAI,SAAU,QAAO,WAAW;AAChC,aAAO,WAAW;AAAA,IACpB;AAKA,UAAM,sBAAsB,MAAM;AAChC,UAAI,SAAU,QAAO,WAAW;AAChC,aAAO,cAAc;AAAA,IACvB;AAKA,UAAM,uBAAuB,MAAM;AACjC,aAAO,cAAc,MAAM;AAAA,IAC7B;AAKA,UAAM,eAAe,MAAM;AACzB,UAAI,SAAU,QAAO,WAAW;AAChC,aAAO,YAAY;AAAA,IACrB;AAGA,UAAM,iBAAiB,MAAkC;AACvD,UAAI,cAAe,QAAO;AAC1B,aAAO,YAAY,SAAS;AAAA,IAC9B;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ,KAAK;AAAA,QACL,eAAc;AAAA,QACd,YAAW;AAAA,QACX,KAAK,YAAY,IAAI;AAAA,QACrB,SAAS;AAAA,QACT;AAAA,QACA,MAAK;AAAA,QACL,gBAAc,eAAe;AAAA,QAC7B,iBAAe,YAAY;AAAA,QAC3B,gBAAc,WAAW;AAAA,QACzB,oBAAkB;AAAA,QAClB,mBAAiB,WAAW,UAAU;AAAA,QACtC,cAAY,CAAC,WAAW,YAAY;AAAA,QACpC,UAAU,WAAW,KAAK;AAAA,QAC1B,WAAW;AAAA,QACX,eAAY;AAAA,QAGZ;AAAA,0BAAAD;AAAA,YAAC;AAAA;AAAA,cACC,OAAO,gBAAgB,IAAI;AAAA,cAC3B,QAAQ,gBAAgB,IAAI;AAAA,cAC5B,iBAAiB,mBAAmB;AAAA,cACpC,aAAa,eAAe;AAAA,cAC5B,aAAa;AAAA,cACb,cAAc;AAAA,cACd,YAAW;AAAA,cACX,gBAAe;AAAA,cACf,YAAY;AAAA,cACZ,YACE,CAAC,WACG;AAAA,gBACE,iBAAiB,2BACb,YAAY,UACZ,YAAY;AAAA,gBAChB,aACE,WAAW,CAAC,2BACR,aAAa,QACb,2BACE,YAAY,UACZ,YAAY;AAAA,cACtB,IACA;AAAA,cAEN,eAAY;AAAA,cAEX,uCACE,gBACC,gBAAAA,KAAC,SAAM,MAAM,YAAY,IAAI,GAAG,OAAO,aAAa,GAAG,IAEvD,gBAAAA,KAAC,SAAM,MAAM,YAAY,IAAI,GAAG,OAAO,aAAa,GAAG;AAAA;AAAA,UAE7D;AAAA,UAGC,YACC;AAAA,YAAC;AAAA;AAAA,cACC,eAAc;AAAA,cACd,YAAW;AAAA,cACX,KAAK,WAAW,IAAI;AAAA,cAEnB;AAAA,4BACC,gBAAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,IAAI;AAAA,oBACJ,OAAO,cAAc;AAAA,oBACrB,UAAU,YAAY,IAAI;AAAA,oBAC1B,YAAY,cAAc,IAAI;AAAA,oBAC9B,YAAY;AAAA,oBACZ,eAAY;AAAA,oBAEX;AAAA;AAAA,gBACH;AAAA,gBAED,eACC,gBAAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,IAAI;AAAA,oBACJ,OAAO,oBAAoB;AAAA,oBAC3B,UAAU,uBAAuB,IAAI;AAAA,oBACrC,YAAY,yBAAyB,IAAI;AAAA,oBACzC,eAAY;AAAA,oBAEX;AAAA;AAAA,gBACH;AAAA,gBAED,sBACC,gBAAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,IAAI;AAAA,oBACJ,MAAK;AAAA,oBACL,OAAO,qBAAqB;AAAA,oBAC5B,UAAU,uBAAuB,IAAI;AAAA,oBACrC,YAAY,yBAAyB,IAAI;AAAA,oBACzC,eAAY;AAAA,oBAEX;AAAA;AAAA,gBACH;AAAA;AAAA;AAAA,UAEJ;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,SAAS,cAAc;","names":["jsx","jsx","Checkbox"]}
1
+ {"version":3,"sources":["../../src/Checkbox.tsx","../../../../foundation/primitives-native/src/Box.tsx","../../../../foundation/primitives-native/src/Text.tsx"],"sourcesContent":["import React, {\n forwardRef,\n useRef,\n useState,\n useImperativeHandle,\n} from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text } from \"@xsolla/xui-primitives\";\nimport {\n useResolvedTheme,\n useId,\n type ThemeOverrideProps,\n} from \"@xsolla/xui-core\";\ntype ComponentSize = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\n// Inline 12×12 glyphs so stroke thickness scales correctly at every checkbox size.\nconst CheckIcon = ({ size, color }: { size: number; color: string }) => (\n <svg\n width={size}\n height={size}\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M10.6699 4.2959L6.00293 8.96387C5.72637 9.24043 5.27761 9.24031 5.00098 8.96387L2 5.96289L3.2959 4.66699L5.50098 6.87207L9.37402 3L10.6699 4.2959Z\"\n fill={color}\n />\n </svg>\n);\n\nconst MinusIcon = ({ size, color }: { size: number; color: string }) => (\n <svg\n width={size}\n height={size}\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M11 5V7H1V5H11Z\" fill={color} />\n </svg>\n);\n\nexport interface CheckboxProps extends ThemeOverrideProps {\n /** Content/label to display next to the checkbox */\n children?: React.ReactNode;\n /** Size of the checkbox */\n size?: ComponentSize;\n /** Whether the checkbox is checked */\n checked?: boolean;\n /** The indeterminate checked state of checkbox */\n indeterminate?: boolean;\n /** Additional descriptive text below the label */\n description?: string;\n /** Error message to display (also highlights control as invalid) */\n errorMessage?: string;\n /** Highlight control as invalid without message */\n error?: boolean;\n /** Whether the checkbox is disabled */\n disabled?: boolean;\n /** Name attribute for the checkbox */\n name?: string;\n /** Value attribute for the checkbox */\n value?: string;\n /** Callback when the checkbox value changes */\n onChange?: (e: {\n target: { checked: boolean; name?: string; value?: string };\n }) => void;\n /** Unique identifier for the checkbox */\n id?: string;\n /** Accessible label for screen readers when no visible label */\n \"aria-label\"?: string;\n}\n\n// Ref type that works for both web and native\nexport interface CheckboxRef {\n focus: () => void;\n blur: () => void;\n}\n\n// Icon sizes (Figma: checkbox/{size}/icon/size; md inferred as 12 — linear pattern 10/12/14/16)\nconst iconSizeMap: Record<ComponentSize, number> = {\n sm: 10,\n md: 12,\n lg: 14,\n xl: 16,\n};\n\n// Checkbox box sizes (Figma: checkbox/{size}/frame/size)\nconst checkboxSizeMap: Record<ComponentSize, number> = {\n sm: 16,\n md: 18,\n lg: 20,\n xl: 24,\n};\n\n// Label gap sizes (Figma: checkbox/{size}/gap)\nconst labelGapMap: Record<ComponentSize, number> = {\n sm: 6,\n md: 8,\n lg: 10,\n xl: 12,\n};\n\n// Text gap sizes (gap between label and description/error)\nconst textGapMap: Record<ComponentSize, number> = {\n sm: 0,\n md: 2,\n lg: 2,\n xl: 4,\n};\n\n// Label font-size (Figma: checkbox/{size}/typography/font-size)\nconst fontSizeMap: Record<ComponentSize, number> = {\n sm: 14,\n md: 16,\n lg: 18,\n xl: 20,\n};\n\n// Label line-height (Figma: checkbox/{size}/typography/line-height)\nconst lineHeightMap: Record<ComponentSize, number> = {\n sm: 16,\n md: 18,\n lg: 20,\n xl: 22,\n};\n\n// Description font-size (Figma: field-group/{size}/typography/font-size)\nconst descriptionFontSizeMap: Record<ComponentSize, number> = {\n sm: 12,\n md: 14,\n lg: 16,\n xl: 18,\n};\n\n// Description line-height (Figma: field-group/{size}/typography/line-height)\nconst descriptionLineHeightMap: Record<ComponentSize, number> = {\n sm: 14,\n md: 16,\n lg: 18,\n xl: 20,\n};\n\nexport const Checkbox = forwardRef<CheckboxRef, CheckboxProps>(\n function Checkbox(\n {\n children,\n size = \"md\",\n checked,\n indeterminate = false,\n description,\n errorMessage,\n error,\n disabled,\n name,\n value,\n onChange,\n id: providedId,\n \"aria-label\": ariaLabel,\n themeMode,\n themeProductContext,\n },\n ref\n ) {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const containerRef = useRef<HTMLDivElement>(null);\n\n // Internal state for uncontrolled mode\n const [internalChecked, setInternalChecked] = useState(false);\n\n // Generate unique IDs for accessibility\n const rawId = useId();\n const safeId = rawId.replace(/:/g, \"\");\n const checkboxId = providedId || `checkbox-${safeId}`;\n const labelId = `${checkboxId}-label`;\n const descriptionId = `${checkboxId}-description`;\n const errorId = `${checkboxId}-error`;\n\n // Determine if controlled or uncontrolled\n const isControlled = checked !== undefined;\n const isChecked = isControlled ? checked : internalChecked;\n\n // Expose focus/blur methods via ref\n useImperativeHandle(\n ref,\n () => ({\n focus: () => containerRef.current?.focus(),\n blur: () => containerRef.current?.blur(),\n }),\n []\n );\n\n // Handle toggle for both controlled and uncontrolled modes\n const handleToggle = () => {\n if (disabled) return;\n\n // If indeterminate, always set to checked (true) for predictable UX\n const newChecked = indeterminate ? true : !isChecked;\n\n if (!isControlled) {\n setInternalChecked(newChecked);\n }\n\n onChange?.({\n target: {\n checked: newChecked,\n name,\n value,\n },\n });\n };\n\n // Handle keyboard interaction\n const handleKeyDown = (event: React.KeyboardEvent) => {\n const key = event.key;\n // Normalize Space key detection across browsers\n const isSpace = key === \" \" || key === \"Spacebar\" || key === \"Space\";\n if (isSpace || key === \"Enter\") {\n event.preventDefault();\n handleToggle();\n }\n };\n\n const isError = !!(errorMessage || error);\n const hasTexts = !!children || !!description;\n const isShowErrorMessage = !!errorMessage && hasTexts;\n const isCheckedOrIndeterminate = isChecked || indeterminate;\n\n // Build aria-describedby value\n // Only reference IDs of elements that are actually rendered\n const ariaDescribedByParts: string[] = [];\n if (description) ariaDescribedByParts.push(descriptionId);\n if (isShowErrorMessage) ariaDescribedByParts.push(errorId);\n const ariaDescribedBy =\n ariaDescribedByParts.length > 0\n ? ariaDescribedByParts.join(\" \")\n : undefined;\n\n // Resolve Colors from Theme\n const checkColors = theme.colors.control.check;\n const faintColors = theme.colors.control.faint;\n const textColors = theme.colors.control.text;\n const contentColors = theme.colors.content;\n const borderColors = theme.colors.border;\n\n /**\n * Get checkbox background color based on state\n */\n const getCheckboxBgColor = () => {\n if (disabled) {\n return checkColors.bgDisable;\n }\n if (isCheckedOrIndeterminate) {\n return checkColors.bg;\n }\n return faintColors.bg;\n };\n\n /**\n * Get checkbox border color\n */\n const getBorderColor = () => {\n if (isError) {\n return borderColors.alert;\n }\n if (isCheckedOrIndeterminate && !disabled) {\n return checkColors.border;\n }\n return faintColors.border;\n };\n\n /**\n * Get label text color\n */\n const getLabelColor = () => {\n if (disabled) return textColors.disable;\n return textColors.primary;\n };\n\n /**\n * Get description text color\n */\n const getDescriptionColor = () => {\n if (disabled) return textColors.disable;\n return contentColors.tertiary;\n };\n\n /**\n * Get error message text color\n */\n const getErrorMessageColor = () => {\n return contentColors.alert.primary;\n };\n\n /**\n * Get checkmark/minus icon color\n */\n const getIconColor = () => {\n if (disabled) return textColors.disable;\n return checkColors.icon;\n };\n\n // Determine aria-checked value\n const getAriaChecked = (): \"true\" | \"false\" | \"mixed\" => {\n if (indeterminate) return \"mixed\";\n return isChecked ? \"true\" : \"false\";\n };\n\n return (\n <Box\n id={checkboxId}\n ref={containerRef}\n flexDirection=\"row\"\n alignItems=\"flex-start\"\n gap={labelGapMap[size]}\n disabled={disabled}\n role=\"checkbox\"\n aria-checked={getAriaChecked()}\n aria-disabled={disabled || undefined}\n aria-invalid={isError || undefined}\n aria-describedby={ariaDescribedBy}\n aria-labelledby={children ? labelId : undefined}\n aria-label={!children ? ariaLabel : undefined}\n tabIndex={disabled ? -1 : 0}\n onKeyDown={handleKeyDown}\n focusStyle={{\n outlineColor: theme.colors.border.brand,\n outlineWidth: 2,\n outlineOffset: 2,\n outlineStyle: \"solid\",\n }}\n data-testid=\"checkbox\"\n >\n {/* Custom checkbox visual */}\n <Box\n width={checkboxSizeMap[size]}\n height={checkboxSizeMap[size]}\n backgroundColor={getCheckboxBgColor()}\n borderColor={getBorderColor()}\n borderWidth={1}\n borderRadius={4}\n alignItems=\"center\"\n justifyContent=\"center\"\n flexShrink={0}\n onPress={handleToggle}\n cursor={disabled ? \"not-allowed\" : \"pointer\"}\n hoverStyle={\n !disabled\n ? {\n backgroundColor: isCheckedOrIndeterminate\n ? checkColors.bgHover\n : faintColors.bgHover,\n borderColor: isError\n ? borderColors.alert\n : isCheckedOrIndeterminate\n ? checkColors.borderHover\n : faintColors.borderHover,\n }\n : undefined\n }\n data-testid=\"checkbox__box\"\n >\n {isCheckedOrIndeterminate &&\n (indeterminate ? (\n <MinusIcon size={iconSizeMap[size]} color={getIconColor()} />\n ) : (\n <CheckIcon size={iconSizeMap[size]} color={getIconColor()} />\n ))}\n </Box>\n\n {/* Label, Description & Error Message */}\n {hasTexts && (\n <Box\n flexDirection=\"column\"\n alignItems=\"flex-start\"\n gap={textGapMap[size]}\n >\n {children && (\n <Box\n onPress={handleToggle}\n cursor={disabled ? \"not-allowed\" : \"pointer\"}\n >\n <Text\n id={labelId}\n color={getLabelColor()}\n fontSize={fontSizeMap[size]}\n lineHeight={lineHeightMap[size]}\n fontWeight={400}\n data-testid=\"checkbox__label\"\n >\n {children}\n </Text>\n </Box>\n )}\n {description && (\n <Text\n id={descriptionId}\n color={getDescriptionColor()}\n fontSize={descriptionFontSizeMap[size]}\n lineHeight={descriptionLineHeightMap[size]}\n data-testid=\"checkbox__description\"\n >\n {description}\n </Text>\n )}\n {isShowErrorMessage && (\n <Text\n id={errorId}\n role=\"alert\"\n color={getErrorMessageColor()}\n fontSize={descriptionFontSizeMap[size]}\n lineHeight={descriptionLineHeightMap[size]}\n data-testid=\"checkbox__error\"\n >\n {errorMessage}\n </Text>\n )}\n </Box>\n )}\n </Box>\n );\n }\n);\n\nCheckbox.displayName = \"Checkbox\";\n","import React from \"react\";\nimport {\n View,\n Pressable,\n Image,\n ViewStyle,\n ImageStyle,\n DimensionValue,\n AnimatableNumericValue,\n} from \"react-native\";\nimport { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Box: React.FC<BoxProps> = ({\n children,\n onPress,\n onLayout,\n onMoveShouldSetResponder,\n onResponderGrant,\n onResponderMove,\n onResponderRelease,\n onResponderTerminate,\n backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius,\n borderStyle,\n height,\n padding,\n paddingHorizontal,\n paddingVertical,\n margin,\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n flexDirection,\n alignItems,\n justifyContent,\n position,\n top,\n bottom,\n left,\n right,\n width,\n minWidth,\n minHeight,\n maxWidth,\n maxHeight,\n flex,\n overflow,\n zIndex,\n hoverStyle,\n pressStyle,\n style,\n \"data-testid\": dataTestId,\n testID,\n as,\n src,\n alt,\n ...rest\n}) => {\n const getContainerStyle = (pressed?: boolean): ViewStyle => ({\n backgroundColor:\n pressed && pressStyle?.backgroundColor\n ? pressStyle.backgroundColor\n : backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius: borderRadius as AnimatableNumericValue,\n borderStyle: borderStyle as ViewStyle[\"borderStyle\"],\n overflow,\n zIndex,\n height: height as DimensionValue,\n width: width as DimensionValue,\n minWidth: minWidth as DimensionValue,\n minHeight: minHeight as DimensionValue,\n maxWidth: maxWidth as DimensionValue,\n maxHeight: maxHeight as DimensionValue,\n padding: padding as DimensionValue,\n paddingHorizontal: paddingHorizontal as DimensionValue,\n paddingVertical: paddingVertical as DimensionValue,\n margin: margin as DimensionValue,\n marginTop: marginTop as DimensionValue,\n marginBottom: marginBottom as DimensionValue,\n marginLeft: marginLeft as DimensionValue,\n marginRight: marginRight as DimensionValue,\n flexDirection,\n alignItems,\n justifyContent,\n position: position as ViewStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n flex,\n ...(style as ViewStyle),\n });\n\n const finalTestID = dataTestId || testID;\n\n // Destructure and drop web-only props from rest before passing to RN components\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const {\n role,\n tabIndex,\n onKeyDown,\n onKeyUp,\n \"aria-label\": _ariaLabel,\n \"aria-labelledby\": _ariaLabelledBy,\n \"aria-current\": _ariaCurrent,\n \"aria-disabled\": _ariaDisabled,\n \"aria-live\": _ariaLive,\n className,\n \"data-testid\": _dataTestId,\n ...nativeRest\n } = rest as Record<string, unknown>;\n\n // Handle as=\"img\" for React Native\n if (as === \"img\" && src) {\n const imageStyle: ImageStyle = {\n width: width as DimensionValue,\n height: height as DimensionValue,\n borderRadius: borderRadius as number,\n position: position as ImageStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n ...(style as ImageStyle),\n };\n\n return (\n <Image\n source={{ uri: src }}\n style={imageStyle}\n testID={finalTestID}\n resizeMode=\"cover\"\n {...nativeRest}\n />\n );\n }\n\n if (onPress) {\n return (\n <Pressable\n onPress={onPress}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n style={({ pressed }) => getContainerStyle(pressed)}\n testID={finalTestID}\n {...nativeRest}\n >\n {children}\n </Pressable>\n );\n }\n\n return (\n <View\n style={getContainerStyle()}\n testID={finalTestID}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n {...nativeRest}\n >\n {children}\n </View>\n );\n};\n","import React from \"react\";\nimport {\n Text as RNText,\n TextStyle,\n AccessibilityRole,\n StyleSheet,\n} from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst roleMap: Record<string, AccessibilityRole> = {\n alert: \"alert\",\n heading: \"header\",\n button: \"button\",\n link: \"link\",\n text: \"text\",\n};\n\nconst parseNumericValue = (\n value: string | number | undefined\n): number | undefined => {\n if (value === undefined) return undefined;\n if (typeof value === \"number\") return value;\n const parsed = parseFloat(value);\n return isNaN(parsed) ? undefined : parsed;\n};\n\nexport const Text: React.FC<TextProps> = ({\n children,\n color,\n fontSize,\n fontWeight,\n fontFamily,\n textAlign,\n lineHeight,\n numberOfLines,\n id,\n role,\n style: styleProp,\n ...props\n}) => {\n let resolvedFontFamily = fontFamily\n ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n : undefined;\n\n if (\n resolvedFontFamily === \"Pilat Wide\" ||\n resolvedFontFamily === \"Pilat Wide Bold\" ||\n resolvedFontFamily === \"Aktiv Grotesk\"\n ) {\n resolvedFontFamily = undefined;\n }\n\n const incomingStyle = StyleSheet.flatten(styleProp) as TextStyle | undefined;\n\n const baseStyle: TextStyle = {\n color: color ?? incomingStyle?.color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n fontWeight: fontWeight as TextStyle[\"fontWeight\"],\n fontFamily: resolvedFontFamily,\n textDecorationLine: props.textDecoration as TextStyle[\"textDecorationLine\"],\n textAlign: textAlign ?? incomingStyle?.textAlign,\n lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),\n marginTop: parseNumericValue(\n incomingStyle?.marginTop as number | string | undefined\n ),\n marginBottom: parseNumericValue(\n incomingStyle?.marginBottom as number | string | undefined\n ),\n };\n\n const accessibilityRole = role ? roleMap[role] : undefined;\n\n return (\n <RNText\n style={baseStyle}\n numberOfLines={numberOfLines}\n testID={id}\n accessibilityRole={accessibilityRole}\n >\n {children}\n </RNText>\n );\n};\n"],"mappings":"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","names":["jsx","jsx","Checkbox"]}