@xsolla/xui-checkbox 0.158.0 → 0.159.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.
Files changed (14) hide show
  1. package/README.md +89 -72
  2. package/native/index.d.mts +2 -0
  3. package/native/index.d.ts +2 -0
  4. package/native/index.js +5 -2
  5. package/native/index.js.map +1 -1
  6. package/native/index.mjs +5 -2
  7. package/native/index.mjs.map +1 -1
  8. package/package.json +4 -4
  9. package/web/index.d.mts +2 -0
  10. package/web/index.d.ts +2 -0
  11. package/web/index.js +6 -2
  12. package/web/index.js.map +1 -1
  13. package/web/index.mjs +6 -2
  14. package/web/index.mjs.map +1 -1
package/README.md CHANGED
@@ -13,17 +13,14 @@ npm install @xsolla/xui-checkbox
13
13
  ### Basic Checkbox
14
14
 
15
15
  ```tsx
16
- import * as React from 'react';
17
- import { Checkbox } from '@xsolla/xui-checkbox';
16
+ import * as React from "react";
17
+ import { Checkbox } from "@xsolla/xui-checkbox";
18
18
 
19
19
  export default function BasicCheckbox() {
20
20
  const [checked, setChecked] = React.useState(false);
21
21
 
22
22
  return (
23
- <Checkbox
24
- checked={checked}
25
- onChange={(e) => setChecked(e.target.checked)}
26
- >
23
+ <Checkbox checked={checked} onChange={(e) => setChecked(e.target.checked)}>
27
24
  Accept terms and conditions
28
25
  </Checkbox>
29
26
  );
@@ -33,8 +30,8 @@ export default function BasicCheckbox() {
33
30
  ### Checkbox with Description
34
31
 
35
32
  ```tsx
36
- import * as React from 'react';
37
- import { Checkbox } from '@xsolla/xui-checkbox';
33
+ import * as React from "react";
34
+ import { Checkbox } from "@xsolla/xui-checkbox";
38
35
 
