@xsolla/xui-checkbox 0.131.0 → 0.133.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xsolla/xui-checkbox",
3
- "version": "0.131.0",
3
+ "version": "0.133.0",
4
4
  "main": "./web/index.js",
5
5
  "module": "./web/index.mjs",
6
6
  "types": "./web/index.d.ts",
@@ -13,9 +13,9 @@
13
13
  "test:coverage": "vitest run --coverage"
14
14
  },
15
15
  "dependencies": {
16
- "@xsolla/xui-core": "0.131.0",
17
- "@xsolla/xui-icons": "0.131.0",
18
- "@xsolla/xui-primitives-core": "0.131.0"
16
+ "@xsolla/xui-core": "0.133.0",
17
+ "@xsolla/xui-icons": "0.133.0",
18
+ "@xsolla/xui-primitives-core": "0.133.0"
19
19
  },
20
20
  "peerDependencies": {
21
21
  "react": ">=16.8.0",
package/web/index.js CHANGED
@@ -35,13 +35,120 @@ __export(index_exports, {
35
35
  module.exports = __toCommonJS(index_exports);
36
36
 
37
37
  // src/Checkbox.tsx
38
- var import_react2 = require("react");
38
+ var import_react3 = require("react");
39
39
 
40
40
  // ../primitives-web/src/Box.tsx
41
- var import_react = __toESM(require("react"));
41
+ var import_react2 = __toESM(require("react"));
42
42
  var import_styled_components = __toESM(require("styled-components"));
43
+
44
+ // ../primitives-web/src/filterDOMProps.ts
45
+ var import_react = __toESM(require("react"));
46
+ var NON_HTML_PROPS = /* @__PURE__ */ new Set([
47
+ // BoxProps — layout & styling
48
+ "backgroundColor",
49
+ "borderColor",
50
+ "borderWidth",
51
+ "borderBottomWidth",
52
+ "borderBottomColor",
53
+ "borderTopWidth",
54
+ "borderTopColor",
55
+ "borderLeftWidth",
56
+ "borderLeftColor",
57
+ "borderRightWidth",
58
+ "borderRightColor",
59
+ "borderRadius",
60
+ "borderStyle",
61
+ "flexDirection",
62
+ "flexWrap",
63
+ "alignItems",
64
+ "justifyContent",
65
+ "alignSelf",
66
+ "flex",
67
+ "flexShrink",
68
+ "gap",
69
+ "position",
70
+ "top",
71
+ "bottom",
72
+ "left",
73
+ "right",
74
+ "outline",
75
+ "overflow",
76
+ "overflowX",
77
+ "overflowY",
78
+ "zIndex",
79
+ "cursor",
80
+ "padding",
81
+ "paddingHorizontal",
82
+ "paddingVertical",
83
+ "paddingTop",
84
+ "paddingBottom",
85
+ "paddingLeft",
86
+ "paddingRight",
87
+ "margin",
88
+ "marginTop",
89
+ "marginBottom",
90
+ "marginLeft",
91
+ "marginRight",
92
+ "minWidth",
93
+ "minHeight",
94
+ "maxWidth",
95
+ "maxHeight",
96
+ "hoverStyle",
97
+ "pressStyle",
98
+ "focusStyle",
99
+ "outlineColor",
100
+ "outlineWidth",
101
+ "outlineOffset",
102
+ "outlineStyle",
103
+ // BoxProps — RN-only
104
+ "onPress",
105
+ "onLayout",
106
+ "onMoveShouldSetResponder",
107
+ "onResponderGrant",
108
+ "onResponderMove",
109
+ "onResponderRelease",
110
+ "onResponderTerminate",
111
+ "testID",
112
+ // Box — custom element type
113
+ "elementType",
114
+ // TextProps
115
+ "fontSize",
116
+ "fontWeight",
117
+ "fontFamily",
118
+ "lineHeight",
119
+ "whiteSpace",
120
+ "textAlign",
121
+ "textDecoration",
122
+ "numberOfLines",
123
+ "letterSpacing",
124
+ "textTransform",
125
+ // SpinnerProps
126
+ "strokeWidth",
127
+ // DividerProps
128
+ "vertical",
129
+ "dashStroke"
130
+ ]);
131
+ function createFilteredElement(defaultTag) {
132
+ const Component = import_react.default.forwardRef(
133
+ ({ children, elementType, ...props }, ref) => {
134
+ const Tag = elementType || defaultTag;
135
+ const htmlProps = {};
136
+ for (const key of Object.keys(props)) {
137
+ if (!NON_HTML_PROPS.has(key)) {
138
+ htmlProps[key] = props[key];
139
+ }
140
+ }
141
+ return import_react.default.createElement(Tag, { ref, ...htmlProps }, children);
142
+ }
143
+ );
144
+ Component.displayName = `Filtered(${defaultTag})`;
145
+ return Component;
146
+ }
147
+
148
+ // ../primitives-web/src/Box.tsx
43
149
  var import_jsx_runtime = require("react/jsx-runtime");
44
- var StyledBox = import_styled_components.default.div`
150
+ var FilteredDiv = createFilteredElement("div");
151
+ var StyledBox = (0, import_styled_components.default)(FilteredDiv)`
45
152
  display: flex;
46
153
  box-sizing: border-box;
47
154
  background-color: ${(props) => props.backgroundColor || "transparent"};
@@ -128,7 +235,7 @@ var StyledBox = import_styled_components.default.div`
128
235
  ${(props) => props.pressStyle?.backgroundColor && `background-color: ${props.pressStyle.backgroundColor};`}
129
236
  }
130
237
  `;
131
- var Box = import_react.default.forwardRef(
238
+ var Box = import_react2.default.forwardRef(
132
239
  ({
133
240
  children,
134
241
  onPress,
@@ -180,7 +287,7 @@ var Box = import_react.default.forwardRef(
180
287
  StyledBox,
181
288
  {
182
289
  ref,
183
- as,
290
+ elementType: as,
184
291
  id,
185
292
  type: as === "button" ? type || "button" : void 0,
186
293
  disabled: as === "button" ? disabled : void 0,
@@ -211,7 +318,8 @@ Box.displayName = "Box";
211
318
  // ../primitives-web/src/Text.tsx
212
319
  var import_styled_components2 = __toESM(require("styled-components"));
213
320
  var import_jsx_runtime2 = require("react/jsx-runtime");
214
- var StyledText = import_styled_components2.default.span`
321
+ var FilteredSpan = createFilteredElement("span");
322
+ var StyledText = (0, import_styled_components2.default)(FilteredSpan)`
215
323
  color: ${(props) => props.color || "inherit"};
216
324
  font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
217
325
  font-weight: ${(props) => props.fontWeight || "normal"};
@@ -293,7 +401,7 @@ var descriptionLineHeightMap = {
293
401
  lg: 18,
294
402
  xl: 18
295
403
  };
296
- var Checkbox = (0, import_react2.forwardRef)(
404
+ var Checkbox = (0, import_react3.forwardRef)(
297
405
  function Checkbox2({
298
406
  children,
299
407
  size = "md",
@@ -312,8 +420,8 @@ var Checkbox = (0, import_react2.forwardRef)(
312
420
  themeProductContext
313
421
  }, ref) {
314
422
  const { theme } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
315
- const containerRef = (0, import_react2.useRef)(null);
316
- const [internalChecked, setInternalChecked] = (0, import_react2.useState)(false);
423
+ const containerRef = (0, import_react3.useRef)(null);
424
+ const [internalChecked, setInternalChecked] = (0, import_react3.useState)(false);
317
425
  const rawId = (0, import_xui_core.useId)();
318
426
  const safeId = rawId.replace(/:/g, "");
319
427
  const checkboxId = providedId || `checkbox-${safeId}`;
@@ -322,7 +430,7 @@ var Checkbox = (0, import_react2.forwardRef)(
322
430
  const errorId = `${checkboxId}-error`;
323
431
  const isControlled = checked !== void 0;
324
432
  const isChecked = isControlled ? checked : internalChecked;
325
- (0, import_react2.useImperativeHandle)(
433
+ (0, import_react3.useImperativeHandle)(
326
434
  ref,
327
435
  () => ({
328
436
  focus: () => containerRef.current?.focus(),
package/web/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/index.tsx","../../src/Checkbox.tsx","../../../primitives-web/src/Box.tsx","../../../primitives-web/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 styled from \"styled-components\";\nimport type { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledBox = styled.div<BoxProps>`\n display: flex;\n box-sizing: border-box;\n background-color: ${(props) => props.backgroundColor || \"transparent\"};\n border-color: ${(props) => props.borderColor || \"transparent\"};\n border-width: ${(props) =>\n typeof props.borderWidth === \"number\"\n ? `${props.borderWidth}px`\n : props.borderWidth || 0};\n\n ${(props) =>\n props.borderBottomWidth !== undefined &&\n `\n border-bottom-width: ${typeof props.borderBottomWidth === \"number\" ? `${props.borderBottomWidth}px` : props.borderBottomWidth};\n border-bottom-color: ${props.borderBottomColor || props.borderColor || \"transparent\"};\n border-bottom-style: solid;\n `}\n ${(props) =>\n props.borderTopWidth !== undefined &&\n `\n border-top-width: ${typeof props.borderTopWidth === \"number\" ? `${props.borderTopWidth}px` : props.borderTopWidth};\n border-top-color: ${props.borderTopColor || props.borderColor || \"transparent\"};\n border-top-style: solid;\n `}\n ${(props) =>\n props.borderLeftWidth !== undefined &&\n `\n border-left-width: ${typeof props.borderLeftWidth === \"number\" ? `${props.borderLeftWidth}px` : props.borderLeftWidth};\n border-left-color: ${props.borderLeftColor || props.borderColor || \"transparent\"};\n border-left-style: solid;\n `}\n ${(props) =>\n props.borderRightWidth !== undefined &&\n `\n border-right-width: ${typeof props.borderRightWidth === \"number\" ? `${props.borderRightWidth}px` : props.borderRightWidth};\n border-right-color: ${props.borderRightColor || props.borderColor || \"transparent\"};\n border-right-style: solid;\n `}\n\n border-style: ${(props) =>\n props.borderStyle ||\n (props.borderWidth ||\n props.borderBottomWidth ||\n props.borderTopWidth ||\n props.borderLeftWidth ||\n props.borderRightWidth\n ? \"solid\"\n : \"none\")};\n border-radius: ${(props) =>\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius || 0};\n height: ${(props) =>\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height || \"auto\"};\n width: ${(props) =>\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width || \"auto\"};\n min-width: ${(props) =>\n typeof props.minWidth === \"number\"\n ? `${props.minWidth}px`\n : props.minWidth || \"auto\"};\n min-height: ${(props) =>\n typeof props.minHeight === \"number\"\n ? `${props.minHeight}px`\n : props.minHeight || \"auto\"};\n max-width: ${(props) =>\n typeof props.maxWidth === \"number\"\n ? `${props.maxWidth}px`\n : props.maxWidth || \"none\"};\n max-height: ${(props) =>\n typeof props.maxHeight === \"number\"\n ? `${props.maxHeight}px`\n : props.maxHeight || \"none\"};\n\n padding: ${(props) =>\n typeof props.padding === \"number\"\n ? `${props.padding}px`\n : props.padding || 0};\n ${(props) =>\n props.paddingHorizontal &&\n `\n padding-left: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n padding-right: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n `}\n ${(props) =>\n props.paddingVertical &&\n `\n padding-top: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n padding-bottom: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n `}\n ${(props) =>\n props.paddingTop !== undefined &&\n `padding-top: ${typeof props.paddingTop === \"number\" ? `${props.paddingTop}px` : props.paddingTop};`}\n ${(props) =>\n props.paddingBottom !== undefined &&\n `padding-bottom: ${typeof props.paddingBottom === \"number\" ? `${props.paddingBottom}px` : props.paddingBottom};`}\n ${(props) =>\n props.paddingLeft !== undefined &&\n `padding-left: ${typeof props.paddingLeft === \"number\" ? `${props.paddingLeft}px` : props.paddingLeft};`}\n ${(props) =>\n props.paddingRight !== undefined &&\n `padding-right: ${typeof props.paddingRight === \"number\" ? `${props.paddingRight}px` : props.paddingRight};`}\n\n margin: ${(props) =>\n typeof props.margin === \"number\" ? `${props.margin}px` : props.margin || 0};\n ${(props) =>\n props.marginTop !== undefined &&\n `margin-top: ${typeof props.marginTop === \"number\" ? `${props.marginTop}px` : props.marginTop};`}\n ${(props) =>\n props.marginBottom !== undefined &&\n `margin-bottom: ${typeof props.marginBottom === \"number\" ? `${props.marginBottom}px` : props.marginBottom};`}\n ${(props) =>\n props.marginLeft !== undefined &&\n `margin-left: ${typeof props.marginLeft === \"number\" ? `${props.marginLeft}px` : props.marginLeft};`}\n ${(props) =>\n props.marginRight !== undefined &&\n `margin-right: ${typeof props.marginRight === \"number\" ? `${props.marginRight}px` : props.marginRight};`}\n\n flex-direction: ${(props) => props.flexDirection || \"column\"};\n flex-wrap: ${(props) => props.flexWrap || \"nowrap\"};\n align-items: ${(props) => props.alignItems || \"stretch\"};\n justify-content: ${(props) => props.justifyContent || \"flex-start\"};\n cursor: ${(props) =>\n props.cursor\n ? props.cursor\n : props.onClick || props.onPress\n ? \"pointer\"\n : \"inherit\"};\n position: ${(props) => props.position || \"static\"};\n top: ${(props) =>\n typeof props.top === \"number\" ? `${props.top}px` : props.top};\n bottom: ${(props) =>\n typeof props.bottom === \"number\" ? `${props.bottom}px` : props.bottom};\n left: ${(props) =>\n typeof props.left === \"number\" ? `${props.left}px` : props.left};\n right: ${(props) =>\n typeof props.right === \"number\" ? `${props.right}px` : props.right};\n flex: ${(props) => props.flex};\n flex-shrink: ${(props) => props.flexShrink ?? 1};\n gap: ${(props) =>\n typeof props.gap === \"number\" ? `${props.gap}px` : props.gap || 0};\n align-self: ${(props) => props.alignSelf || \"auto\"};\n overflow: ${(props) => props.overflow || \"visible\"};\n overflow-x: ${(props) => props.overflowX || \"visible\"};\n overflow-y: ${(props) => props.overflowY || \"visible\"};\n z-index: ${(props) => props.zIndex};\n opacity: ${(props) => (props.disabled ? 0.5 : 1)};\n pointer-events: ${(props) => (props.disabled ? \"none\" : \"auto\")};\n\n &:hover {\n ${(props) =>\n props.hoverStyle?.backgroundColor &&\n `background-color: ${props.hoverStyle.backgroundColor};`}\n ${(props) =>\n props.hoverStyle?.borderColor &&\n `border-color: ${props.hoverStyle.borderColor};`}\n }\n\n &:active {\n ${(props) =>\n props.pressStyle?.backgroundColor &&\n `background-color: ${props.pressStyle.backgroundColor};`}\n }\n`;\n\nexport const Box = React.forwardRef<\n HTMLDivElement | HTMLButtonElement,\n BoxProps\n>(\n (\n {\n children,\n onPress,\n onKeyDown,\n onKeyUp,\n role,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-current\": ariaCurrent,\n \"aria-disabled\": ariaDisabled,\n \"aria-live\": ariaLive,\n \"aria-busy\": ariaBusy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-expanded\": ariaExpanded,\n \"aria-haspopup\": ariaHasPopup,\n \"aria-pressed\": ariaPressed,\n \"aria-controls\": ariaControls,\n tabIndex,\n as,\n src,\n alt,\n type,\n disabled,\n id,\n ...props\n },\n ref\n ) => {\n // Handle as=\"img\" for rendering images with proper border-radius\n if (as === \"img\" && src) {\n return (\n <img\n src={src}\n alt={alt || \"\"}\n style={{\n display: \"block\",\n objectFit: \"cover\",\n width:\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width,\n height:\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height,\n borderRadius:\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius,\n position: props.position,\n top: typeof props.top === \"number\" ? `${props.top}px` : props.top,\n left:\n typeof props.left === \"number\" ? `${props.left}px` : props.left,\n right:\n typeof props.right === \"number\"\n ? `${props.right}px`\n : props.right,\n bottom:\n typeof props.bottom === \"number\"\n ? `${props.bottom}px`\n : props.bottom,\n }}\n />\n );\n }\n\n return (\n <StyledBox\n ref={ref}\n as={as}\n id={id}\n type={as === \"button\" ? type || \"button\" : undefined}\n disabled={as === \"button\" ? disabled : undefined}\n onClick={onPress}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n role={role}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-current={ariaCurrent}\n aria-disabled={ariaDisabled}\n aria-busy={ariaBusy}\n aria-describedby={ariaDescribedBy}\n aria-expanded={ariaExpanded}\n aria-haspopup={ariaHasPopup}\n aria-pressed={ariaPressed}\n aria-controls={ariaControls}\n aria-live={ariaLive}\n tabIndex={tabIndex !== undefined ? tabIndex : undefined}\n {...props}\n >\n {children}\n </StyledBox>\n );\n }\n);\n\nBox.displayName = \"Box\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledText = styled.span<TextProps>`\n color: ${(props) => props.color || \"inherit\"};\n font-size: ${(props) =>\n typeof props.fontSize === \"number\"\n ? `${props.fontSize}px`\n : props.fontSize || \"inherit\"};\n font-weight: ${(props) => props.fontWeight || \"normal\"};\n font-family: ${(props) =>\n props.fontFamily ||\n '\"Aktiv Grotesk\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif'};\n line-height: ${(props) =>\n typeof props.lineHeight === \"number\"\n ? `${props.lineHeight}px`\n : props.lineHeight || \"inherit\"};\n white-space: ${(props) => props.whiteSpace || \"normal\"};\n text-align: ${(props) => props.textAlign || \"inherit\"};\n text-decoration: ${(props) => props.textDecoration || \"none\"};\n`;\n\nexport const Text: React.FC<TextProps> = ({\n style,\n className,\n id,\n role,\n numberOfLines: _numberOfLines,\n ...props\n}) => {\n return (\n <StyledText\n {...props}\n style={style}\n className={className}\n id={id}\n role={role}\n />\n );\n};\n"],"mappings":"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","names":["import_react","styled","React","import_styled_components","import_jsx_runtime","styled","import_jsx_runtime","Checkbox"]}
1
+ {"version":3,"sources":["../../src/index.tsx","../../src/Checkbox.tsx","../../../primitives-web/src/Box.tsx","../../../primitives-web/src/filterDOMProps.ts","../../../primitives-web/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 styled from \"styled-components\";\nimport type { BoxProps } from \"@xsolla/xui-primitives-core\";\nimport { createFilteredElement } from \"./filterDOMProps\";\n\nconst FilteredDiv = createFilteredElement(\"div\");\n\nconst StyledBox = styled(FilteredDiv)<BoxProps>`\n display: flex;\n box-sizing: border-box;\n background-color: ${(props) => props.backgroundColor || \"transparent\"};\n border-color: ${(props) => props.borderColor || \"transparent\"};\n border-width: ${(props) =>\n typeof props.borderWidth === \"number\"\n ? `${props.borderWidth}px`\n : props.borderWidth || 0};\n\n ${(props) =>\n props.borderBottomWidth !== undefined &&\n `\n border-bottom-width: ${typeof props.borderBottomWidth === \"number\" ? `${props.borderBottomWidth}px` : props.borderBottomWidth};\n border-bottom-color: ${props.borderBottomColor || props.borderColor || \"transparent\"};\n border-bottom-style: solid;\n `}\n ${(props) =>\n props.borderTopWidth !== undefined &&\n `\n border-top-width: ${typeof props.borderTopWidth === \"number\" ? `${props.borderTopWidth}px` : props.borderTopWidth};\n border-top-color: ${props.borderTopColor || props.borderColor || \"transparent\"};\n border-top-style: solid;\n `}\n ${(props) =>\n props.borderLeftWidth !== undefined &&\n `\n border-left-width: ${typeof props.borderLeftWidth === \"number\" ? `${props.borderLeftWidth}px` : props.borderLeftWidth};\n border-left-color: ${props.borderLeftColor || props.borderColor || \"transparent\"};\n border-left-style: solid;\n `}\n ${(props) =>\n props.borderRightWidth !== undefined &&\n `\n border-right-width: ${typeof props.borderRightWidth === \"number\" ? `${props.borderRightWidth}px` : props.borderRightWidth};\n border-right-color: ${props.borderRightColor || props.borderColor || \"transparent\"};\n border-right-style: solid;\n `}\n\n border-style: ${(props) =>\n props.borderStyle ||\n (props.borderWidth ||\n props.borderBottomWidth ||\n props.borderTopWidth ||\n props.borderLeftWidth ||\n props.borderRightWidth\n ? \"solid\"\n : \"none\")};\n border-radius: ${(props) =>\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius || 0};\n height: ${(props) =>\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height || \"auto\"};\n width: ${(props) =>\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width || \"auto\"};\n min-width: ${(props) =>\n typeof props.minWidth === \"number\"\n ? `${props.minWidth}px`\n : props.minWidth || \"auto\"};\n min-height: ${(props) =>\n typeof props.minHeight === \"number\"\n ? `${props.minHeight}px`\n : props.minHeight || \"auto\"};\n max-width: ${(props) =>\n typeof props.maxWidth === \"number\"\n ? `${props.maxWidth}px`\n : props.maxWidth || \"none\"};\n max-height: ${(props) =>\n typeof props.maxHeight === \"number\"\n ? `${props.maxHeight}px`\n : props.maxHeight || \"none\"};\n\n padding: ${(props) =>\n typeof props.padding === \"number\"\n ? `${props.padding}px`\n : props.padding || 0};\n ${(props) =>\n props.paddingHorizontal &&\n `\n padding-left: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n padding-right: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n `}\n ${(props) =>\n props.paddingVertical &&\n `\n padding-top: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n padding-bottom: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n `}\n ${(props) =>\n props.paddingTop !== undefined &&\n `padding-top: ${typeof props.paddingTop === \"number\" ? `${props.paddingTop}px` : props.paddingTop};`}\n ${(props) =>\n props.paddingBottom !== undefined &&\n `padding-bottom: ${typeof props.paddingBottom === \"number\" ? `${props.paddingBottom}px` : props.paddingBottom};`}\n ${(props) =>\n props.paddingLeft !== undefined &&\n `padding-left: ${typeof props.paddingLeft === \"number\" ? `${props.paddingLeft}px` : props.paddingLeft};`}\n ${(props) =>\n props.paddingRight !== undefined &&\n `padding-right: ${typeof props.paddingRight === \"number\" ? `${props.paddingRight}px` : props.paddingRight};`}\n\n margin: ${(props) =>\n typeof props.margin === \"number\" ? `${props.margin}px` : props.margin || 0};\n ${(props) =>\n props.marginTop !== undefined &&\n `margin-top: ${typeof props.marginTop === \"number\" ? `${props.marginTop}px` : props.marginTop};`}\n ${(props) =>\n props.marginBottom !== undefined &&\n `margin-bottom: ${typeof props.marginBottom === \"number\" ? `${props.marginBottom}px` : props.marginBottom};`}\n ${(props) =>\n props.marginLeft !== undefined &&\n `margin-left: ${typeof props.marginLeft === \"number\" ? `${props.marginLeft}px` : props.marginLeft};`}\n ${(props) =>\n props.marginRight !== undefined &&\n `margin-right: ${typeof props.marginRight === \"number\" ? `${props.marginRight}px` : props.marginRight};`}\n\n flex-direction: ${(props) => props.flexDirection || \"column\"};\n flex-wrap: ${(props) => props.flexWrap || \"nowrap\"};\n align-items: ${(props) => props.alignItems || \"stretch\"};\n justify-content: ${(props) => props.justifyContent || \"flex-start\"};\n cursor: ${(props) =>\n props.cursor\n ? props.cursor\n : props.onClick || props.onPress\n ? \"pointer\"\n : \"inherit\"};\n position: ${(props) => props.position || \"static\"};\n top: ${(props) =>\n typeof props.top === \"number\" ? `${props.top}px` : props.top};\n bottom: ${(props) =>\n typeof props.bottom === \"number\" ? `${props.bottom}px` : props.bottom};\n left: ${(props) =>\n typeof props.left === \"number\" ? `${props.left}px` : props.left};\n right: ${(props) =>\n typeof props.right === \"number\" ? `${props.right}px` : props.right};\n flex: ${(props) => props.flex};\n flex-shrink: ${(props) => props.flexShrink ?? 1};\n gap: ${(props) =>\n typeof props.gap === \"number\" ? `${props.gap}px` : props.gap || 0};\n align-self: ${(props) => props.alignSelf || \"auto\"};\n overflow: ${(props) => props.overflow || \"visible\"};\n overflow-x: ${(props) => props.overflowX || \"visible\"};\n overflow-y: ${(props) => props.overflowY || \"visible\"};\n z-index: ${(props) => props.zIndex};\n opacity: ${(props) => (props.disabled ? 0.5 : 1)};\n pointer-events: ${(props) => (props.disabled ? \"none\" : \"auto\")};\n\n &:hover {\n ${(props) =>\n props.hoverStyle?.backgroundColor &&\n `background-color: ${props.hoverStyle.backgroundColor};`}\n ${(props) =>\n props.hoverStyle?.borderColor &&\n `border-color: ${props.hoverStyle.borderColor};`}\n }\n\n &:active {\n ${(props) =>\n props.pressStyle?.backgroundColor &&\n `background-color: ${props.pressStyle.backgroundColor};`}\n }\n`;\n\nexport const Box = React.forwardRef<\n HTMLDivElement | HTMLButtonElement,\n BoxProps\n>(\n (\n {\n children,\n onPress,\n onKeyDown,\n onKeyUp,\n role,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-current\": ariaCurrent,\n \"aria-disabled\": ariaDisabled,\n \"aria-live\": ariaLive,\n \"aria-busy\": ariaBusy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-expanded\": ariaExpanded,\n \"aria-haspopup\": ariaHasPopup,\n \"aria-pressed\": ariaPressed,\n \"aria-controls\": ariaControls,\n tabIndex,\n as,\n src,\n alt,\n type,\n disabled,\n id,\n ...props\n },\n ref\n ) => {\n // Handle as=\"img\" for rendering images with proper border-radius\n if (as === \"img\" && src) {\n return (\n <img\n src={src}\n alt={alt || \"\"}\n style={{\n display: \"block\",\n objectFit: \"cover\",\n width:\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width,\n height:\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height,\n borderRadius:\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius,\n position: props.position,\n top: typeof props.top === \"number\" ? `${props.top}px` : props.top,\n left:\n typeof props.left === \"number\" ? `${props.left}px` : props.left,\n right:\n typeof props.right === \"number\"\n ? `${props.right}px`\n : props.right,\n bottom:\n typeof props.bottom === \"number\"\n ? `${props.bottom}px`\n : props.bottom,\n }}\n />\n );\n }\n\n return (\n <StyledBox\n ref={ref}\n elementType={as}\n id={id}\n type={as === \"button\" ? type || \"button\" : undefined}\n disabled={as === \"button\" ? disabled : undefined}\n onClick={onPress}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n role={role}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-current={ariaCurrent}\n aria-disabled={ariaDisabled}\n aria-busy={ariaBusy}\n aria-describedby={ariaDescribedBy}\n aria-expanded={ariaExpanded}\n aria-haspopup={ariaHasPopup}\n aria-pressed={ariaPressed}\n aria-controls={ariaControls}\n aria-live={ariaLive}\n tabIndex={tabIndex !== undefined ? tabIndex : undefined}\n {...props}\n >\n {children}\n </StyledBox>\n );\n }\n);\n\nBox.displayName = \"Box\";\n","import React from \"react\";\n\n// Props from BoxProps, TextProps, SpinnerProps, IconProps, DividerProps\n// that are NOT valid HTML attributes and must not reach the DOM.\nexport const NON_HTML_PROPS = new Set([\n // BoxProps — layout & styling\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 \"flexDirection\",\n \"flexWrap\",\n \"alignItems\",\n \"justifyContent\",\n \"alignSelf\",\n \"flex\",\n \"flexShrink\",\n \"gap\",\n \"position\",\n \"top\",\n \"bottom\",\n \"left\",\n \"right\",\n \"outline\",\n \"overflow\",\n \"overflowX\",\n \"overflowY\",\n \"zIndex\",\n \"cursor\",\n \"padding\",\n \"paddingHorizontal\",\n \"paddingVertical\",\n \"paddingTop\",\n \"paddingBottom\",\n \"paddingLeft\",\n \"paddingRight\",\n \"margin\",\n \"marginTop\",\n \"marginBottom\",\n \"marginLeft\",\n \"marginRight\",\n \"minWidth\",\n \"minHeight\",\n \"maxWidth\",\n \"maxHeight\",\n \"hoverStyle\",\n \"pressStyle\",\n \"focusStyle\",\n \"outlineColor\",\n \"outlineWidth\",\n \"outlineOffset\",\n \"outlineStyle\",\n // BoxProps — RN-only\n \"onPress\",\n \"onLayout\",\n \"onMoveShouldSetResponder\",\n \"onResponderGrant\",\n \"onResponderMove\",\n \"onResponderRelease\",\n \"onResponderTerminate\",\n \"testID\",\n // Box — custom element type\n \"elementType\",\n // TextProps\n \"fontSize\",\n \"fontWeight\",\n \"fontFamily\",\n \"lineHeight\",\n \"whiteSpace\",\n \"textAlign\",\n \"textDecoration\",\n \"numberOfLines\",\n \"letterSpacing\",\n \"textTransform\",\n // SpinnerProps\n \"strokeWidth\",\n // DividerProps\n \"vertical\",\n \"dashStroke\",\n]);\n\n/**\n * Creates a React component that renders the given HTML tag\n * but filters out non-HTML props before they reach the DOM.\n *\n * Usage: `const FilteredDiv = createFilteredElement(\"div\");`\n * Then: `const StyledBox = styled(FilteredDiv)<BoxProps>\\`...\\`;`\n *\n * styled-components can still read ALL props for CSS interpolation,\n * but only valid HTML attributes are forwarded to the DOM element.\n */\nexport function createFilteredElement(defaultTag: string) {\n const Component = React.forwardRef<HTMLElement, any>(\n ({ children, elementType, ...props }, ref) => {\n const Tag = elementType || defaultTag;\n const htmlProps: Record<string, unknown> = {};\n for (const key of Object.keys(props)) {\n if (!NON_HTML_PROPS.has(key)) {\n htmlProps[key] = props[key];\n }\n }\n return React.createElement(Tag, { ref, ...htmlProps }, children);\n }\n );\n Component.displayName = `Filtered(${defaultTag})`;\n return Component;\n}\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\nimport { createFilteredElement } from \"./filterDOMProps\";\n\nconst FilteredSpan = createFilteredElement(\"span\");\n\nconst StyledText = styled(FilteredSpan)<TextProps>`\n color: ${(props) => props.color || \"inherit\"};\n font-size: ${(props) =>\n typeof props.fontSize === \"number\"\n ? `${props.fontSize}px`\n : props.fontSize || \"inherit\"};\n font-weight: ${(props) => props.fontWeight || \"normal\"};\n font-family: ${(props) =>\n props.fontFamily ||\n '\"Aktiv Grotesk\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif'};\n line-height: ${(props) =>\n typeof props.lineHeight === \"number\"\n ? `${props.lineHeight}px`\n : props.lineHeight || \"inherit\"};\n white-space: ${(props) => props.whiteSpace || \"normal\"};\n text-align: ${(props) => props.textAlign || \"inherit\"};\n text-decoration: ${(props) => props.textDecoration || \"none\"};\n`;\n\nexport const Text: React.FC<TextProps> = ({\n style,\n className,\n id,\n role,\n numberOfLines: _numberOfLines,\n ...props\n}) => {\n return (\n <StyledText\n {...props}\n style={style}\n className={className}\n id={id}\n role={role}\n />\n );\n};\n"],"mappings":"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","names":["import_react","import_react","React","styled","React","import_styled_components","import_jsx_runtime","styled","import_jsx_runtime","Checkbox"]}
package/web/index.mjs CHANGED
@@ -7,10 +7,117 @@ import {
7
7
  } from "react";
8
8
 
9
9
  // ../primitives-web/src/Box.tsx
10
- import React from "react";
10
+ import React2 from "react";
11
11
  import styled from "styled-components";
12
+
13
+ // ../primitives-web/src/filterDOMProps.ts
14
+ import React from "react";
15
+ var NON_HTML_PROPS = /* @__PURE__ */ new Set([
16
+ // BoxProps — layout & styling
17
+ "backgroundColor",
18
+ "borderColor",
19
+ "borderWidth",
20
+ "borderBottomWidth",
21
+ "borderBottomColor",
22
+ "borderTopWidth",
23
+ "borderTopColor",
24
+ "borderLeftWidth",
25
+ "borderLeftColor",
26
+ "borderRightWidth",
27
+ "borderRightColor",
28
+ "borderRadius",
29
+ "borderStyle",
30
+ "flexDirection",
31
+ "flexWrap",
32
+ "alignItems",
33
+ "justifyContent",
34
+ "alignSelf",
35
+ "flex",
36
+ "flexShrink",
37
+ "gap",
38
+ "position",
39
+ "top",
40
+ "bottom",
41
+ "left",
42
+ "right",
43
+ "outline",
44
+ "overflow",
45
+ "overflowX",
46
+ "overflowY",
47
+ "zIndex",
48
+ "cursor",
49
+ "padding",
50
+ "paddingHorizontal",
51
+ "paddingVertical",
52
+ "paddingTop",
53
+ "paddingBottom",
54
+ "paddingLeft",
55
+ "paddingRight",
56
+ "margin",
57
+ "marginTop",
58
+ "marginBottom",
59
+ "marginLeft",
60
+ "marginRight",
61
+ "minWidth",
62
+ "minHeight",
63
+ "maxWidth",
64
+ "maxHeight",
65
+ "hoverStyle",
66
+ "pressStyle",
67
+ "focusStyle",
68
+ "outlineColor",
69
+ "outlineWidth",
70
+ "outlineOffset",
71
+ "outlineStyle",
72
+ // BoxProps — RN-only
73
+ "onPress",
74
+ "onLayout",
75
+ "onMoveShouldSetResponder",
76
+ "onResponderGrant",
77
+ "onResponderMove",
78
+ "onResponderRelease",
79
+ "onResponderTerminate",
80
+ "testID",
81
+ // Box — custom element type
82
+ "elementType",
83
+ // TextProps
84
+ "fontSize",
85
+ "fontWeight",
86
+ "fontFamily",
87
+ "lineHeight",
88
+ "whiteSpace",
89
+ "textAlign",
90
+ "textDecoration",
91
+ "numberOfLines",
92
+ "letterSpacing",
93
+ "textTransform",
94
+ // SpinnerProps
95
+ "strokeWidth",
96
+ // DividerProps
97
+ "vertical",
98
+ "dashStroke"
99
+ ]);
100
+ function createFilteredElement(defaultTag) {
101
+ const Component = React.forwardRef(
102
+ ({ children, elementType, ...props }, ref) => {
103
+ const Tag = elementType || defaultTag;
104
+ const htmlProps = {};
105
+ for (const key of Object.keys(props)) {
106
+ if (!NON_HTML_PROPS.has(key)) {
107
+ htmlProps[key] = props[key];
108
+ }
109
+ }
110
+ return React.createElement(Tag, { ref, ...htmlProps }, children);
111
+ }
112
+ );
113
+ Component.displayName = `Filtered(${defaultTag})`;
114
+ return Component;
115
+ }
116
+
117
+ // ../primitives-web/src/Box.tsx
12
118
  import { jsx } from "react/jsx-runtime";
13
- var StyledBox = styled.div`
119
+ var FilteredDiv = createFilteredElement("div");
120
+ var StyledBox = styled(FilteredDiv)`
14
121
  display: flex;
15
122
  box-sizing: border-box;
16
123
  background-color: ${(props) => props.backgroundColor || "transparent"};
@@ -97,7 +204,7 @@ var StyledBox = styled.div`
97
204
  ${(props) => props.pressStyle?.backgroundColor && `background-color: ${props.pressStyle.backgroundColor};`}
98
205
  }
99
206
  `;
100
- var Box = React.forwardRef(
207
+ var Box = React2.forwardRef(
101
208
  ({
102
209
  children,
103
210
  onPress,
@@ -149,7 +256,7 @@ var Box = React.forwardRef(
149
256
  StyledBox,
150
257
  {
151
258
  ref,
152
- as,
259
+ elementType: as,
153
260
  id,
154
261
  type: as === "button" ? type || "button" : void 0,
155
262
  disabled: as === "button" ? disabled : void 0,
@@ -180,7 +287,8 @@ Box.displayName = "Box";
180
287
  // ../primitives-web/src/Text.tsx
181
288
  import styled2 from "styled-components";
182
289
  import { jsx as jsx2 } from "react/jsx-runtime";
183
- var StyledText = styled2.span`
290
+ var FilteredSpan = createFilteredElement("span");
291
+ var StyledText = styled2(FilteredSpan)`
184
292
  color: ${(props) => props.color || "inherit"};
185
293
  font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
186
294
  font-weight: ${(props) => props.fontWeight || "normal"};
package/web/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Checkbox.tsx","../../../primitives-web/src/Box.tsx","../../../primitives-web/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 styled from \"styled-components\";\nimport type { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledBox = styled.div<BoxProps>`\n display: flex;\n box-sizing: border-box;\n background-color: ${(props) => props.backgroundColor || \"transparent\"};\n border-color: ${(props) => props.borderColor || \"transparent\"};\n border-width: ${(props) =>\n typeof props.borderWidth === \"number\"\n ? `${props.borderWidth}px`\n : props.borderWidth || 0};\n\n ${(props) =>\n props.borderBottomWidth !== undefined &&\n `\n border-bottom-width: ${typeof props.borderBottomWidth === \"number\" ? `${props.borderBottomWidth}px` : props.borderBottomWidth};\n border-bottom-color: ${props.borderBottomColor || props.borderColor || \"transparent\"};\n border-bottom-style: solid;\n `}\n ${(props) =>\n props.borderTopWidth !== undefined &&\n `\n border-top-width: ${typeof props.borderTopWidth === \"number\" ? `${props.borderTopWidth}px` : props.borderTopWidth};\n border-top-color: ${props.borderTopColor || props.borderColor || \"transparent\"};\n border-top-style: solid;\n `}\n ${(props) =>\n props.borderLeftWidth !== undefined &&\n `\n border-left-width: ${typeof props.borderLeftWidth === \"number\" ? `${props.borderLeftWidth}px` : props.borderLeftWidth};\n border-left-color: ${props.borderLeftColor || props.borderColor || \"transparent\"};\n border-left-style: solid;\n `}\n ${(props) =>\n props.borderRightWidth !== undefined &&\n `\n border-right-width: ${typeof props.borderRightWidth === \"number\" ? `${props.borderRightWidth}px` : props.borderRightWidth};\n border-right-color: ${props.borderRightColor || props.borderColor || \"transparent\"};\n border-right-style: solid;\n `}\n\n border-style: ${(props) =>\n props.borderStyle ||\n (props.borderWidth ||\n props.borderBottomWidth ||\n props.borderTopWidth ||\n props.borderLeftWidth ||\n props.borderRightWidth\n ? \"solid\"\n : \"none\")};\n border-radius: ${(props) =>\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius || 0};\n height: ${(props) =>\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height || \"auto\"};\n width: ${(props) =>\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width || \"auto\"};\n min-width: ${(props) =>\n typeof props.minWidth === \"number\"\n ? `${props.minWidth}px`\n : props.minWidth || \"auto\"};\n min-height: ${(props) =>\n typeof props.minHeight === \"number\"\n ? `${props.minHeight}px`\n : props.minHeight || \"auto\"};\n max-width: ${(props) =>\n typeof props.maxWidth === \"number\"\n ? `${props.maxWidth}px`\n : props.maxWidth || \"none\"};\n max-height: ${(props) =>\n typeof props.maxHeight === \"number\"\n ? `${props.maxHeight}px`\n : props.maxHeight || \"none\"};\n\n padding: ${(props) =>\n typeof props.padding === \"number\"\n ? `${props.padding}px`\n : props.padding || 0};\n ${(props) =>\n props.paddingHorizontal &&\n `\n padding-left: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n padding-right: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n `}\n ${(props) =>\n props.paddingVertical &&\n `\n padding-top: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n padding-bottom: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n `}\n ${(props) =>\n props.paddingTop !== undefined &&\n `padding-top: ${typeof props.paddingTop === \"number\" ? `${props.paddingTop}px` : props.paddingTop};`}\n ${(props) =>\n props.paddingBottom !== undefined &&\n `padding-bottom: ${typeof props.paddingBottom === \"number\" ? `${props.paddingBottom}px` : props.paddingBottom};`}\n ${(props) =>\n props.paddingLeft !== undefined &&\n `padding-left: ${typeof props.paddingLeft === \"number\" ? `${props.paddingLeft}px` : props.paddingLeft};`}\n ${(props) =>\n props.paddingRight !== undefined &&\n `padding-right: ${typeof props.paddingRight === \"number\" ? `${props.paddingRight}px` : props.paddingRight};`}\n\n margin: ${(props) =>\n typeof props.margin === \"number\" ? `${props.margin}px` : props.margin || 0};\n ${(props) =>\n props.marginTop !== undefined &&\n `margin-top: ${typeof props.marginTop === \"number\" ? `${props.marginTop}px` : props.marginTop};`}\n ${(props) =>\n props.marginBottom !== undefined &&\n `margin-bottom: ${typeof props.marginBottom === \"number\" ? `${props.marginBottom}px` : props.marginBottom};`}\n ${(props) =>\n props.marginLeft !== undefined &&\n `margin-left: ${typeof props.marginLeft === \"number\" ? `${props.marginLeft}px` : props.marginLeft};`}\n ${(props) =>\n props.marginRight !== undefined &&\n `margin-right: ${typeof props.marginRight === \"number\" ? `${props.marginRight}px` : props.marginRight};`}\n\n flex-direction: ${(props) => props.flexDirection || \"column\"};\n flex-wrap: ${(props) => props.flexWrap || \"nowrap\"};\n align-items: ${(props) => props.alignItems || \"stretch\"};\n justify-content: ${(props) => props.justifyContent || \"flex-start\"};\n cursor: ${(props) =>\n props.cursor\n ? props.cursor\n : props.onClick || props.onPress\n ? \"pointer\"\n : \"inherit\"};\n position: ${(props) => props.position || \"static\"};\n top: ${(props) =>\n typeof props.top === \"number\" ? `${props.top}px` : props.top};\n bottom: ${(props) =>\n typeof props.bottom === \"number\" ? `${props.bottom}px` : props.bottom};\n left: ${(props) =>\n typeof props.left === \"number\" ? `${props.left}px` : props.left};\n right: ${(props) =>\n typeof props.right === \"number\" ? `${props.right}px` : props.right};\n flex: ${(props) => props.flex};\n flex-shrink: ${(props) => props.flexShrink ?? 1};\n gap: ${(props) =>\n typeof props.gap === \"number\" ? `${props.gap}px` : props.gap || 0};\n align-self: ${(props) => props.alignSelf || \"auto\"};\n overflow: ${(props) => props.overflow || \"visible\"};\n overflow-x: ${(props) => props.overflowX || \"visible\"};\n overflow-y: ${(props) => props.overflowY || \"visible\"};\n z-index: ${(props) => props.zIndex};\n opacity: ${(props) => (props.disabled ? 0.5 : 1)};\n pointer-events: ${(props) => (props.disabled ? \"none\" : \"auto\")};\n\n &:hover {\n ${(props) =>\n props.hoverStyle?.backgroundColor &&\n `background-color: ${props.hoverStyle.backgroundColor};`}\n ${(props) =>\n props.hoverStyle?.borderColor &&\n `border-color: ${props.hoverStyle.borderColor};`}\n }\n\n &:active {\n ${(props) =>\n props.pressStyle?.backgroundColor &&\n `background-color: ${props.pressStyle.backgroundColor};`}\n }\n`;\n\nexport const Box = React.forwardRef<\n HTMLDivElement | HTMLButtonElement,\n BoxProps\n>(\n (\n {\n children,\n onPress,\n onKeyDown,\n onKeyUp,\n role,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-current\": ariaCurrent,\n \"aria-disabled\": ariaDisabled,\n \"aria-live\": ariaLive,\n \"aria-busy\": ariaBusy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-expanded\": ariaExpanded,\n \"aria-haspopup\": ariaHasPopup,\n \"aria-pressed\": ariaPressed,\n \"aria-controls\": ariaControls,\n tabIndex,\n as,\n src,\n alt,\n type,\n disabled,\n id,\n ...props\n },\n ref\n ) => {\n // Handle as=\"img\" for rendering images with proper border-radius\n if (as === \"img\" && src) {\n return (\n <img\n src={src}\n alt={alt || \"\"}\n style={{\n display: \"block\",\n objectFit: \"cover\",\n width:\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width,\n height:\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height,\n borderRadius:\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius,\n position: props.position,\n top: typeof props.top === \"number\" ? `${props.top}px` : props.top,\n left:\n typeof props.left === \"number\" ? `${props.left}px` : props.left,\n right:\n typeof props.right === \"number\"\n ? `${props.right}px`\n : props.right,\n bottom:\n typeof props.bottom === \"number\"\n ? `${props.bottom}px`\n : props.bottom,\n }}\n />\n );\n }\n\n return (\n <StyledBox\n ref={ref}\n as={as}\n id={id}\n type={as === \"button\" ? type || \"button\" : undefined}\n disabled={as === \"button\" ? disabled : undefined}\n onClick={onPress}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n role={role}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-current={ariaCurrent}\n aria-disabled={ariaDisabled}\n aria-busy={ariaBusy}\n aria-describedby={ariaDescribedBy}\n aria-expanded={ariaExpanded}\n aria-haspopup={ariaHasPopup}\n aria-pressed={ariaPressed}\n aria-controls={ariaControls}\n aria-live={ariaLive}\n tabIndex={tabIndex !== undefined ? tabIndex : undefined}\n {...props}\n >\n {children}\n </StyledBox>\n );\n }\n);\n\nBox.displayName = \"Box\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledText = styled.span<TextProps>`\n color: ${(props) => props.color || \"inherit\"};\n font-size: ${(props) =>\n typeof props.fontSize === \"number\"\n ? `${props.fontSize}px`\n : props.fontSize || \"inherit\"};\n font-weight: ${(props) => props.fontWeight || \"normal\"};\n font-family: ${(props) =>\n props.fontFamily ||\n '\"Aktiv Grotesk\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif'};\n line-height: ${(props) =>\n typeof props.lineHeight === \"number\"\n ? `${props.lineHeight}px`\n : props.lineHeight || \"inherit\"};\n white-space: ${(props) => props.whiteSpace || \"normal\"};\n text-align: ${(props) => props.textAlign || \"inherit\"};\n text-decoration: ${(props) => props.textDecoration || \"none\"};\n`;\n\nexport const Text: React.FC<TextProps> = ({\n style,\n className,\n id,\n role,\n numberOfLines: _numberOfLines,\n ...props\n}) => {\n return (\n <StyledText\n {...props}\n style={style}\n className={className}\n id={id}\n role={role}\n />\n );\n};\n"],"mappings":"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","names":["styled","jsx","jsx","Checkbox"]}
1
+ {"version":3,"sources":["../../src/Checkbox.tsx","../../../primitives-web/src/Box.tsx","../../../primitives-web/src/filterDOMProps.ts","../../../primitives-web/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 styled from \"styled-components\";\nimport type { BoxProps } from \"@xsolla/xui-primitives-core\";\nimport { createFilteredElement } from \"./filterDOMProps\";\n\nconst FilteredDiv = createFilteredElement(\"div\");\n\nconst StyledBox = styled(FilteredDiv)<BoxProps>`\n display: flex;\n box-sizing: border-box;\n background-color: ${(props) => props.backgroundColor || \"transparent\"};\n border-color: ${(props) => props.borderColor || \"transparent\"};\n border-width: ${(props) =>\n typeof props.borderWidth === \"number\"\n ? `${props.borderWidth}px`\n : props.borderWidth || 0};\n\n ${(props) =>\n props.borderBottomWidth !== undefined &&\n `\n border-bottom-width: ${typeof props.borderBottomWidth === \"number\" ? `${props.borderBottomWidth}px` : props.borderBottomWidth};\n border-bottom-color: ${props.borderBottomColor || props.borderColor || \"transparent\"};\n border-bottom-style: solid;\n `}\n ${(props) =>\n props.borderTopWidth !== undefined &&\n `\n border-top-width: ${typeof props.borderTopWidth === \"number\" ? `${props.borderTopWidth}px` : props.borderTopWidth};\n border-top-color: ${props.borderTopColor || props.borderColor || \"transparent\"};\n border-top-style: solid;\n `}\n ${(props) =>\n props.borderLeftWidth !== undefined &&\n `\n border-left-width: ${typeof props.borderLeftWidth === \"number\" ? `${props.borderLeftWidth}px` : props.borderLeftWidth};\n border-left-color: ${props.borderLeftColor || props.borderColor || \"transparent\"};\n border-left-style: solid;\n `}\n ${(props) =>\n props.borderRightWidth !== undefined &&\n `\n border-right-width: ${typeof props.borderRightWidth === \"number\" ? `${props.borderRightWidth}px` : props.borderRightWidth};\n border-right-color: ${props.borderRightColor || props.borderColor || \"transparent\"};\n border-right-style: solid;\n `}\n\n border-style: ${(props) =>\n props.borderStyle ||\n (props.borderWidth ||\n props.borderBottomWidth ||\n props.borderTopWidth ||\n props.borderLeftWidth ||\n props.borderRightWidth\n ? \"solid\"\n : \"none\")};\n border-radius: ${(props) =>\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius || 0};\n height: ${(props) =>\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height || \"auto\"};\n width: ${(props) =>\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width || \"auto\"};\n min-width: ${(props) =>\n typeof props.minWidth === \"number\"\n ? `${props.minWidth}px`\n : props.minWidth || \"auto\"};\n min-height: ${(props) =>\n typeof props.minHeight === \"number\"\n ? `${props.minHeight}px`\n : props.minHeight || \"auto\"};\n max-width: ${(props) =>\n typeof props.maxWidth === \"number\"\n ? `${props.maxWidth}px`\n : props.maxWidth || \"none\"};\n max-height: ${(props) =>\n typeof props.maxHeight === \"number\"\n ? `${props.maxHeight}px`\n : props.maxHeight || \"none\"};\n\n padding: ${(props) =>\n typeof props.padding === \"number\"\n ? `${props.padding}px`\n : props.padding || 0};\n ${(props) =>\n props.paddingHorizontal &&\n `\n padding-left: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n padding-right: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n `}\n ${(props) =>\n props.paddingVertical &&\n `\n padding-top: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n padding-bottom: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n `}\n ${(props) =>\n props.paddingTop !== undefined &&\n `padding-top: ${typeof props.paddingTop === \"number\" ? `${props.paddingTop}px` : props.paddingTop};`}\n ${(props) =>\n props.paddingBottom !== undefined &&\n `padding-bottom: ${typeof props.paddingBottom === \"number\" ? `${props.paddingBottom}px` : props.paddingBottom};`}\n ${(props) =>\n props.paddingLeft !== undefined &&\n `padding-left: ${typeof props.paddingLeft === \"number\" ? `${props.paddingLeft}px` : props.paddingLeft};`}\n ${(props) =>\n props.paddingRight !== undefined &&\n `padding-right: ${typeof props.paddingRight === \"number\" ? `${props.paddingRight}px` : props.paddingRight};`}\n\n margin: ${(props) =>\n typeof props.margin === \"number\" ? `${props.margin}px` : props.margin || 0};\n ${(props) =>\n props.marginTop !== undefined &&\n `margin-top: ${typeof props.marginTop === \"number\" ? `${props.marginTop}px` : props.marginTop};`}\n ${(props) =>\n props.marginBottom !== undefined &&\n `margin-bottom: ${typeof props.marginBottom === \"number\" ? `${props.marginBottom}px` : props.marginBottom};`}\n ${(props) =>\n props.marginLeft !== undefined &&\n `margin-left: ${typeof props.marginLeft === \"number\" ? `${props.marginLeft}px` : props.marginLeft};`}\n ${(props) =>\n props.marginRight !== undefined &&\n `margin-right: ${typeof props.marginRight === \"number\" ? `${props.marginRight}px` : props.marginRight};`}\n\n flex-direction: ${(props) => props.flexDirection || \"column\"};\n flex-wrap: ${(props) => props.flexWrap || \"nowrap\"};\n align-items: ${(props) => props.alignItems || \"stretch\"};\n justify-content: ${(props) => props.justifyContent || \"flex-start\"};\n cursor: ${(props) =>\n props.cursor\n ? props.cursor\n : props.onClick || props.onPress\n ? \"pointer\"\n : \"inherit\"};\n position: ${(props) => props.position || \"static\"};\n top: ${(props) =>\n typeof props.top === \"number\" ? `${props.top}px` : props.top};\n bottom: ${(props) =>\n typeof props.bottom === \"number\" ? `${props.bottom}px` : props.bottom};\n left: ${(props) =>\n typeof props.left === \"number\" ? `${props.left}px` : props.left};\n right: ${(props) =>\n typeof props.right === \"number\" ? `${props.right}px` : props.right};\n flex: ${(props) => props.flex};\n flex-shrink: ${(props) => props.flexShrink ?? 1};\n gap: ${(props) =>\n typeof props.gap === \"number\" ? `${props.gap}px` : props.gap || 0};\n align-self: ${(props) => props.alignSelf || \"auto\"};\n overflow: ${(props) => props.overflow || \"visible\"};\n overflow-x: ${(props) => props.overflowX || \"visible\"};\n overflow-y: ${(props) => props.overflowY || \"visible\"};\n z-index: ${(props) => props.zIndex};\n opacity: ${(props) => (props.disabled ? 0.5 : 1)};\n pointer-events: ${(props) => (props.disabled ? \"none\" : \"auto\")};\n\n &:hover {\n ${(props) =>\n props.hoverStyle?.backgroundColor &&\n `background-color: ${props.hoverStyle.backgroundColor};`}\n ${(props) =>\n props.hoverStyle?.borderColor &&\n `border-color: ${props.hoverStyle.borderColor};`}\n }\n\n &:active {\n ${(props) =>\n props.pressStyle?.backgroundColor &&\n `background-color: ${props.pressStyle.backgroundColor};`}\n }\n`;\n\nexport const Box = React.forwardRef<\n HTMLDivElement | HTMLButtonElement,\n BoxProps\n>(\n (\n {\n children,\n onPress,\n onKeyDown,\n onKeyUp,\n role,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-current\": ariaCurrent,\n \"aria-disabled\": ariaDisabled,\n \"aria-live\": ariaLive,\n \"aria-busy\": ariaBusy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-expanded\": ariaExpanded,\n \"aria-haspopup\": ariaHasPopup,\n \"aria-pressed\": ariaPressed,\n \"aria-controls\": ariaControls,\n tabIndex,\n as,\n src,\n alt,\n type,\n disabled,\n id,\n ...props\n },\n ref\n ) => {\n // Handle as=\"img\" for rendering images with proper border-radius\n if (as === \"img\" && src) {\n return (\n <img\n src={src}\n alt={alt || \"\"}\n style={{\n display: \"block\",\n objectFit: \"cover\",\n width:\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width,\n height:\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height,\n borderRadius:\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius,\n position: props.position,\n top: typeof props.top === \"number\" ? `${props.top}px` : props.top,\n left:\n typeof props.left === \"number\" ? `${props.left}px` : props.left,\n right:\n typeof props.right === \"number\"\n ? `${props.right}px`\n : props.right,\n bottom:\n typeof props.bottom === \"number\"\n ? `${props.bottom}px`\n : props.bottom,\n }}\n />\n );\n }\n\n return (\n <StyledBox\n ref={ref}\n elementType={as}\n id={id}\n type={as === \"button\" ? type || \"button\" : undefined}\n disabled={as === \"button\" ? disabled : undefined}\n onClick={onPress}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n role={role}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-current={ariaCurrent}\n aria-disabled={ariaDisabled}\n aria-busy={ariaBusy}\n aria-describedby={ariaDescribedBy}\n aria-expanded={ariaExpanded}\n aria-haspopup={ariaHasPopup}\n aria-pressed={ariaPressed}\n aria-controls={ariaControls}\n aria-live={ariaLive}\n tabIndex={tabIndex !== undefined ? tabIndex : undefined}\n {...props}\n >\n {children}\n </StyledBox>\n );\n }\n);\n\nBox.displayName = \"Box\";\n","import React from \"react\";\n\n// Props from BoxProps, TextProps, SpinnerProps, IconProps, DividerProps\n// that are NOT valid HTML attributes and must not reach the DOM.\nexport const NON_HTML_PROPS = new Set([\n // BoxProps — layout & styling\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 \"flexDirection\",\n \"flexWrap\",\n \"alignItems\",\n \"justifyContent\",\n \"alignSelf\",\n \"flex\",\n \"flexShrink\",\n \"gap\",\n \"position\",\n \"top\",\n \"bottom\",\n \"left\",\n \"right\",\n \"outline\",\n \"overflow\",\n \"overflowX\",\n \"overflowY\",\n \"zIndex\",\n \"cursor\",\n \"padding\",\n \"paddingHorizontal\",\n \"paddingVertical\",\n \"paddingTop\",\n \"paddingBottom\",\n \"paddingLeft\",\n \"paddingRight\",\n \"margin\",\n \"marginTop\",\n \"marginBottom\",\n \"marginLeft\",\n \"marginRight\",\n \"minWidth\",\n \"minHeight\",\n \"maxWidth\",\n \"maxHeight\",\n \"hoverStyle\",\n \"pressStyle\",\n \"focusStyle\",\n \"outlineColor\",\n \"outlineWidth\",\n \"outlineOffset\",\n \"outlineStyle\",\n // BoxProps — RN-only\n \"onPress\",\n \"onLayout\",\n \"onMoveShouldSetResponder\",\n \"onResponderGrant\",\n \"onResponderMove\",\n \"onResponderRelease\",\n \"onResponderTerminate\",\n \"testID\",\n // Box — custom element type\n \"elementType\",\n // TextProps\n \"fontSize\",\n \"fontWeight\",\n \"fontFamily\",\n \"lineHeight\",\n \"whiteSpace\",\n \"textAlign\",\n \"textDecoration\",\n \"numberOfLines\",\n \"letterSpacing\",\n \"textTransform\",\n // SpinnerProps\n \"strokeWidth\",\n // DividerProps\n \"vertical\",\n \"dashStroke\",\n]);\n\n/**\n * Creates a React component that renders the given HTML tag\n * but filters out non-HTML props before they reach the DOM.\n *\n * Usage: `const FilteredDiv = createFilteredElement(\"div\");`\n * Then: `const StyledBox = styled(FilteredDiv)<BoxProps>\\`...\\`;`\n *\n * styled-components can still read ALL props for CSS interpolation,\n * but only valid HTML attributes are forwarded to the DOM element.\n */\nexport function createFilteredElement(defaultTag: string) {\n const Component = React.forwardRef<HTMLElement, any>(\n ({ children, elementType, ...props }, ref) => {\n const Tag = elementType || defaultTag;\n const htmlProps: Record<string, unknown> = {};\n for (const key of Object.keys(props)) {\n if (!NON_HTML_PROPS.has(key)) {\n htmlProps[key] = props[key];\n }\n }\n return React.createElement(Tag, { ref, ...htmlProps }, children);\n }\n );\n Component.displayName = `Filtered(${defaultTag})`;\n return Component;\n}\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\nimport { createFilteredElement } from \"./filterDOMProps\";\n\nconst FilteredSpan = createFilteredElement(\"span\");\n\nconst StyledText = styled(FilteredSpan)<TextProps>`\n color: ${(props) => props.color || \"inherit\"};\n font-size: ${(props) =>\n typeof props.fontSize === \"number\"\n ? `${props.fontSize}px`\n : props.fontSize || \"inherit\"};\n font-weight: ${(props) => props.fontWeight || \"normal\"};\n font-family: ${(props) =>\n props.fontFamily ||\n '\"Aktiv Grotesk\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif'};\n line-height: ${(props) =>\n typeof props.lineHeight === \"number\"\n ? `${props.lineHeight}px`\n : props.lineHeight || \"inherit\"};\n white-space: ${(props) => props.whiteSpace || \"normal\"};\n text-align: ${(props) => props.textAlign || \"inherit\"};\n text-decoration: ${(props) => props.textDecoration || \"none\"};\n`;\n\nexport const Text: React.FC<TextProps> = ({\n style,\n className,\n id,\n role,\n numberOfLines: _numberOfLines,\n ...props\n}) => {\n return (\n <StyledText\n {...props}\n style={style}\n className={className}\n id={id}\n role={role}\n />\n );\n};\n"],"mappings":"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","names":["React","React","styled","jsx","styled","jsx","Checkbox"]}