39
36
  export default function CheckboxWithDescription() {
40
37
  const [checked, setChecked] = React.useState(false);
@@ -54,12 +51,12 @@ export default function CheckboxWithDescription() {
54
51
  ### Checkbox Sizes
55
52
 
56
53
  ```tsx
57
- import * as React from 'react';
58
- import { Checkbox } from '@xsolla/xui-checkbox';
54
+ import * as React from "react";
55
+ import { Checkbox } from "@xsolla/xui-checkbox";
59
56
 
60
57
  export default function CheckboxSizes() {
61
58
  return (
62
- <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
59
+ <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
63
60
  <Checkbox size="sm">Small checkbox</Checkbox>
64
61
  <Checkbox size="md">Medium checkbox (default)</Checkbox>
65
62
  <Checkbox size="lg">Large checkbox</Checkbox>
@@ -72,14 +69,14 @@ export default function CheckboxSizes() {
72
69
  ### Indeterminate State
73
70
 
74
71
  ```tsx
75
- import * as React from 'react';
76
- import { Checkbox } from '@xsolla/xui-checkbox';
72
+ import * as React from "react";
73
+ import { Checkbox } from "@xsolla/xui-checkbox";
77
74
 
78
75
  export default function IndeterminateCheckbox() {
79
76
  const [items, setItems] = React.useState([
80
- { id: 1, label: 'Item 1', checked: true },
81
- { id: 2, label: 'Item 2', checked: false },
82
- { id: 3, label: 'Item 3', checked: true },
77
+ { id: 1, label: "Item 1", checked: true },
78
+ { id: 2, label: "Item 2", checked: false },
79
+ { id: 3, label: "Item 3", checked: true },
83
80
  ]);
84
81
 
85
82
  const allChecked = items.every((item) => item.checked);
@@ -90,7 +87,7 @@ export default function IndeterminateCheckbox() {
90
87
  };
91
88
 
92
89
  return (
93
- <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
90
+ <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
94
91
  <Checkbox
95
92
  checked={allChecked}
96
93
  indeterminate={someChecked && !allChecked}
@@ -98,15 +95,24 @@ export default function IndeterminateCheckbox() {
98
95
  >
99
96
  Select all
100
97
  </Checkbox>
101
- <div style={{ marginLeft: 24, display: 'flex', flexDirection: 'column', gap: 8 }}>
98
+ <div
99
+ style={{
100
+ marginLeft: 24,
101
+ display: "flex",
102
+ flexDirection: "column",
103
+ gap: 8,
104
+ }}
105
+ >
102
106
  {items.map((item) => (
103
107
  <Checkbox
104
108
  key={item.id}
105
109
  checked={item.checked}
106
110
  onChange={(e) => {
107
- setItems(items.map((i) =>
108
- i.id === item.id ? { ...i, checked: e.target.checked } : i
109
- ));
111
+ setItems(
112
+ items.map((i) =>
113
+ i.id === item.id ? { ...i, checked: e.target.checked } : i
114
+ )
115
+ );
110
116
  }}
111
117
  >
112
118
  {item.label}
@@ -123,19 +129,19 @@ export default function IndeterminateCheckbox() {
123
129
  Import the component and use it directly:
124
130
 
125
131
  ```jsx
126
- import { Checkbox } from '@xsolla/xui-checkbox';
132
+ import { Checkbox } from "@xsolla/xui-checkbox";
127
133
 
128
134
  <Checkbox
129
- checked={checked} // Controlled checked state
130
- onChange={handleChange} // Change handler
131
- indeterminate={false} // Indeterminate/mixed state
132
- size="md" // Size variant
133
- description="Help text" // Description below label
134
- errorMessage="Error text" // Error message
135
- disabled={false} // Disabled state
135
+ checked={checked} // Controlled checked state
136
+ onChange={handleChange} // Change handler
137
+ indeterminate={false} // Indeterminate/mixed state
138
+ size="md" // Size variant
139
+ description="Help text" // Description below label
140
+ errorMessage="Error text" // Error message
141
+ disabled={false} // Disabled state
136
142
  >
137
143
  Label text
138
- </Checkbox>
144
+ </Checkbox>;
139
145
  ```
140
146
 
141
147
  ## Examples
@@ -143,8 +149,8 @@ import { Checkbox } from '@xsolla/xui-checkbox';
143
149
  ### Error State
144
150
 
145
151
  ```tsx
146
- import * as React from 'react';
147
- import { Checkbox } from '@xsolla/xui-checkbox';
152
+ import * as React from "react";
153
+ import { Checkbox } from "@xsolla/xui-checkbox";
148
154
 
149
155
  export default function ErrorCheckbox() {
150
156
  return (
@@ -161,15 +167,19 @@ export default function ErrorCheckbox() {
161
167
  ### Disabled Checkbox
162
168
 
163
169
  ```tsx
164
- import * as React from 'react';
165
- import { Checkbox } from '@xsolla/xui-checkbox';
170
+ import * as React from "react";
171
+ import { Checkbox } from "@xsolla/xui-checkbox";
166
172
 
167
173
  export default function DisabledCheckbox() {
168
174
  return (
169
- <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
175
+ <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
170
176
  <Checkbox disabled>Disabled unchecked</Checkbox>
171
- <Checkbox disabled checked>Disabled checked</Checkbox>
172
- <Checkbox disabled indeterminate>Disabled indeterminate</Checkbox>
177
+ <Checkbox disabled checked>
178
+ Disabled checked
179
+ </Checkbox>
180
+ <Checkbox disabled indeterminate>
181
+ Disabled indeterminate
182
+ </Checkbox>
173
183
  </div>
174
184
  );
175
185
  }
@@ -178,9 +188,9 @@ export default function DisabledCheckbox() {
178
188
  ### Form Integration
179
189
 
180
190
  ```tsx
181
- import * as React from 'react';
182
- import { Checkbox } from '@xsolla/xui-checkbox';
183
- import { Button } from '@xsolla/xui-button';
191
+ import * as React from "react";
192
+ import { Checkbox } from "@xsolla/xui-checkbox";
193
+ import { Button } from "@xsolla/xui-button";
184
194
 
185
195
  export default function FormCheckbox() {
186
196
  const [preferences, setPreferences] = React.useState({
@@ -189,31 +199,37 @@ export default function FormCheckbox() {
189
199
  newsletter: false,
190
200
  });
191
201
 
192
- const handleChange = (key: string) => (e: { target: { checked: boolean } }) => {
193
- setPreferences((prev) => ({ ...prev, [key]: e.target.checked }));
194
- };
202
+ const handleChange =
203
+ (key: string) => (e: { target: { checked: boolean } }) => {
204
+ setPreferences((prev) => ({ ...prev, [key]: e.target.checked }));
205
+ };
195
206
 
196
207
  return (
197
- <form onSubmit={(e) => { e.preventDefault(); console.log(preferences); }}>
198
- <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
208
+ <form
209
+ onSubmit={(e) => {
210
+ e.preventDefault();
211
+ console.log(preferences);
212
+ }}
213
+ >
214
+ <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
199
215
  <Checkbox
200
216
  name="marketing"
201
217
  checked={preferences.marketing}
202
- onChange={handleChange('marketing')}
218
+ onChange={handleChange("marketing")}
203
219
  >
204
220
  Receive marketing emails
205
221
  </Checkbox>
206
222
  <Checkbox
207
223
  name="updates"
208
224
  checked={preferences.updates}
209
- onChange={handleChange('updates')}
225
+ onChange={handleChange("updates")}
210
226
  >
211
227
  Receive product updates
212
228
  </Checkbox>
213
229
  <Checkbox
214
230
  name="newsletter"
215
231
  checked={preferences.newsletter}
216
- onChange={handleChange('newsletter')}
232
+ onChange={handleChange("newsletter")}
217
233
  >
218
234
  Subscribe to newsletter
219
235
  </Checkbox>
@@ -232,37 +248,38 @@ The main checkbox component with label support.
232
248
 
233
249
  **Checkbox Props:**
234
250
 
235
- | Prop | Type | Default | Description |
236
- | :--- | :--- | :------ | :---------- |
237
- | children | `ReactNode` | - | Label content displayed next to the checkbox. |
238
- | checked | `boolean` | `false` | Whether the checkbox is checked. |
239
- | indeterminate | `boolean` | `false` | Whether to show indeterminate (mixed) state. |
240
- | size | `"sm" \| "md" \| "lg" \| "xl"` | `"md"` | Size of the checkbox. |
241
- | disabled | `boolean` | `false` | Whether the checkbox is disabled. |
242
- | description | `string` | - | Description text displayed below the label. |
243
- | errorMessage | `string` | - | Error message displayed below (shows error styling). |
244
- | error | `boolean` | `false` | Show error styling without message. |
245
- | name | `string` | - | HTML name attribute for form submission. |
246
- | value | `string` | - | HTML value attribute for form submission. |
247
- | onChange | `(e: { target: { checked: boolean; name?: string; value?: string } }) => void` | - | Change event handler. |
248
- | id | `string` | - | HTML id attribute. |
249
- | aria-label | `string` | - | Accessible label for screen readers. |
251
+ | Prop | Type | Default | Description |
252
+ | :------------ | :----------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------ |
253
+ | `testID` | `string` | — | Test ID for testing frameworks. On web this renders as `data-testid`; on React Native it renders as `testID`. |
254
+ | children | `ReactNode` | - | Label content displayed next to the checkbox. |
255
+ | checked | `boolean` | `false` | Whether the checkbox is checked. |
256
+ | indeterminate | `boolean` | `false` | Whether to show indeterminate (mixed) state. |
257
+ | size | `"sm" \| "md" \| "lg" \| "xl"` | `"md"` | Size of the checkbox. |
258
+ | disabled | `boolean` | `false` | Whether the checkbox is disabled. |
259
+ | description | `string` | - | Description text displayed below the label. |
260
+ | errorMessage | `string` | - | Error message displayed below (shows error styling). |
261
+ | error | `boolean` | `false` | Show error styling without message. |
262
+ | name | `string` | - | HTML name attribute for form submission. |
263
+ | value | `string` | - | HTML value attribute for form submission. |
264
+ | onChange | `(e: { target: { checked: boolean; name?: string; value?: string } }) => void` | - | Change event handler. |
265
+ | id | `string` | - | HTML id attribute. |
266
+ | aria-label | `string` | - | Accessible label for screen readers. |
250
267
 
251
268
  **Checkbox Ref Methods:**
252
269
 
253
- | Method | Description |
254
- | :----- | :---------- |
270
+ | Method | Description |
271
+ | :-------- | :----------------------------------- |
255
272
  | `focus()` | Programmatically focus the checkbox. |
256
- | `blur()` | Programmatically blur the checkbox. |
273
+ | `blur()` | Programmatically blur the checkbox. |
257
274
 
258
275
  **Size Configuration:**
259
276
 
260
- | Size | Checkbox | Icon | Gap | Label font/line | Description font/line |
261
- | :--- | :------- | :--- | :-- | :-------------- | :-------------------- |
262
- | sm | 16px | 10px | 6px | 14 / 16 | 12 / 14 |
263
- | md | 18px | 12px | 8px | 16 / 18 | 14 / 16 |
264
- | lg | 20px | 14px | 10px | 18 / 20 | 16 / 18 |
265
- | xl | 24px | 16px | 12px | 20 / 22 | 18 / 20 |
277
+ | Size | Checkbox | Icon | Gap | Label font/line | Description font/line |
278
+ | :--- | :------- | :--- | :--- | :-------------- | :-------------------- |
279
+ | sm | 16px | 10px | 6px | 14 / 16 | 12 / 14 |
280
+ | md | 18px | 12px | 8px | 16 / 18 | 14 / 16 |
281
+ | lg | 20px | 14px | 10px | 18 / 20 | 16 / 18 |
282
+ | xl | 24px | 16px | 12px | 20 / 22 | 18 / 20 |
266
283
 
267
284
  Frame border is 1px with 4px radius at every size.
268
285
 
package/native/index.d.mts CHANGED
@@ -35,6 +35,8 @@ interface CheckboxProps extends ThemeOverrideProps {
35
35
  id?: string;
36
36
  /** Accessible label for screen readers when no visible label */
37
37
  "aria-label"?: string;
38
+ /** Test ID for testing frameworks */
39
+ testID?: string;
38
40
  }
39
41
  interface CheckboxRef {
40
42
  focus: () => void;
package/native/index.d.ts CHANGED
@@ -35,6 +35,8 @@ interface CheckboxProps extends ThemeOverrideProps {
35
35
  id?: string;
36
36
  /** Accessible label for screen readers when no visible label */
37
37
  "aria-label"?: string;
38
+ /** Test ID for testing frameworks */
39
+ testID?: string;
38
40
  }
39
41
  interface CheckboxRef {
40
42
  focus: () => void;
package/native/index.js CHANGED
@@ -228,6 +228,8 @@ var Text = ({
228
228
  numberOfLines,
229
229
  id,
230
230
  role,
231
+ testID,
232
+ "data-testid": dataTestId,
231
233
  style: styleProp,
232
234
  ...props
233
235
  }) => {
@@ -257,7 +259,7 @@ var Text = ({
257
259
  {
258
260
  style: baseStyle,
259
261
  numberOfLines,
260
- testID: id,
262
+ testID: dataTestId || testID || id,
261
263
  accessibilityRole,
262
264
  children
263
265
  }
@@ -358,6 +360,7 @@ var Checkbox = (0, import_react.forwardRef)(
358
360
  onChange,
359
361
  id: providedId,
360
362
  "aria-label": ariaLabel,
363
+ testID,
361
364
  themeMode,
362
365
  themeProductContext
363
366
  }, ref) {
@@ -476,7 +479,7 @@ var Checkbox = (0, import_react.forwardRef)(
476
479
  outlineOffset: 2,
477
480
  outlineStyle: "solid"
478
481
  },
479
- "data-testid": "checkbox",
482
+ testID: testID || "checkbox",
480
483
  children: [
481
484
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
482
485
  Box,
package/native/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/index.tsx","../../src/Checkbox.tsx","../../../../foundation/primitives-native/src/Box.tsx","../../../../foundation/primitives-native/src/Text.tsx"],"sourcesContent":["export * from \"./Checkbox\";\n","import React, {\n forwardRef,\n useRef,\n useState,\n useImperativeHandle,\n} from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text } from \"@xsolla/xui-primitives\";\nimport {\n useResolvedTheme,\n useId,\n type ThemeOverrideProps,\n} from \"@xsolla/xui-core\";\ntype ComponentSize = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\n// Inline 12×12 glyphs so stroke thickness scales correctly at every checkbox size.\nconst CheckIcon = ({ size, color }: { size: number; color: string }) => (\n <svg\n width={size}\n height={size}\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M10.6699 4.2959L6.00293 8.96387C5.72637 9.24043 5.27761 9.24031 5.00098 8.96387L2 5.96289L3.2959 4.66699L5.50098 6.87207L9.37402 3L10.6699 4.2959Z\"\n fill={color}\n />\n </svg>\n);\n\nconst MinusIcon = ({ size, color }: { size: number; color: string }) => (\n <svg\n width={size}\n height={size}\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M11 5V7H1V5H11Z\" fill={color} />\n </svg>\n);\n\nexport interface CheckboxProps extends ThemeOverrideProps {\n /** Content/label to display next to the checkbox */\n children?: React.ReactNode;\n /** Size of the checkbox */\n size?: ComponentSize;\n /** Whether the checkbox is checked */\n checked?: boolean;\n /** The indeterminate checked state of checkbox */\n indeterminate?: boolean;\n /** Additional descriptive text below the label */\n description?: string;\n /** Error message to display (also highlights control as invalid) */\n errorMessage?: string;\n /** Highlight control as invalid without message */\n error?: boolean;\n /** Whether the checkbox is disabled */\n disabled?: boolean;\n /** Name attribute for the checkbox */\n name?: string;\n /** Value attribute for the checkbox */\n value?: string;\n /** Callback when the checkbox value changes */\n onChange?: (e: {\n target: { checked: boolean; name?: string; value?: string };\n }) => void;\n /** Unique identifier for the checkbox */\n id?: string;\n /** Accessible label for screen readers when no visible label */\n \"aria-label\"?: string;\n}\n\n// Ref type that works for both web and native\nexport interface CheckboxRef {\n focus: () => void;\n blur: () => void;\n}\n\n// Icon sizes (Figma: checkbox/{size}/icon/size; md inferred as 12 — linear pattern 10/12/14/16)\nconst iconSizeMap: Record<ComponentSize, number> = {\n sm: 10,\n md: 12,\n lg: 14,\n xl: 16,\n};\n\n// Checkbox box sizes (Figma: checkbox/{size}/frame/size)\nconst checkboxSizeMap: Record<ComponentSize, number> = {\n sm: 16,\n md: 18,\n lg: 20,\n xl: 24,\n};\n\n// Label gap sizes (Figma: checkbox/{size}/gap)\nconst labelGapMap: Record<ComponentSize, number> = {\n sm: 6,\n md: 8,\n lg: 10,\n xl: 12,\n};\n\n// Text gap sizes (gap between label and description/error)\nconst textGapMap: Record<ComponentSize, number> = {\n sm: 0,\n md: 2,\n lg: 2,\n xl: 4,\n};\n\n// Label font-size (Figma: checkbox/{size}/typography/font-size)\nconst fontSizeMap: Record<ComponentSize, number> = {\n sm: 14,\n md: 16,\n lg: 18,\n xl: 20,\n};\n\n// Label line-height (Figma: checkbox/{size}/typography/line-height)\nconst lineHeightMap: Record<ComponentSize, number> = {\n sm: 16,\n md: 18,\n lg: 20,\n xl: 22,\n};\n\n// Description font-size (Figma: field-group/{size}/typography/font-size)\nconst descriptionFontSizeMap: Record<ComponentSize, number> = {\n sm: 12,\n md: 14,\n lg: 16,\n xl: 18,\n};\n\n// Description line-height (Figma: field-group/{size}/typography/line-height)\nconst descriptionLineHeightMap: Record<ComponentSize, number> = {\n sm: 14,\n md: 16,\n lg: 18,\n xl: 20,\n};\n\nexport const Checkbox = forwardRef<CheckboxRef, CheckboxProps>(\n function Checkbox(\n {\n children,\n size = \"md\",\n checked,\n indeterminate = false,\n description,\n errorMessage,\n error,\n disabled,\n name,\n value,\n onChange,\n id: providedId,\n \"aria-label\": ariaLabel,\n themeMode,\n themeProductContext,\n },\n ref\n ) {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const containerRef = useRef<HTMLDivElement>(null);\n\n // Internal state for uncontrolled mode\n const [internalChecked, setInternalChecked] = useState(false);\n\n // Generate unique IDs for accessibility\n const rawId = useId();\n const safeId = rawId.replace(/:/g, \"\");\n const checkboxId = providedId || `checkbox-${safeId}`;\n const labelId = `${checkboxId}-label`;\n const descriptionId = `${checkboxId}-description`;\n const errorId = `${checkboxId}-error`;\n\n // Determine if controlled or uncontrolled\n const isControlled = checked !== undefined;\n const isChecked = isControlled ? checked : internalChecked;\n\n // Expose focus/blur methods via ref\n useImperativeHandle(\n ref,\n () => ({\n focus: () => containerRef.current?.focus(),\n blur: () => containerRef.current?.blur(),\n }),\n []\n );\n\n // Handle toggle for both controlled and uncontrolled modes\n const handleToggle = () => {\n if (disabled) return;\n\n // If indeterminate, always set to checked (true) for predictable UX\n const newChecked = indeterminate ? true : !isChecked;\n\n if (!isControlled) {\n setInternalChecked(newChecked);\n }\n\n onChange?.({\n target: {\n checked: newChecked,\n name,\n value,\n },\n });\n };\n\n // Handle keyboard interaction\n const handleKeyDown = (event: React.KeyboardEvent) => {\n const key = event.key;\n // Normalize Space key detection across browsers\n const isSpace = key === \" \" || key === \"Spacebar\" || key === \"Space\";\n if (isSpace || key === \"Enter\") {\n event.preventDefault();\n handleToggle();\n }\n };\n\n const isError = !!(errorMessage || error);\n const hasTexts = !!children || !!description;\n const isShowErrorMessage = !!errorMessage && hasTexts;\n const isCheckedOrIndeterminate = isChecked || indeterminate;\n\n // Build aria-describedby value\n // Only reference IDs of elements that are actually rendered\n const ariaDescribedByParts: string[] = [];\n if (description) ariaDescribedByParts.push(descriptionId);\n if (isShowErrorMessage) ariaDescribedByParts.push(errorId);\n const ariaDescribedBy =\n ariaDescribedByParts.length > 0\n ? ariaDescribedByParts.join(\" \")\n : undefined;\n\n // Resolve Colors from Theme\n const checkColors = theme.colors.control.check;\n const faintColors = theme.colors.control.faint;\n const textColors = theme.colors.control.text;\n const contentColors = theme.colors.content;\n const borderColors = theme.colors.border;\n\n /**\n * Get checkbox background color based on state\n */\n const getCheckboxBgColor = () => {\n if (disabled) {\n return checkColors.bgDisable;\n }\n if (isCheckedOrIndeterminate) {\n return checkColors.bg;\n }\n return faintColors.bg;\n };\n\n /**\n * Get checkbox border color\n */\n const getBorderColor = () => {\n if (isError) {\n return borderColors.alert;\n }\n if (isCheckedOrIndeterminate && !disabled) {\n return checkColors.border;\n }\n return faintColors.border;\n };\n\n /**\n * Get label text color\n */\n const getLabelColor = () => {\n if (disabled) return textColors.disable;\n return textColors.primary;\n };\n\n /**\n * Get description text color\n */\n const getDescriptionColor = () => {\n if (disabled) return textColors.disable;\n return contentColors.tertiary;\n };\n\n /**\n * Get error message text color\n */\n const getErrorMessageColor = () => {\n return contentColors.alert.primary;\n };\n\n /**\n * Get checkmark/minus icon color\n */\n const getIconColor = () => {\n if (disabled) return textColors.disable;\n return checkColors.icon;\n };\n\n // Determine aria-checked value\n const getAriaChecked = (): \"true\" | \"false\" | \"mixed\" => {\n if (indeterminate) return \"mixed\";\n return isChecked ? \"true\" : \"false\";\n };\n\n return (\n <Box\n id={checkboxId}\n ref={containerRef}\n flexDirection=\"row\"\n alignItems=\"flex-start\"\n gap={labelGapMap[size]}\n disabled={disabled}\n role=\"checkbox\"\n aria-checked={getAriaChecked()}\n aria-disabled={disabled || undefined}\n aria-invalid={isError || undefined}\n aria-describedby={ariaDescribedBy}\n aria-labelledby={children ? labelId : undefined}\n aria-label={!children ? ariaLabel : undefined}\n tabIndex={disabled ? -1 : 0}\n onKeyDown={handleKeyDown}\n focusStyle={{\n outlineColor: theme.colors.border.brand,\n outlineWidth: 2,\n outlineOffset: 2,\n outlineStyle: \"solid\",\n }}\n data-testid=\"checkbox\"\n >\n {/* Custom checkbox visual */}\n <Box\n width={checkboxSizeMap[size]}\n height={checkboxSizeMap[size]}\n backgroundColor={getCheckboxBgColor()}\n borderColor={getBorderColor()}\n borderWidth={1}\n borderRadius={4}\n alignItems=\"center\"\n justifyContent=\"center\"\n flexShrink={0}\n onPress={handleToggle}\n cursor={disabled ? \"not-allowed\" : \"pointer\"}\n hoverStyle={\n !disabled\n ? {\n backgroundColor: isCheckedOrIndeterminate\n ? checkColors.bgHover\n : faintColors.bgHover,\n borderColor: isError\n ? borderColors.alert\n : isCheckedOrIndeterminate\n ? checkColors.borderHover\n : faintColors.borderHover,\n }\n : undefined\n }\n data-testid=\"checkbox__box\"\n >\n {isCheckedOrIndeterminate &&\n (indeterminate ? (\n <MinusIcon size={iconSizeMap[size]} color={getIconColor()} />\n ) : (\n <CheckIcon size={iconSizeMap[size]} color={getIconColor()} />\n ))}\n </Box>\n\n {/* Label, Description & Error Message */}\n {hasTexts && (\n <Box\n flexDirection=\"column\"\n alignItems=\"flex-start\"\n gap={textGapMap[size]}\n >\n {children && (\n <Box\n onPress={handleToggle}\n cursor={disabled ? \"not-allowed\" : \"pointer\"}\n >\n <Text\n id={labelId}\n color={getLabelColor()}\n fontSize={fontSizeMap[size]}\n lineHeight={lineHeightMap[size]}\n fontWeight={400}\n data-testid=\"checkbox__label\"\n >\n {children}\n </Text>\n </Box>\n )}\n {description && (\n <Text\n id={descriptionId}\n color={getDescriptionColor()}\n fontSize={descriptionFontSizeMap[size]}\n lineHeight={descriptionLineHeightMap[size]}\n data-testid=\"checkbox__description\"\n >\n {description}\n </Text>\n )}\n {isShowErrorMessage && (\n <Text\n id={errorId}\n role=\"alert\"\n color={getErrorMessageColor()}\n fontSize={descriptionFontSizeMap[size]}\n lineHeight={descriptionLineHeightMap[size]}\n data-testid=\"checkbox__error\"\n >\n {errorMessage}\n </Text>\n )}\n </Box>\n )}\n </Box>\n );\n }\n);\n\nCheckbox.displayName = \"Checkbox\";\n","import React from \"react\";\nimport {\n View,\n Pressable,\n Image,\n ViewStyle,\n ImageStyle,\n DimensionValue,\n AnimatableNumericValue,\n} from \"react-native\";\nimport { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Box: React.FC<BoxProps> = ({\n children,\n onPress,\n onLayout,\n onMoveShouldSetResponder,\n onResponderGrant,\n onResponderMove,\n onResponderRelease,\n onResponderTerminate,\n backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius,\n borderStyle,\n height,\n padding,\n paddingHorizontal,\n paddingVertical,\n margin,\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n flexDirection,\n alignItems,\n justifyContent,\n position,\n top,\n bottom,\n left,\n right,\n width,\n minWidth,\n minHeight,\n maxWidth,\n maxHeight,\n flex,\n overflow,\n zIndex,\n hoverStyle,\n pressStyle,\n style,\n \"data-testid\": dataTestId,\n testID,\n as,\n src,\n alt,\n ...rest\n}) => {\n const getContainerStyle = (pressed?: boolean): ViewStyle => ({\n backgroundColor:\n pressed && pressStyle?.backgroundColor\n ? pressStyle.backgroundColor\n : backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius: borderRadius as AnimatableNumericValue,\n borderStyle: borderStyle as ViewStyle[\"borderStyle\"],\n overflow,\n zIndex,\n height: height as DimensionValue,\n width: width as DimensionValue,\n minWidth: minWidth as DimensionValue,\n minHeight: minHeight as DimensionValue,\n maxWidth: maxWidth as DimensionValue,\n maxHeight: maxHeight as DimensionValue,\n padding: padding as DimensionValue,\n paddingHorizontal: paddingHorizontal as DimensionValue,\n paddingVertical: paddingVertical as DimensionValue,\n margin: margin as DimensionValue,\n marginTop: marginTop as DimensionValue,\n marginBottom: marginBottom as DimensionValue,\n marginLeft: marginLeft as DimensionValue,\n marginRight: marginRight as DimensionValue,\n flexDirection,\n alignItems,\n justifyContent,\n position: position as ViewStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n flex,\n ...(style as ViewStyle),\n });\n\n const finalTestID = dataTestId || testID;\n\n // Destructure and drop web-only props from rest before passing to RN components\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const {\n role,\n tabIndex,\n onKeyDown,\n onKeyUp,\n \"aria-label\": _ariaLabel,\n \"aria-labelledby\": _ariaLabelledBy,\n \"aria-current\": _ariaCurrent,\n \"aria-disabled\": _ariaDisabled,\n \"aria-live\": _ariaLive,\n className,\n \"data-testid\": _dataTestId,\n ...nativeRest\n } = rest as Record<string, unknown>;\n\n // Handle as=\"img\" for React Native\n if (as === \"img\" && src) {\n const imageStyle: ImageStyle = {\n width: width as DimensionValue,\n height: height as DimensionValue,\n borderRadius: borderRadius as number,\n position: position as ImageStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n ...(style as ImageStyle),\n };\n\n return (\n <Image\n source={{ uri: src }}\n style={imageStyle}\n testID={finalTestID}\n resizeMode=\"cover\"\n {...nativeRest}\n />\n );\n }\n\n if (onPress) {\n return (\n <Pressable\n onPress={onPress}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n style={({ pressed }) => getContainerStyle(pressed)}\n testID={finalTestID}\n {...nativeRest}\n >\n {children}\n </Pressable>\n );\n }\n\n return (\n <View\n style={getContainerStyle()}\n testID={finalTestID}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n {...nativeRest}\n >\n {children}\n </View>\n );\n};\n","import React from \"react\";\nimport {\n Text as RNText,\n TextStyle,\n AccessibilityRole,\n StyleSheet,\n} from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst roleMap: Record<string, AccessibilityRole> = {\n alert: \"alert\",\n heading: \"header\",\n button: \"button\",\n link: \"link\",\n text: \"text\",\n};\n\nconst parseNumericValue = (\n value: string | number | undefined\n): number | undefined => {\n if (value === undefined) return undefined;\n if (typeof value === \"number\") return value;\n const parsed = parseFloat(value);\n return isNaN(parsed) ? undefined : parsed;\n};\n\nexport const Text: React.FC<TextProps> = ({\n children,\n color,\n fontSize,\n fontWeight,\n fontFamily,\n textAlign,\n lineHeight,\n numberOfLines,\n id,\n role,\n style: styleProp,\n ...props\n}) => {\n let resolvedFontFamily = fontFamily\n ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n : undefined;\n\n if (\n resolvedFontFamily === \"Pilat Wide\" ||\n resolvedFontFamily === \"Pilat Wide Bold\" ||\n resolvedFontFamily === \"Aktiv Grotesk\"\n ) {\n resolvedFontFamily = undefined;\n }\n\n const incomingStyle = StyleSheet.flatten(styleProp) as TextStyle | undefined;\n\n const baseStyle: TextStyle = {\n color: color ?? incomingStyle?.color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n fontWeight: fontWeight as TextStyle[\"fontWeight\"],\n fontFamily: resolvedFontFamily,\n textDecorationLine: props.textDecoration as TextStyle[\"textDecorationLine\"],\n textAlign: textAlign ?? incomingStyle?.textAlign,\n lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),\n marginTop: parseNumericValue(\n incomingStyle?.marginTop as number | string | undefined\n ),\n marginBottom: parseNumericValue(\n incomingStyle?.marginBottom as number | string | undefined\n ),\n };\n\n const accessibilityRole = role ? roleMap[role] : undefined;\n\n return (\n <RNText\n style={baseStyle}\n numberOfLines={numberOfLines}\n testID={id}\n accessibilityRole={accessibilityRole}\n >\n {children}\n </RNText>\n );\n};\n"],"mappings":"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","names":["import_react_native","import_jsx_runtime","RNText","import_jsx_runtime","Checkbox"]}
1
+ {"version":3,"sources":["../../src/index.tsx","../../src/Checkbox.tsx","../../../../foundation/primitives-native/src/Box.tsx","../../../../foundation/primitives-native/src/Text.tsx"],"sourcesContent":["export * from \"./Checkbox\";\n","import React, {\n forwardRef,\n useRef,\n useState,\n useImperativeHandle,\n} from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text } from \"@xsolla/xui-primitives\";\nimport {\n useResolvedTheme,\n useId,\n type ThemeOverrideProps,\n} from \"@xsolla/xui-core\";\ntype ComponentSize = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\n// Inline 12×12 glyphs so stroke thickness scales correctly at every checkbox size.\nconst CheckIcon = ({ size, color }: { size: number; color: string }) => (\n <svg\n width={size}\n height={size}\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M10.6699 4.2959L6.00293 8.96387C5.72637 9.24043 5.27761 9.24031 5.00098 8.96387L2 5.96289L3.2959 4.66699L5.50098 6.87207L9.37402 3L10.6699 4.2959Z\"\n fill={color}\n />\n </svg>\n);\n\nconst MinusIcon = ({ size, color }: { size: number; color: string }) => (\n <svg\n width={size}\n height={size}\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M11 5V7H1V5H11Z\" fill={color} />\n </svg>\n);\n\nexport interface CheckboxProps extends ThemeOverrideProps {\n /** Content/label to display next to the checkbox */\n children?: React.ReactNode;\n /** Size of the checkbox */\n size?: ComponentSize;\n /** Whether the checkbox is checked */\n checked?: boolean;\n /** The indeterminate checked state of checkbox */\n indeterminate?: boolean;\n /** Additional descriptive text below the label */\n description?: string;\n /** Error message to display (also highlights control as invalid) */\n errorMessage?: string;\n /** Highlight control as invalid without message */\n error?: boolean;\n /** Whether the checkbox is disabled */\n disabled?: boolean;\n /** Name attribute for the checkbox */\n name?: string;\n /** Value attribute for the checkbox */\n value?: string;\n /** Callback when the checkbox value changes */\n onChange?: (e: {\n target: { checked: boolean; name?: string; value?: string };\n }) => void;\n /** Unique identifier for the checkbox */\n id?: string;\n /** Accessible label for screen readers when no visible label */\n \"aria-label\"?: string;\n /** Test ID for testing frameworks */\n testID?: string;\n}\n\n// Ref type that works for both web and native\nexport interface CheckboxRef {\n focus: () => void;\n blur: () => void;\n}\n\n// Icon sizes (Figma: checkbox/{size}/icon/size; md inferred as 12 — linear pattern 10/12/14/16)\nconst iconSizeMap: Record<ComponentSize, number> = {\n sm: 10,\n md: 12,\n lg: 14,\n xl: 16,\n};\n\n// Checkbox box sizes (Figma: checkbox/{size}/frame/size)\nconst checkboxSizeMap: Record<ComponentSize, number> = {\n sm: 16,\n md: 18,\n lg: 20,\n xl: 24,\n};\n\n// Label gap sizes (Figma: checkbox/{size}/gap)\nconst labelGapMap: Record<ComponentSize, number> = {\n sm: 6,\n md: 8,\n lg: 10,\n xl: 12,\n};\n\n// Text gap sizes (gap between label and description/error)\nconst textGapMap: Record<ComponentSize, number> = {\n sm: 0,\n md: 2,\n lg: 2,\n xl: 4,\n};\n\n// Label font-size (Figma: checkbox/{size}/typography/font-size)\nconst fontSizeMap: Record<ComponentSize, number> = {\n sm: 14,\n md: 16,\n lg: 18,\n xl: 20,\n};\n\n// Label line-height (Figma: checkbox/{size}/typography/line-height)\nconst lineHeightMap: Record<ComponentSize, number> = {\n sm: 16,\n md: 18,\n lg: 20,\n xl: 22,\n};\n\n// Description font-size (Figma: field-group/{size}/typography/font-size)\nconst descriptionFontSizeMap: Record<ComponentSize, number> = {\n sm: 12,\n md: 14,\n lg: 16,\n xl: 18,\n};\n\n// Description line-height (Figma: field-group/{size}/typography/line-height)\nconst descriptionLineHeightMap: Record<ComponentSize, number> = {\n sm: 14,\n md: 16,\n lg: 18,\n xl: 20,\n};\n\nexport const Checkbox = forwardRef<CheckboxRef, CheckboxProps>(\n function Checkbox(\n {\n children,\n size = \"md\",\n checked,\n indeterminate = false,\n description,\n errorMessage,\n error,\n disabled,\n name,\n value,\n onChange,\n id: providedId,\n \"aria-label\": ariaLabel,\n testID,\n themeMode,\n themeProductContext,\n },\n ref\n ) {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const containerRef = useRef<HTMLDivElement>(null);\n\n // Internal state for uncontrolled mode\n const [internalChecked, setInternalChecked] = useState(false);\n\n // Generate unique IDs for accessibility\n const rawId = useId();\n const safeId = rawId.replace(/:/g, \"\");\n const checkboxId = providedId || `checkbox-${safeId}`;\n const labelId = `${checkboxId}-label`;\n const descriptionId = `${checkboxId}-description`;\n const errorId = `${checkboxId}-error`;\n\n // Determine if controlled or uncontrolled\n const isControlled = checked !== undefined;\n const isChecked = isControlled ? checked : internalChecked;\n\n // Expose focus/blur methods via ref\n useImperativeHandle(\n ref,\n () => ({\n focus: () => containerRef.current?.focus(),\n blur: () => containerRef.current?.blur(),\n }),\n []\n );\n\n // Handle toggle for both controlled and uncontrolled modes\n const handleToggle = () => {\n if (disabled) return;\n\n // If indeterminate, always set to checked (true) for predictable UX\n const newChecked = indeterminate ? true : !isChecked;\n\n if (!isControlled) {\n setInternalChecked(newChecked);\n }\n\n onChange?.({\n target: {\n checked: newChecked,\n name,\n value,\n },\n });\n };\n\n // Handle keyboard interaction\n const handleKeyDown = (event: React.KeyboardEvent) => {\n const key = event.key;\n // Normalize Space key detection across browsers\n const isSpace = key === \" \" || key === \"Spacebar\" || key === \"Space\";\n if (isSpace || key === \"Enter\") {\n event.preventDefault();\n handleToggle();\n }\n };\n\n const isError = !!(errorMessage || error);\n const hasTexts = !!children || !!description;\n const isShowErrorMessage = !!errorMessage && hasTexts;\n const isCheckedOrIndeterminate = isChecked || indeterminate;\n\n // Build aria-describedby value\n // Only reference IDs of elements that are actually rendered\n const ariaDescribedByParts: string[] = [];\n if (description) ariaDescribedByParts.push(descriptionId);\n if (isShowErrorMessage) ariaDescribedByParts.push(errorId);\n const ariaDescribedBy =\n ariaDescribedByParts.length > 0\n ? ariaDescribedByParts.join(\" \")\n : undefined;\n\n // Resolve Colors from Theme\n const checkColors = theme.colors.control.check;\n const faintColors = theme.colors.control.faint;\n const textColors = theme.colors.control.text;\n const contentColors = theme.colors.content;\n const borderColors = theme.colors.border;\n\n /**\n * Get checkbox background color based on state\n */\n const getCheckboxBgColor = () => {\n if (disabled) {\n return checkColors.bgDisable;\n }\n if (isCheckedOrIndeterminate) {\n return checkColors.bg;\n }\n return faintColors.bg;\n };\n\n /**\n * Get checkbox border color\n */\n const getBorderColor = () => {\n if (isError) {\n return borderColors.alert;\n }\n if (isCheckedOrIndeterminate && !disabled) {\n return checkColors.border;\n }\n return faintColors.border;\n };\n\n /**\n * Get label text color\n */\n const getLabelColor = () => {\n if (disabled) return textColors.disable;\n return textColors.primary;\n };\n\n /**\n * Get description text color\n */\n const getDescriptionColor = () => {\n if (disabled) return textColors.disable;\n return contentColors.tertiary;\n };\n\n /**\n * Get error message text color\n */\n const getErrorMessageColor = () => {\n return contentColors.alert.primary;\n };\n\n /**\n * Get checkmark/minus icon color\n */\n const getIconColor = () => {\n if (disabled) return textColors.disable;\n return checkColors.icon;\n };\n\n // Determine aria-checked value\n const getAriaChecked = (): \"true\" | \"false\" | \"mixed\" => {\n if (indeterminate) return \"mixed\";\n return isChecked ? \"true\" : \"false\";\n };\n\n return (\n <Box\n id={checkboxId}\n ref={containerRef}\n flexDirection=\"row\"\n alignItems=\"flex-start\"\n gap={labelGapMap[size]}\n disabled={disabled}\n role=\"checkbox\"\n aria-checked={getAriaChecked()}\n aria-disabled={disabled || undefined}\n aria-invalid={isError || undefined}\n aria-describedby={ariaDescribedBy}\n aria-labelledby={children ? labelId : undefined}\n aria-label={!children ? ariaLabel : undefined}\n tabIndex={disabled ? -1 : 0}\n onKeyDown={handleKeyDown}\n focusStyle={{\n outlineColor: theme.colors.border.brand,\n outlineWidth: 2,\n outlineOffset: 2,\n outlineStyle: \"solid\",\n }}\n testID={testID || \"checkbox\"}\n >\n {/* Custom checkbox visual */}\n <Box\n width={checkboxSizeMap[size]}\n height={checkboxSizeMap[size]}\n backgroundColor={getCheckboxBgColor()}\n borderColor={getBorderColor()}\n borderWidth={1}\n borderRadius={4}\n alignItems=\"center\"\n justifyContent=\"center\"\n flexShrink={0}\n onPress={handleToggle}\n cursor={disabled ? \"not-allowed\" : \"pointer\"}\n hoverStyle={\n !disabled\n ? {\n backgroundColor: isCheckedOrIndeterminate\n ? checkColors.bgHover\n : faintColors.bgHover,\n borderColor: isError\n ? borderColors.alert\n : isCheckedOrIndeterminate\n ? checkColors.borderHover\n : faintColors.borderHover,\n }\n : undefined\n }\n data-testid=\"checkbox__box\"\n >\n {isCheckedOrIndeterminate &&\n (indeterminate ? (\n <MinusIcon size={iconSizeMap[size]} color={getIconColor()} />\n ) : (\n <CheckIcon size={iconSizeMap[size]} color={getIconColor()} />\n ))}\n </Box>\n\n {/* Label, Description & Error Message */}\n {hasTexts && (\n <Box\n flexDirection=\"column\"\n alignItems=\"flex-start\"\n gap={textGapMap[size]}\n >\n {children && (\n <Box\n onPress={handleToggle}\n cursor={disabled ? \"not-allowed\" : \"pointer\"}\n >\n <Text\n id={labelId}\n color={getLabelColor()}\n fontSize={fontSizeMap[size]}\n lineHeight={lineHeightMap[size]}\n fontWeight={400}\n data-testid=\"checkbox__label\"\n >\n {children}\n </Text>\n </Box>\n )}\n {description && (\n <Text\n id={descriptionId}\n color={getDescriptionColor()}\n fontSize={descriptionFontSizeMap[size]}\n lineHeight={descriptionLineHeightMap[size]}\n data-testid=\"checkbox__description\"\n >\n {description}\n </Text>\n )}\n {isShowErrorMessage && (\n <Text\n id={errorId}\n role=\"alert\"\n color={getErrorMessageColor()}\n fontSize={descriptionFontSizeMap[size]}\n lineHeight={descriptionLineHeightMap[size]}\n data-testid=\"checkbox__error\"\n >\n {errorMessage}\n </Text>\n )}\n </Box>\n )}\n </Box>\n );\n }\n);\n\nCheckbox.displayName = \"Checkbox\";\n","import React from \"react\";\nimport {\n View,\n Pressable,\n Image,\n ViewStyle,\n ImageStyle,\n DimensionValue,\n AnimatableNumericValue,\n} from \"react-native\";\nimport { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Box: React.FC<BoxProps> = ({\n children,\n onPress,\n onLayout,\n onMoveShouldSetResponder,\n onResponderGrant,\n onResponderMove,\n onResponderRelease,\n onResponderTerminate,\n backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius,\n borderStyle,\n height,\n padding,\n paddingHorizontal,\n paddingVertical,\n margin,\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n flexDirection,\n alignItems,\n justifyContent,\n position,\n top,\n bottom,\n left,\n right,\n width,\n minWidth,\n minHeight,\n maxWidth,\n maxHeight,\n flex,\n overflow,\n zIndex,\n hoverStyle,\n pressStyle,\n style,\n \"data-testid\": dataTestId,\n testID,\n as,\n src,\n alt,\n ...rest\n}) => {\n const getContainerStyle = (pressed?: boolean): ViewStyle => ({\n backgroundColor:\n pressed && pressStyle?.backgroundColor\n ? pressStyle.backgroundColor\n : backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius: borderRadius as AnimatableNumericValue,\n borderStyle: borderStyle as ViewStyle[\"borderStyle\"],\n overflow,\n zIndex,\n height: height as DimensionValue,\n width: width as DimensionValue,\n minWidth: minWidth as DimensionValue,\n minHeight: minHeight as DimensionValue,\n maxWidth: maxWidth as DimensionValue,\n maxHeight: maxHeight as DimensionValue,\n padding: padding as DimensionValue,\n paddingHorizontal: paddingHorizontal as DimensionValue,\n paddingVertical: paddingVertical as DimensionValue,\n margin: margin as DimensionValue,\n marginTop: marginTop as DimensionValue,\n marginBottom: marginBottom as DimensionValue,\n marginLeft: marginLeft as DimensionValue,\n marginRight: marginRight as DimensionValue,\n flexDirection,\n alignItems,\n justifyContent,\n position: position as ViewStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n flex,\n ...(style as ViewStyle),\n });\n\n const finalTestID = dataTestId || testID;\n\n // Destructure and drop web-only props from rest before passing to RN components\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const {\n role,\n tabIndex,\n onKeyDown,\n onKeyUp,\n \"aria-label\": _ariaLabel,\n \"aria-labelledby\": _ariaLabelledBy,\n \"aria-current\": _ariaCurrent,\n \"aria-disabled\": _ariaDisabled,\n \"aria-live\": _ariaLive,\n className,\n \"data-testid\": _dataTestId,\n ...nativeRest\n } = rest as Record<string, unknown>;\n\n // Handle as=\"img\" for React Native\n if (as === \"img\" && src) {\n const imageStyle: ImageStyle = {\n width: width as DimensionValue,\n height: height as DimensionValue,\n borderRadius: borderRadius as number,\n position: position as ImageStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n ...(style as ImageStyle),\n };\n\n return (\n <Image\n source={{ uri: src }}\n style={imageStyle}\n testID={finalTestID}\n resizeMode=\"cover\"\n {...nativeRest}\n />\n );\n }\n\n if (onPress) {\n return (\n <Pressable\n onPress={onPress}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n style={({ pressed }) => getContainerStyle(pressed)}\n testID={finalTestID}\n {...nativeRest}\n >\n {children}\n </Pressable>\n );\n }\n\n return (\n <View\n style={getContainerStyle()}\n testID={finalTestID}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n {...nativeRest}\n >\n {children}\n </View>\n );\n};\n","import React from \"react\";\nimport {\n Text as RNText,\n TextStyle,\n AccessibilityRole,\n StyleSheet,\n} from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst roleMap: Record<string, AccessibilityRole> = {\n alert: \"alert\",\n heading: \"header\",\n button: \"button\",\n link: \"link\",\n text: \"text\",\n};\n\nconst parseNumericValue = (\n value: string | number | undefined\n): number | undefined => {\n if (value === undefined) return undefined;\n if (typeof value === \"number\") return value;\n const parsed = parseFloat(value);\n return isNaN(parsed) ? undefined : parsed;\n};\n\nexport const Text: React.FC<TextProps> = ({\n children,\n color,\n fontSize,\n fontWeight,\n fontFamily,\n textAlign,\n lineHeight,\n numberOfLines,\n id,\n role,\n testID,\n \"data-testid\": dataTestId,\n style: styleProp,\n ...props\n}) => {\n let resolvedFontFamily = fontFamily\n ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n : undefined;\n\n if (\n resolvedFontFamily === \"Pilat Wide\" ||\n resolvedFontFamily === \"Pilat Wide Bold\" ||\n resolvedFontFamily === \"Aktiv Grotesk\"\n ) {\n resolvedFontFamily = undefined;\n }\n\n const incomingStyle = StyleSheet.flatten(styleProp) as TextStyle | undefined;\n\n const baseStyle: TextStyle = {\n color: color ?? incomingStyle?.color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n fontWeight: fontWeight as TextStyle[\"fontWeight\"],\n fontFamily: resolvedFontFamily,\n textDecorationLine: props.textDecoration as TextStyle[\"textDecorationLine\"],\n textAlign: textAlign ?? incomingStyle?.textAlign,\n lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),\n marginTop: parseNumericValue(\n incomingStyle?.marginTop as number | string | undefined\n ),\n marginBottom: parseNumericValue(\n incomingStyle?.marginBottom as number | string | undefined\n ),\n };\n\n const accessibilityRole = role ? roleMap[role] : undefined;\n\n return (\n <RNText\n style={baseStyle}\n numberOfLines={numberOfLines}\n testID={dataTestId || testID || id}\n accessibilityRole={accessibilityRole}\n >\n {children}\n </RNText>\n );\n};\n"],"mappings":"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","names":["import_react_native","import_jsx_runtime","RNText","import_jsx_runtime","Checkbox"]}
package/native/index.mjs CHANGED
@@ -214,6 +214,8 @@ var Text = ({
214
214
  numberOfLines,
215
215
  id,
216
216
  role,
217
+ testID,
218
+ "data-testid": dataTestId,
217
219
  style: styleProp,
218
220
  ...props
219
221
  }) => {
@@ -243,7 +245,7 @@ var Text = ({
243
245
  {
244
246
  style: baseStyle,
245
247
  numberOfLines,
246
- testID: id,
248
+ testID: dataTestId || testID || id,
247
249
  accessibilityRole,
248
250
  children
249
251
  }
@@ -347,6 +349,7 @@ var Checkbox = forwardRef(
347
349
  onChange,
348
350
  id: providedId,
349
351
  "aria-label": ariaLabel,
352
+ testID,
350
353
  themeMode,
351
354
  themeProductContext
352
355
  }, ref) {
@@ -465,7 +468,7 @@ var Checkbox = forwardRef(
465
468
  outlineOffset: 2,
466
469
  outlineStyle: "solid"
467
470
  },
468
- "data-testid": "checkbox",
471
+ testID: testID || "checkbox",
469
472
  children: [
470
473
  /* @__PURE__ */ jsx3(
471
474
  Box,