@xsolla/xui-checkbox 0.112.0 → 0.114.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/native/index.js +31 -3
- package/native/index.js.map +1 -1
- package/native/index.mjs +35 -4
- package/native/index.mjs.map +1 -1
- package/package.json +4 -4
- package/web/index.js +1 -0
- package/web/index.js.map +1 -1
- package/web/index.mjs +1 -0
- package/web/index.mjs.map +1 -1
package/native/index.js
CHANGED
|
@@ -203,29 +203,57 @@ var roleMap = {
|
|
|
203
203
|
link: "link",
|
|
204
204
|
text: "text"
|
|
205
205
|
};
|
|
206
|
+
var parseNumericValue = (value) => {
|
|
207
|
+
if (value === void 0) return void 0;
|
|
208
|
+
if (typeof value === "number") return value;
|
|
209
|
+
const parsed = parseFloat(value);
|
|
210
|
+
return isNaN(parsed) ? void 0 : parsed;
|
|
211
|
+
};
|
|
206
212
|
var Text = ({
|
|
207
213
|
children,
|
|
208
214
|
color,
|
|
209
215
|
fontSize,
|
|
210
216
|
fontWeight,
|
|
211
217
|
fontFamily,
|
|
218
|
+
textAlign,
|
|
219
|
+
lineHeight,
|
|
220
|
+
numberOfLines,
|
|
212
221
|
id,
|
|
213
222
|
role,
|
|
223
|
+
style: styleProp,
|
|
214
224
|
...props
|
|
215
225
|
}) => {
|
|
216
226
|
let resolvedFontFamily = fontFamily ? fontFamily.split(",")[0].replace(/['"]/g, "").trim() : void 0;
|
|
217
227
|
if (resolvedFontFamily === "Pilat Wide" || resolvedFontFamily === "Pilat Wide Bold" || resolvedFontFamily === "Aktiv Grotesk") {
|
|
218
228
|
resolvedFontFamily = void 0;
|
|
219
229
|
}
|
|
220
|
-
const
|
|
230
|
+
const incomingStyle = import_react_native2.StyleSheet.flatten(styleProp);
|
|
231
|
+
const baseStyle = {
|
|
221
232
|
color,
|
|
222
233
|
fontSize: typeof fontSize === "number" ? fontSize : void 0,
|
|
223
234
|
fontWeight,
|
|
224
235
|
fontFamily: resolvedFontFamily,
|
|
225
|
-
textDecorationLine: props.textDecoration
|
|
236
|
+
textDecorationLine: props.textDecoration,
|
|
237
|
+
textAlign: textAlign ?? incomingStyle?.textAlign,
|
|
238
|
+
lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),
|
|
239
|
+
marginTop: parseNumericValue(
|
|
240
|
+
incomingStyle?.marginTop
|
|
241
|
+
),
|
|
242
|
+
marginBottom: parseNumericValue(
|
|
243
|
+
incomingStyle?.marginBottom
|
|
244
|
+
)
|
|
226
245
|
};
|
|
227
246
|
const accessibilityRole = role ? roleMap[role] : void 0;
|
|
228
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
247
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
248
|
+
import_react_native2.Text,
|
|
249
|
+
{
|
|
250
|
+
style: baseStyle,
|
|
251
|
+
numberOfLines,
|
|
252
|
+
testID: id,
|
|
253
|
+
accessibilityRole,
|
|
254
|
+
children
|
|
255
|
+
}
|
|
256
|
+
);
|
|
229
257
|
};
|
|
230
258
|
|
|
231
259
|
// src/Checkbox.tsx
|
package/native/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.tsx","../../src/Checkbox.tsx","../../../primitives-native/src/Box.tsx","../../../primitives-native/src/Text.tsx"],"sourcesContent":["export * from \"./Checkbox\";\n","import React, {\n forwardRef,\n useRef,\n useState,\n useImperativeHandle,\n} from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem, useId } from \"@xsolla/xui-core\";\nimport { Check, Minus } from \"@xsolla/xui-icons\";\n\ntype ComponentSize = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport interface CheckboxProps {\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 },\n ref\n ) {\n const { theme } = useDesignSystem();\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.text;\n };\n\n // Determine aria-checked value\n const getAriaChecked = (): \"true\" | \"false\" | \"mixed\" => {\n if (indeterminate) return \"mixed\";\n return isChecked ? \"true\" : \"false\";\n };\n\n return (\n <Box\n id={checkboxId}\n ref={containerRef}\n flexDirection=\"row\"\n alignItems=\"flex-start\"\n gap={labelGapMap[size]}\n onPress={handleToggle}\n disabled={disabled}\n role=\"checkbox\"\n aria-checked={getAriaChecked()}\n aria-disabled={disabled || undefined}\n aria-invalid={isError || undefined}\n aria-describedby={ariaDescribedBy}\n aria-labelledby={children ? labelId : undefined}\n aria-label={!children ? ariaLabel : undefined}\n tabIndex={disabled ? -1 : 0}\n onKeyDown={handleKeyDown}\n data-testid=\"checkbox\"\n >\n {/* Custom checkbox visual */}\n <Box\n width={checkboxSizeMap[size]}\n height={checkboxSizeMap[size]}\n backgroundColor={getCheckboxBgColor()}\n borderColor={getBorderColor()}\n borderWidth={2}\n borderRadius={2}\n alignItems=\"center\"\n justifyContent=\"center\"\n flexShrink={0}\n hoverStyle={\n !disabled\n ? {\n backgroundColor: isCheckedOrIndeterminate\n ? checkColors.bgHover\n : faintColors.bgHover,\n borderColor:\n isError && !isCheckedOrIndeterminate\n ? borderColors.alert\n : isCheckedOrIndeterminate\n ? checkColors.bgHover\n : faintColors.borderHover,\n }\n : undefined\n }\n data-testid=\"checkbox__box\"\n >\n {isCheckedOrIndeterminate &&\n (indeterminate ? (\n <Minus size={iconSizeMap[size]} color={getIconColor()} />\n ) : (\n <Check size={iconSizeMap[size]} color={getIconColor()} />\n ))}\n </Box>\n\n {/* Label, Description & Error Message */}\n {hasTexts && (\n <Box\n flexDirection=\"column\"\n alignItems=\"flex-start\"\n gap={textGapMap[size]}\n >\n {children && (\n <Text\n id={labelId}\n color={getLabelColor()}\n fontSize={fontSizeMap[size]}\n lineHeight={lineHeightMap[size]}\n fontWeight={400}\n data-testid=\"checkbox__label\"\n >\n {children}\n </Text>\n )}\n {description && (\n <Text\n id={descriptionId}\n color={getDescriptionColor()}\n fontSize={descriptionFontSizeMap[size]}\n lineHeight={descriptionLineHeightMap[size]}\n data-testid=\"checkbox__description\"\n >\n {description}\n </Text>\n )}\n {isShowErrorMessage && (\n <Text\n id={errorId}\n role=\"alert\"\n color={getErrorMessageColor()}\n fontSize={descriptionFontSizeMap[size]}\n lineHeight={descriptionLineHeightMap[size]}\n data-testid=\"checkbox__error\"\n >\n {errorMessage}\n </Text>\n )}\n </Box>\n )}\n </Box>\n );\n }\n);\n\nCheckbox.displayName = \"Checkbox\";\n","import React from \"react\";\nimport {\n View,\n Pressable,\n Image,\n ViewStyle,\n ImageStyle,\n DimensionValue,\n AnimatableNumericValue,\n} from \"react-native\";\nimport { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Box: React.FC<BoxProps> = ({\n children,\n onPress,\n onLayout,\n onMoveShouldSetResponder,\n onResponderGrant,\n onResponderMove,\n onResponderRelease,\n onResponderTerminate,\n backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius,\n borderStyle,\n height,\n padding,\n paddingHorizontal,\n paddingVertical,\n margin,\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n flexDirection,\n alignItems,\n justifyContent,\n position,\n top,\n bottom,\n left,\n right,\n width,\n flex,\n overflow,\n zIndex,\n hoverStyle,\n pressStyle,\n style,\n \"data-testid\": dataTestId,\n testID,\n as,\n src,\n alt,\n ...rest\n}) => {\n const getContainerStyle = (pressed?: boolean): ViewStyle => ({\n backgroundColor:\n pressed && pressStyle?.backgroundColor\n ? pressStyle.backgroundColor\n : backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius: borderRadius as AnimatableNumericValue,\n borderStyle: borderStyle as ViewStyle[\"borderStyle\"],\n overflow,\n zIndex,\n height: height as DimensionValue,\n width: width as DimensionValue,\n padding: padding as DimensionValue,\n paddingHorizontal: paddingHorizontal as DimensionValue,\n paddingVertical: paddingVertical as DimensionValue,\n margin: margin as DimensionValue,\n marginTop: marginTop as DimensionValue,\n marginBottom: marginBottom as DimensionValue,\n marginLeft: marginLeft as DimensionValue,\n marginRight: marginRight as DimensionValue,\n flexDirection,\n alignItems,\n justifyContent,\n position: position as ViewStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n flex,\n ...(style as ViewStyle),\n });\n\n const finalTestID = dataTestId || testID;\n\n // Destructure and drop web-only props from rest before passing to RN components\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const {\n role,\n tabIndex,\n onKeyDown,\n onKeyUp,\n \"aria-label\": _ariaLabel,\n \"aria-labelledby\": _ariaLabelledBy,\n \"aria-current\": _ariaCurrent,\n \"aria-disabled\": _ariaDisabled,\n \"aria-live\": _ariaLive,\n className,\n \"data-testid\": _dataTestId,\n ...nativeRest\n } = rest as Record<string, unknown>;\n\n // Handle as=\"img\" for React Native\n if (as === \"img\" && src) {\n const imageStyle: ImageStyle = {\n width: width as DimensionValue,\n height: height as DimensionValue,\n borderRadius: borderRadius as number,\n position: position as ImageStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n ...(style as ImageStyle),\n };\n\n return (\n <Image\n source={{ uri: src }}\n style={imageStyle}\n testID={finalTestID}\n resizeMode=\"cover\"\n {...nativeRest}\n />\n );\n }\n\n if (onPress) {\n return (\n <Pressable\n onPress={onPress}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n style={({ pressed }) => getContainerStyle(pressed)}\n testID={finalTestID}\n {...nativeRest}\n >\n {children}\n </Pressable>\n );\n }\n\n return (\n <View\n style={getContainerStyle()}\n testID={finalTestID}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n {...nativeRest}\n >\n {children}\n </View>\n );\n};\n","import React from \"react\";\nimport { Text as RNText, TextStyle, AccessibilityRole } from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\n// Map web roles to React Native accessibility roles\nconst roleMap: Record<string, AccessibilityRole> = {\n alert: \"alert\",\n heading: \"header\",\n button: \"button\",\n link: \"link\",\n text: \"text\",\n};\n\nexport const Text: React.FC<TextProps> = ({\n children,\n color,\n fontSize,\n fontWeight,\n fontFamily,\n id,\n role,\n ...props\n}) => {\n // Extract the first font name from a comma-separated list (e.g. for web-style font stacks)\n let resolvedFontFamily = fontFamily\n ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n : undefined;\n\n // On native, if we don't have the custom font loaded, fall back to the system font\n if (\n resolvedFontFamily === \"Pilat Wide\" ||\n resolvedFontFamily === \"Pilat Wide Bold\" ||\n resolvedFontFamily === \"Aktiv Grotesk\"\n ) {\n resolvedFontFamily = undefined;\n }\n\n const style: TextStyle = {\n color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n fontWeight: fontWeight as TextStyle[\"fontWeight\"],\n fontFamily: resolvedFontFamily,\n textDecorationLine: props.textDecoration as TextStyle[\"textDecorationLine\"],\n };\n\n // Map role to React Native accessibilityRole\n const accessibilityRole = role ? roleMap[role] : undefined;\n\n return (\n <RNText style={style} testID={id} accessibilityRole={accessibilityRole}>\n {children}\n </RNText>\n );\n};\n"],"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","../../../primitives-native/src/Box.tsx","../../../primitives-native/src/Text.tsx"],"sourcesContent":["export * from \"./Checkbox\";\n","import React, {\n forwardRef,\n useRef,\n useState,\n useImperativeHandle,\n} from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem, useId } from \"@xsolla/xui-core\";\nimport { Check, Minus } from \"@xsolla/xui-icons\";\n\ntype ComponentSize = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport interface CheckboxProps {\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 },\n ref\n ) {\n const { theme } = useDesignSystem();\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.text;\n };\n\n // Determine aria-checked value\n const getAriaChecked = (): \"true\" | \"false\" | \"mixed\" => {\n if (indeterminate) return \"mixed\";\n return isChecked ? \"true\" : \"false\";\n };\n\n return (\n <Box\n id={checkboxId}\n ref={containerRef}\n flexDirection=\"row\"\n alignItems=\"flex-start\"\n gap={labelGapMap[size]}\n onPress={handleToggle}\n disabled={disabled}\n role=\"checkbox\"\n aria-checked={getAriaChecked()}\n aria-disabled={disabled || undefined}\n aria-invalid={isError || undefined}\n aria-describedby={ariaDescribedBy}\n aria-labelledby={children ? labelId : undefined}\n aria-label={!children ? ariaLabel : undefined}\n tabIndex={disabled ? -1 : 0}\n onKeyDown={handleKeyDown}\n data-testid=\"checkbox\"\n >\n {/* Custom checkbox visual */}\n <Box\n width={checkboxSizeMap[size]}\n height={checkboxSizeMap[size]}\n backgroundColor={getCheckboxBgColor()}\n borderColor={getBorderColor()}\n borderWidth={2}\n borderRadius={2}\n alignItems=\"center\"\n justifyContent=\"center\"\n flexShrink={0}\n hoverStyle={\n !disabled\n ? {\n backgroundColor: isCheckedOrIndeterminate\n ? checkColors.bgHover\n : faintColors.bgHover,\n borderColor:\n isError && !isCheckedOrIndeterminate\n ? borderColors.alert\n : isCheckedOrIndeterminate\n ? checkColors.bgHover\n : faintColors.borderHover,\n }\n : undefined\n }\n data-testid=\"checkbox__box\"\n >\n {isCheckedOrIndeterminate &&\n (indeterminate ? (\n <Minus size={iconSizeMap[size]} color={getIconColor()} />\n ) : (\n <Check size={iconSizeMap[size]} color={getIconColor()} />\n ))}\n </Box>\n\n {/* Label, Description & Error Message */}\n {hasTexts && (\n <Box\n flexDirection=\"column\"\n alignItems=\"flex-start\"\n gap={textGapMap[size]}\n >\n {children && (\n <Text\n id={labelId}\n color={getLabelColor()}\n fontSize={fontSizeMap[size]}\n lineHeight={lineHeightMap[size]}\n fontWeight={400}\n data-testid=\"checkbox__label\"\n >\n {children}\n </Text>\n )}\n {description && (\n <Text\n id={descriptionId}\n color={getDescriptionColor()}\n fontSize={descriptionFontSizeMap[size]}\n lineHeight={descriptionLineHeightMap[size]}\n data-testid=\"checkbox__description\"\n >\n {description}\n </Text>\n )}\n {isShowErrorMessage && (\n <Text\n id={errorId}\n role=\"alert\"\n color={getErrorMessageColor()}\n fontSize={descriptionFontSizeMap[size]}\n lineHeight={descriptionLineHeightMap[size]}\n data-testid=\"checkbox__error\"\n >\n {errorMessage}\n </Text>\n )}\n </Box>\n )}\n </Box>\n );\n }\n);\n\nCheckbox.displayName = \"Checkbox\";\n","import React from \"react\";\nimport {\n View,\n Pressable,\n Image,\n ViewStyle,\n ImageStyle,\n DimensionValue,\n AnimatableNumericValue,\n} from \"react-native\";\nimport { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Box: React.FC<BoxProps> = ({\n children,\n onPress,\n onLayout,\n onMoveShouldSetResponder,\n onResponderGrant,\n onResponderMove,\n onResponderRelease,\n onResponderTerminate,\n backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius,\n borderStyle,\n height,\n padding,\n paddingHorizontal,\n paddingVertical,\n margin,\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n flexDirection,\n alignItems,\n justifyContent,\n position,\n top,\n bottom,\n left,\n right,\n width,\n flex,\n overflow,\n zIndex,\n hoverStyle,\n pressStyle,\n style,\n \"data-testid\": dataTestId,\n testID,\n as,\n src,\n alt,\n ...rest\n}) => {\n const getContainerStyle = (pressed?: boolean): ViewStyle => ({\n backgroundColor:\n pressed && pressStyle?.backgroundColor\n ? pressStyle.backgroundColor\n : backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius: borderRadius as AnimatableNumericValue,\n borderStyle: borderStyle as ViewStyle[\"borderStyle\"],\n overflow,\n zIndex,\n height: height as DimensionValue,\n width: width as DimensionValue,\n padding: padding as DimensionValue,\n paddingHorizontal: paddingHorizontal as DimensionValue,\n paddingVertical: paddingVertical as DimensionValue,\n margin: margin as DimensionValue,\n marginTop: marginTop as DimensionValue,\n marginBottom: marginBottom as DimensionValue,\n marginLeft: marginLeft as DimensionValue,\n marginRight: marginRight as DimensionValue,\n flexDirection,\n alignItems,\n justifyContent,\n position: position as ViewStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n flex,\n ...(style as ViewStyle),\n });\n\n const finalTestID = dataTestId || testID;\n\n // Destructure and drop web-only props from rest before passing to RN components\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const {\n role,\n tabIndex,\n onKeyDown,\n onKeyUp,\n \"aria-label\": _ariaLabel,\n \"aria-labelledby\": _ariaLabelledBy,\n \"aria-current\": _ariaCurrent,\n \"aria-disabled\": _ariaDisabled,\n \"aria-live\": _ariaLive,\n className,\n \"data-testid\": _dataTestId,\n ...nativeRest\n } = rest as Record<string, unknown>;\n\n // Handle as=\"img\" for React Native\n if (as === \"img\" && src) {\n const imageStyle: ImageStyle = {\n width: width as DimensionValue,\n height: height as DimensionValue,\n borderRadius: borderRadius as number,\n position: position as ImageStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n ...(style as ImageStyle),\n };\n\n return (\n <Image\n source={{ uri: src }}\n style={imageStyle}\n testID={finalTestID}\n resizeMode=\"cover\"\n {...nativeRest}\n />\n );\n }\n\n if (onPress) {\n return (\n <Pressable\n onPress={onPress}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n style={({ pressed }) => getContainerStyle(pressed)}\n testID={finalTestID}\n {...nativeRest}\n >\n {children}\n </Pressable>\n );\n }\n\n return (\n <View\n style={getContainerStyle()}\n testID={finalTestID}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n {...nativeRest}\n >\n {children}\n </View>\n );\n};\n","import React from \"react\";\nimport {\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,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n fontWeight: fontWeight as TextStyle[\"fontWeight\"],\n fontFamily: resolvedFontFamily,\n textDecorationLine: props.textDecoration as TextStyle[\"textDecorationLine\"],\n textAlign: textAlign ?? incomingStyle?.textAlign,\n lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),\n marginTop: parseNumericValue(\n incomingStyle?.marginTop as number | string | undefined\n ),\n marginBottom: parseNumericValue(\n incomingStyle?.marginBottom as number | string | undefined\n ),\n };\n\n const accessibilityRole = role ? roleMap[role] : undefined;\n\n return (\n <RNText\n style={baseStyle}\n numberOfLines={numberOfLines}\n testID={id}\n accessibilityRole={accessibilityRole}\n >\n {children}\n </RNText>\n );\n};\n"],"mappings":"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","names":["import_react_native","import_jsx_runtime","RNText","import_jsx_runtime","Checkbox"]}
|
package/native/index.mjs
CHANGED
|
@@ -177,7 +177,10 @@ var Box = ({
|
|
|
177
177
|
};
|
|
178
178
|
|
|
179
179
|
// ../primitives-native/src/Text.tsx
|
|
180
|
-
import {
|
|
180
|
+
import {
|
|
181
|
+
Text as RNText,
|
|
182
|
+
StyleSheet
|
|
183
|
+
} from "react-native";
|
|
181
184
|
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
182
185
|
var roleMap = {
|
|
183
186
|
alert: "alert",
|
|
@@ -186,29 +189,57 @@ var roleMap = {
|
|
|
186
189
|
link: "link",
|
|
187
190
|
text: "text"
|
|
188
191
|
};
|
|
192
|
+
var parseNumericValue = (value) => {
|
|
193
|
+
if (value === void 0) return void 0;
|
|
194
|
+
if (typeof value === "number") return value;
|
|
195
|
+
const parsed = parseFloat(value);
|
|
196
|
+
return isNaN(parsed) ? void 0 : parsed;
|
|
197
|
+
};
|
|
189
198
|
var Text = ({
|
|
190
199
|
children,
|
|
191
200
|
color,
|
|
192
201
|
fontSize,
|
|
193
202
|
fontWeight,
|
|
194
203
|
fontFamily,
|
|
204
|
+
textAlign,
|
|
205
|
+
lineHeight,
|
|
206
|
+
numberOfLines,
|
|
195
207
|
id,
|
|
196
208
|
role,
|
|
209
|
+
style: styleProp,
|
|
197
210
|
...props
|
|
198
211
|
}) => {
|
|
199
212
|
let resolvedFontFamily = fontFamily ? fontFamily.split(",")[0].replace(/['"]/g, "").trim() : void 0;
|
|
200
213
|
if (resolvedFontFamily === "Pilat Wide" || resolvedFontFamily === "Pilat Wide Bold" || resolvedFontFamily === "Aktiv Grotesk") {
|
|
201
214
|
resolvedFontFamily = void 0;
|
|
202
215
|
}
|
|
203
|
-
const
|
|
216
|
+
const incomingStyle = StyleSheet.flatten(styleProp);
|
|
217
|
+
const baseStyle = {
|
|
204
218
|
color,
|
|
205
219
|
fontSize: typeof fontSize === "number" ? fontSize : void 0,
|
|
206
220
|
fontWeight,
|
|
207
221
|
fontFamily: resolvedFontFamily,
|
|
208
|
-
textDecorationLine: props.textDecoration
|
|
222
|
+
textDecorationLine: props.textDecoration,
|
|
223
|
+
textAlign: textAlign ?? incomingStyle?.textAlign,
|
|
224
|
+
lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),
|
|
225
|
+
marginTop: parseNumericValue(
|
|
226
|
+
incomingStyle?.marginTop
|
|
227
|
+
),
|
|
228
|
+
marginBottom: parseNumericValue(
|
|
229
|
+
incomingStyle?.marginBottom
|
|
230
|
+
)
|
|
209
231
|
};
|
|
210
232
|
const accessibilityRole = role ? roleMap[role] : void 0;
|
|
211
|
-
return /* @__PURE__ */ jsx2(
|
|
233
|
+
return /* @__PURE__ */ jsx2(
|
|
234
|
+
RNText,
|
|
235
|
+
{
|
|
236
|
+
style: baseStyle,
|
|
237
|
+
numberOfLines,
|
|
238
|
+
testID: id,
|
|
239
|
+
accessibilityRole,
|
|
240
|
+
children
|
|
241
|
+
}
|
|
242
|
+
);
|
|
212
243
|
};
|
|
213
244
|
|
|
214
245
|
// src/Checkbox.tsx
|
package/native/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Checkbox.tsx","../../../primitives-native/src/Box.tsx","../../../primitives-native/src/Text.tsx"],"sourcesContent":["import React, {\n forwardRef,\n useRef,\n useState,\n useImperativeHandle,\n} from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem, useId } from \"@xsolla/xui-core\";\nimport { Check, Minus } from \"@xsolla/xui-icons\";\n\ntype ComponentSize = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport interface CheckboxProps {\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 },\n ref\n ) {\n const { theme } = useDesignSystem();\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.text;\n };\n\n // Determine aria-checked value\n const getAriaChecked = (): \"true\" | \"false\" | \"mixed\" => {\n if (indeterminate) return \"mixed\";\n return isChecked ? \"true\" : \"false\";\n };\n\n return (\n <Box\n id={checkboxId}\n ref={containerRef}\n flexDirection=\"row\"\n alignItems=\"flex-start\"\n gap={labelGapMap[size]}\n onPress={handleToggle}\n disabled={disabled}\n role=\"checkbox\"\n aria-checked={getAriaChecked()}\n aria-disabled={disabled || undefined}\n aria-invalid={isError || undefined}\n aria-describedby={ariaDescribedBy}\n aria-labelledby={children ? labelId : undefined}\n aria-label={!children ? ariaLabel : undefined}\n tabIndex={disabled ? -1 : 0}\n onKeyDown={handleKeyDown}\n data-testid=\"checkbox\"\n >\n {/* Custom checkbox visual */}\n <Box\n width={checkboxSizeMap[size]}\n height={checkboxSizeMap[size]}\n backgroundColor={getCheckboxBgColor()}\n borderColor={getBorderColor()}\n borderWidth={2}\n borderRadius={2}\n alignItems=\"center\"\n justifyContent=\"center\"\n flexShrink={0}\n hoverStyle={\n !disabled\n ? {\n backgroundColor: isCheckedOrIndeterminate\n ? checkColors.bgHover\n : faintColors.bgHover,\n borderColor:\n isError && !isCheckedOrIndeterminate\n ? borderColors.alert\n : isCheckedOrIndeterminate\n ? checkColors.bgHover\n : faintColors.borderHover,\n }\n : undefined\n }\n data-testid=\"checkbox__box\"\n >\n {isCheckedOrIndeterminate &&\n (indeterminate ? (\n <Minus size={iconSizeMap[size]} color={getIconColor()} />\n ) : (\n <Check size={iconSizeMap[size]} color={getIconColor()} />\n ))}\n </Box>\n\n {/* Label, Description & Error Message */}\n {hasTexts && (\n <Box\n flexDirection=\"column\"\n alignItems=\"flex-start\"\n gap={textGapMap[size]}\n >\n {children && (\n <Text\n id={labelId}\n color={getLabelColor()}\n fontSize={fontSizeMap[size]}\n lineHeight={lineHeightMap[size]}\n fontWeight={400}\n data-testid=\"checkbox__label\"\n >\n {children}\n </Text>\n )}\n {description && (\n <Text\n id={descriptionId}\n color={getDescriptionColor()}\n fontSize={descriptionFontSizeMap[size]}\n lineHeight={descriptionLineHeightMap[size]}\n data-testid=\"checkbox__description\"\n >\n {description}\n </Text>\n )}\n {isShowErrorMessage && (\n <Text\n id={errorId}\n role=\"alert\"\n color={getErrorMessageColor()}\n fontSize={descriptionFontSizeMap[size]}\n lineHeight={descriptionLineHeightMap[size]}\n data-testid=\"checkbox__error\"\n >\n {errorMessage}\n </Text>\n )}\n </Box>\n )}\n </Box>\n );\n }\n);\n\nCheckbox.displayName = \"Checkbox\";\n","import React from \"react\";\nimport {\n View,\n Pressable,\n Image,\n ViewStyle,\n ImageStyle,\n DimensionValue,\n AnimatableNumericValue,\n} from \"react-native\";\nimport { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Box: React.FC<BoxProps> = ({\n children,\n onPress,\n onLayout,\n onMoveShouldSetResponder,\n onResponderGrant,\n onResponderMove,\n onResponderRelease,\n onResponderTerminate,\n backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius,\n borderStyle,\n height,\n padding,\n paddingHorizontal,\n paddingVertical,\n margin,\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n flexDirection,\n alignItems,\n justifyContent,\n position,\n top,\n bottom,\n left,\n right,\n width,\n flex,\n overflow,\n zIndex,\n hoverStyle,\n pressStyle,\n style,\n \"data-testid\": dataTestId,\n testID,\n as,\n src,\n alt,\n ...rest\n}) => {\n const getContainerStyle = (pressed?: boolean): ViewStyle => ({\n backgroundColor:\n pressed && pressStyle?.backgroundColor\n ? pressStyle.backgroundColor\n : backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius: borderRadius as AnimatableNumericValue,\n borderStyle: borderStyle as ViewStyle[\"borderStyle\"],\n overflow,\n zIndex,\n height: height as DimensionValue,\n width: width as DimensionValue,\n padding: padding as DimensionValue,\n paddingHorizontal: paddingHorizontal as DimensionValue,\n paddingVertical: paddingVertical as DimensionValue,\n margin: margin as DimensionValue,\n marginTop: marginTop as DimensionValue,\n marginBottom: marginBottom as DimensionValue,\n marginLeft: marginLeft as DimensionValue,\n marginRight: marginRight as DimensionValue,\n flexDirection,\n alignItems,\n justifyContent,\n position: position as ViewStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n flex,\n ...(style as ViewStyle),\n });\n\n const finalTestID = dataTestId || testID;\n\n // Destructure and drop web-only props from rest before passing to RN components\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const {\n role,\n tabIndex,\n onKeyDown,\n onKeyUp,\n \"aria-label\": _ariaLabel,\n \"aria-labelledby\": _ariaLabelledBy,\n \"aria-current\": _ariaCurrent,\n \"aria-disabled\": _ariaDisabled,\n \"aria-live\": _ariaLive,\n className,\n \"data-testid\": _dataTestId,\n ...nativeRest\n } = rest as Record<string, unknown>;\n\n // Handle as=\"img\" for React Native\n if (as === \"img\" && src) {\n const imageStyle: ImageStyle = {\n width: width as DimensionValue,\n height: height as DimensionValue,\n borderRadius: borderRadius as number,\n position: position as ImageStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n ...(style as ImageStyle),\n };\n\n return (\n <Image\n source={{ uri: src }}\n style={imageStyle}\n testID={finalTestID}\n resizeMode=\"cover\"\n {...nativeRest}\n />\n );\n }\n\n if (onPress) {\n return (\n <Pressable\n onPress={onPress}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n style={({ pressed }) => getContainerStyle(pressed)}\n testID={finalTestID}\n {...nativeRest}\n >\n {children}\n </Pressable>\n );\n }\n\n return (\n <View\n style={getContainerStyle()}\n testID={finalTestID}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n {...nativeRest}\n >\n {children}\n </View>\n );\n};\n","import React from \"react\";\nimport { Text as RNText, TextStyle, AccessibilityRole } from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\n// Map web roles to React Native accessibility roles\nconst roleMap: Record<string, AccessibilityRole> = {\n alert: \"alert\",\n heading: \"header\",\n button: \"button\",\n link: \"link\",\n text: \"text\",\n};\n\nexport const Text: React.FC<TextProps> = ({\n children,\n color,\n fontSize,\n fontWeight,\n fontFamily,\n id,\n role,\n ...props\n}) => {\n // Extract the first font name from a comma-separated list (e.g. for web-style font stacks)\n let resolvedFontFamily = fontFamily\n ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n : undefined;\n\n // On native, if we don't have the custom font loaded, fall back to the system font\n if (\n resolvedFontFamily === \"Pilat Wide\" ||\n resolvedFontFamily === \"Pilat Wide Bold\" ||\n resolvedFontFamily === \"Aktiv Grotesk\"\n ) {\n resolvedFontFamily = undefined;\n }\n\n const style: TextStyle = {\n color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n fontWeight: fontWeight as TextStyle[\"fontWeight\"],\n fontFamily: resolvedFontFamily,\n textDecorationLine: props.textDecoration as TextStyle[\"textDecorationLine\"],\n };\n\n // Map role to React Native accessibilityRole\n const accessibilityRole = role ? roleMap[role] : undefined;\n\n return (\n <RNText style={style} testID={id} accessibilityRole={accessibilityRole}>\n {children}\n </RNText>\n );\n};\n"],"mappings":"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","names":["jsx","jsx","Checkbox"]}
|
|
1
|
+
{"version":3,"sources":["../../src/Checkbox.tsx","../../../primitives-native/src/Box.tsx","../../../primitives-native/src/Text.tsx"],"sourcesContent":["import React, {\n forwardRef,\n useRef,\n useState,\n useImperativeHandle,\n} from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem, useId } from \"@xsolla/xui-core\";\nimport { Check, Minus } from \"@xsolla/xui-icons\";\n\ntype ComponentSize = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport interface CheckboxProps {\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 },\n ref\n ) {\n const { theme } = useDesignSystem();\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.text;\n };\n\n // Determine aria-checked value\n const getAriaChecked = (): \"true\" | \"false\" | \"mixed\" => {\n if (indeterminate) return \"mixed\";\n return isChecked ? \"true\" : \"false\";\n };\n\n return (\n <Box\n id={checkboxId}\n ref={containerRef}\n flexDirection=\"row\"\n alignItems=\"flex-start\"\n gap={labelGapMap[size]}\n onPress={handleToggle}\n disabled={disabled}\n role=\"checkbox\"\n aria-checked={getAriaChecked()}\n aria-disabled={disabled || undefined}\n aria-invalid={isError || undefined}\n aria-describedby={ariaDescribedBy}\n aria-labelledby={children ? labelId : undefined}\n aria-label={!children ? ariaLabel : undefined}\n tabIndex={disabled ? -1 : 0}\n onKeyDown={handleKeyDown}\n data-testid=\"checkbox\"\n >\n {/* Custom checkbox visual */}\n <Box\n width={checkboxSizeMap[size]}\n height={checkboxSizeMap[size]}\n backgroundColor={getCheckboxBgColor()}\n borderColor={getBorderColor()}\n borderWidth={2}\n borderRadius={2}\n alignItems=\"center\"\n justifyContent=\"center\"\n flexShrink={0}\n hoverStyle={\n !disabled\n ? {\n backgroundColor: isCheckedOrIndeterminate\n ? checkColors.bgHover\n : faintColors.bgHover,\n borderColor:\n isError && !isCheckedOrIndeterminate\n ? borderColors.alert\n : isCheckedOrIndeterminate\n ? checkColors.bgHover\n : faintColors.borderHover,\n }\n : undefined\n }\n data-testid=\"checkbox__box\"\n >\n {isCheckedOrIndeterminate &&\n (indeterminate ? (\n <Minus size={iconSizeMap[size]} color={getIconColor()} />\n ) : (\n <Check size={iconSizeMap[size]} color={getIconColor()} />\n ))}\n </Box>\n\n {/* Label, Description & Error Message */}\n {hasTexts && (\n <Box\n flexDirection=\"column\"\n alignItems=\"flex-start\"\n gap={textGapMap[size]}\n >\n {children && (\n <Text\n id={labelId}\n color={getLabelColor()}\n fontSize={fontSizeMap[size]}\n lineHeight={lineHeightMap[size]}\n fontWeight={400}\n data-testid=\"checkbox__label\"\n >\n {children}\n </Text>\n )}\n {description && (\n <Text\n id={descriptionId}\n color={getDescriptionColor()}\n fontSize={descriptionFontSizeMap[size]}\n lineHeight={descriptionLineHeightMap[size]}\n data-testid=\"checkbox__description\"\n >\n {description}\n </Text>\n )}\n {isShowErrorMessage && (\n <Text\n id={errorId}\n role=\"alert\"\n color={getErrorMessageColor()}\n fontSize={descriptionFontSizeMap[size]}\n lineHeight={descriptionLineHeightMap[size]}\n data-testid=\"checkbox__error\"\n >\n {errorMessage}\n </Text>\n )}\n </Box>\n )}\n </Box>\n );\n }\n);\n\nCheckbox.displayName = \"Checkbox\";\n","import React from \"react\";\nimport {\n View,\n Pressable,\n Image,\n ViewStyle,\n ImageStyle,\n DimensionValue,\n AnimatableNumericValue,\n} from \"react-native\";\nimport { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Box: React.FC<BoxProps> = ({\n children,\n onPress,\n onLayout,\n onMoveShouldSetResponder,\n onResponderGrant,\n onResponderMove,\n onResponderRelease,\n onResponderTerminate,\n backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius,\n borderStyle,\n height,\n padding,\n paddingHorizontal,\n paddingVertical,\n margin,\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n flexDirection,\n alignItems,\n justifyContent,\n position,\n top,\n bottom,\n left,\n right,\n width,\n flex,\n overflow,\n zIndex,\n hoverStyle,\n pressStyle,\n style,\n \"data-testid\": dataTestId,\n testID,\n as,\n src,\n alt,\n ...rest\n}) => {\n const getContainerStyle = (pressed?: boolean): ViewStyle => ({\n backgroundColor:\n pressed && pressStyle?.backgroundColor\n ? pressStyle.backgroundColor\n : backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius: borderRadius as AnimatableNumericValue,\n borderStyle: borderStyle as ViewStyle[\"borderStyle\"],\n overflow,\n zIndex,\n height: height as DimensionValue,\n width: width as DimensionValue,\n padding: padding as DimensionValue,\n paddingHorizontal: paddingHorizontal as DimensionValue,\n paddingVertical: paddingVertical as DimensionValue,\n margin: margin as DimensionValue,\n marginTop: marginTop as DimensionValue,\n marginBottom: marginBottom as DimensionValue,\n marginLeft: marginLeft as DimensionValue,\n marginRight: marginRight as DimensionValue,\n flexDirection,\n alignItems,\n justifyContent,\n position: position as ViewStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n flex,\n ...(style as ViewStyle),\n });\n\n const finalTestID = dataTestId || testID;\n\n // Destructure and drop web-only props from rest before passing to RN components\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const {\n role,\n tabIndex,\n onKeyDown,\n onKeyUp,\n \"aria-label\": _ariaLabel,\n \"aria-labelledby\": _ariaLabelledBy,\n \"aria-current\": _ariaCurrent,\n \"aria-disabled\": _ariaDisabled,\n \"aria-live\": _ariaLive,\n className,\n \"data-testid\": _dataTestId,\n ...nativeRest\n } = rest as Record<string, unknown>;\n\n // Handle as=\"img\" for React Native\n if (as === \"img\" && src) {\n const imageStyle: ImageStyle = {\n width: width as DimensionValue,\n height: height as DimensionValue,\n borderRadius: borderRadius as number,\n position: position as ImageStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n ...(style as ImageStyle),\n };\n\n return (\n <Image\n source={{ uri: src }}\n style={imageStyle}\n testID={finalTestID}\n resizeMode=\"cover\"\n {...nativeRest}\n />\n );\n }\n\n if (onPress) {\n return (\n <Pressable\n onPress={onPress}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n style={({ pressed }) => getContainerStyle(pressed)}\n testID={finalTestID}\n {...nativeRest}\n >\n {children}\n </Pressable>\n );\n }\n\n return (\n <View\n style={getContainerStyle()}\n testID={finalTestID}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n {...nativeRest}\n >\n {children}\n </View>\n );\n};\n","import React from \"react\";\nimport {\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,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n fontWeight: fontWeight as TextStyle[\"fontWeight\"],\n fontFamily: resolvedFontFamily,\n textDecorationLine: props.textDecoration as TextStyle[\"textDecorationLine\"],\n textAlign: textAlign ?? incomingStyle?.textAlign,\n lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),\n marginTop: parseNumericValue(\n incomingStyle?.marginTop as number | string | undefined\n ),\n marginBottom: parseNumericValue(\n incomingStyle?.marginBottom as number | string | undefined\n ),\n };\n\n const accessibilityRole = role ? roleMap[role] : undefined;\n\n return (\n <RNText\n style={baseStyle}\n numberOfLines={numberOfLines}\n testID={id}\n accessibilityRole={accessibilityRole}\n >\n {children}\n </RNText>\n );\n};\n"],"mappings":"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","names":["jsx","jsx","Checkbox"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-checkbox",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.114.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.
|
|
17
|
-
"@xsolla/xui-icons": "0.
|
|
18
|
-
"@xsolla/xui-primitives-core": "0.
|
|
16
|
+
"@xsolla/xui-core": "0.114.0",
|
|
17
|
+
"@xsolla/xui-icons": "0.114.0",
|
|
18
|
+
"@xsolla/xui-primitives-core": "0.114.0"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
21
21
|
"react": ">=16.8.0",
|
package/web/index.js
CHANGED
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 { useDesignSystem, useId } from \"@xsolla/xui-core\";\nimport { Check, Minus } from \"@xsolla/xui-icons\";\n\ntype ComponentSize = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport interface CheckboxProps {\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 },\n ref\n ) {\n const { theme } = useDesignSystem();\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.text;\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\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 ...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/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 { useDesignSystem, useId } from \"@xsolla/xui-core\";\nimport { Check, Minus } from \"@xsolla/xui-icons\";\n\ntype ComponentSize = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport interface CheckboxProps {\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 },\n ref\n ) {\n const { theme } = useDesignSystem();\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.text;\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\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"]}
|
package/web/index.mjs
CHANGED
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 { useDesignSystem, useId } from \"@xsolla/xui-core\";\nimport { Check, Minus } from \"@xsolla/xui-icons\";\n\ntype ComponentSize = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport interface CheckboxProps {\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 },\n ref\n ) {\n const { theme } = useDesignSystem();\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.text;\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\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 ...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":";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;;;ACLP,OAAO,WAAW;AAClB,OAAO,YAAY;AAuMX;AApMR,IAAM,YAAY,OAAO;AAAA;AAAA;AAAA,sBAGH,CAAC,UAAU,MAAM,mBAAmB,aAAa;AAAA,kBACrD,CAAC,UAAU,MAAM,eAAe,aAAa;AAAA,kBAC7C,CAAC,UACf,OAAO,MAAM,gBAAgB,WACzB,GAAG,MAAM,WAAW,OACpB,MAAM,eAAe,CAAC;AAAA;AAAA,IAE1B,CAAC,UACD,MAAM,sBAAsB,UAC5B;AAAA,2BACuB,OAAO,MAAM,sBAAsB,WAAW,GAAG,MAAM,iBAAiB,OAAO,MAAM,iBAAiB;AAAA,2BACtG,MAAM,qBAAqB,MAAM,eAAe,aAAa;AAAA;AAAA,GAErF;AAAA,IACC,CAAC,UACD,MAAM,mBAAmB,UACzB;AAAA,wBACoB,OAAO,MAAM,mBAAmB,WAAW,GAAG,MAAM,cAAc,OAAO,MAAM,cAAc;AAAA,wBAC7F,MAAM,kBAAkB,MAAM,eAAe,aAAa;AAAA;AAAA,GAE/E;AAAA,IACC,CAAC,UACD,MAAM,oBAAoB,UAC1B;AAAA,yBACqB,OAAO,MAAM,oBAAoB,WAAW,GAAG,MAAM,eAAe,OAAO,MAAM,eAAe;AAAA,yBAChG,MAAM,mBAAmB,MAAM,eAAe,aAAa;AAAA;AAAA,GAEjF;AAAA,IACC,CAAC,UACD,MAAM,qBAAqB,UAC3B;AAAA,0BACsB,OAAO,MAAM,qBAAqB,WAAW,GAAG,MAAM,gBAAgB,OAAO,MAAM,gBAAgB;AAAA,0BACnG,MAAM,oBAAoB,MAAM,eAAe,aAAa;AAAA;AAAA,GAEnF;AAAA;AAAA,kBAEe,CAAC,UACf,MAAM,gBACL,MAAM,eACP,MAAM,qBACN,MAAM,kBACN,MAAM,mBACN,MAAM,mBACF,UACA,OAAO;AAAA,mBACI,CAAC,UAChB,OAAO,MAAM,iBAAiB,WAC1B,GAAG,MAAM,YAAY,OACrB,MAAM,gBAAgB,CAAC;AAAA,YACnB,CAAC,UACT,OAAO,MAAM,WAAW,WACpB,GAAG,MAAM,MAAM,OACf,MAAM,UAAU,MAAM;AAAA,WACnB,CAAC,UACR,OAAO,MAAM,UAAU,WACnB,GAAG,MAAM,KAAK,OACd,MAAM,SAAS,MAAM;AAAA,eACd,CAAC,UACZ,OAAO,MAAM,aAAa,WACtB,GAAG,MAAM,QAAQ,OACjB,MAAM,YAAY,MAAM;AAAA,gBAChB,CAAC,UACb,OAAO,MAAM,cAAc,WACvB,GAAG,MAAM,SAAS,OAClB,MAAM,aAAa,MAAM;AAAA;AAAA,aAEpB,CAAC,UACV,OAAO,MAAM,YAAY,WACrB,GAAG,MAAM,OAAO,OAChB,MAAM,WAAW,CAAC;AAAA,IACtB,CAAC,UACD,MAAM,qBACN;AAAA,oBACgB,OAAO,MAAM,sBAAsB,WAAW,GAAG,MAAM,iBAAiB,OAAO,MAAM,iBAAiB;AAAA,qBACrG,OAAO,MAAM,sBAAsB,WAAW,GAAG,MAAM,iBAAiB,OAAO,MAAM,iBAAiB;AAAA,GACxH;AAAA,IACC,CAAC,UACD,MAAM,mBACN;AAAA,mBACe,OAAO,MAAM,oBAAoB,WAAW,GAAG,MAAM,eAAe,OAAO,MAAM,eAAe;AAAA,sBAC7F,OAAO,MAAM,oBAAoB,WAAW,GAAG,MAAM,eAAe,OAAO,MAAM,eAAe;AAAA,GACnH;AAAA,IACC,CAAC,UACD,MAAM,eAAe,UACrB,gBAAgB,OAAO,MAAM,eAAe,WAAW,GAAG,MAAM,UAAU,OAAO,MAAM,UAAU,GAAG;AAAA,IACpG,CAAC,UACD,MAAM,kBAAkB,UACxB,mBAAmB,OAAO,MAAM,kBAAkB,WAAW,GAAG,MAAM,aAAa,OAAO,MAAM,aAAa,GAAG;AAAA,IAChH,CAAC,UACD,MAAM,gBAAgB,UACtB,iBAAiB,OAAO,MAAM,gBAAgB,WAAW,GAAG,MAAM,WAAW,OAAO,MAAM,WAAW,GAAG;AAAA,IACxG,CAAC,UACD,MAAM,iBAAiB,UACvB,kBAAkB,OAAO,MAAM,iBAAiB,WAAW,GAAG,MAAM,YAAY,OAAO,MAAM,YAAY,GAAG;AAAA;AAAA,YAEpG,CAAC,UACT,OAAO,MAAM,WAAW,WAAW,GAAG,MAAM,MAAM,OAAO,MAAM,UAAU,CAAC;AAAA,IAC1E,CAAC,UACD,MAAM,cAAc,UACpB,eAAe,OAAO,MAAM,cAAc,WAAW,GAAG,MAAM,SAAS,OAAO,MAAM,SAAS,GAAG;AAAA,IAChG,CAAC,UACD,MAAM,iBAAiB,UACvB,kBAAkB,OAAO,MAAM,iBAAiB,WAAW,GAAG,MAAM,YAAY,OAAO,MAAM,YAAY,GAAG;AAAA,IAC5G,CAAC,UACD,MAAM,eAAe,UACrB,gBAAgB,OAAO,MAAM,eAAe,WAAW,GAAG,MAAM,UAAU,OAAO,MAAM,UAAU,GAAG;AAAA,IACpG,CAAC,UACD,MAAM,gBAAgB,UACtB,iBAAiB,OAAO,MAAM,gBAAgB,WAAW,GAAG,MAAM,WAAW,OAAO,MAAM,WAAW,GAAG;AAAA;AAAA,oBAExF,CAAC,UAAU,MAAM,iBAAiB,QAAQ;AAAA,eAC/C,CAAC,UAAU,MAAM,YAAY,QAAQ;AAAA,iBACnC,CAAC,UAAU,MAAM,cAAc,SAAS;AAAA,qBACpC,CAAC,UAAU,MAAM,kBAAkB,YAAY;AAAA,YACxD,CAAC,UACT,MAAM,SACF,MAAM,SACN,MAAM,WAAW,MAAM,UACrB,YACA,SAAS;AAAA,cACL,CAAC,UAAU,MAAM,YAAY,QAAQ;AAAA,SAC1C,CAAC,UACN,OAAO,MAAM,QAAQ,WAAW,GAAG,MAAM,GAAG,OAAO,MAAM,GAAG;AAAA,YACpD,CAAC,UACT,OAAO,MAAM,WAAW,WAAW,GAAG,MAAM,MAAM,OAAO,MAAM,MAAM;AAAA,UAC/D,CAAC,UACP,OAAO,MAAM,SAAS,WAAW,GAAG,MAAM,IAAI,OAAO,MAAM,IAAI;AAAA,WACxD,CAAC,UACR,OAAO,MAAM,UAAU,WAAW,GAAG,MAAM,KAAK,OAAO,MAAM,KAAK;AAAA,UAC5D,CAAC,UAAU,MAAM,IAAI;AAAA,iBACd,CAAC,UAAU,MAAM,cAAc,CAAC;AAAA,SACxC,CAAC,UACN,OAAO,MAAM,QAAQ,WAAW,GAAG,MAAM,GAAG,OAAO,MAAM,OAAO,CAAC;AAAA,gBACrD,CAAC,UAAU,MAAM,aAAa,MAAM;AAAA,cACtC,CAAC,UAAU,MAAM,YAAY,SAAS;AAAA,gBACpC,CAAC,UAAU,MAAM,aAAa,SAAS;AAAA,gBACvC,CAAC,UAAU,MAAM,aAAa,SAAS;AAAA,aAC1C,CAAC,UAAU,MAAM,MAAM;AAAA,aACvB,CAAC,UAAW,MAAM,WAAW,MAAM,CAAE;AAAA,oBAC9B,CAAC,UAAW,MAAM,WAAW,SAAS,MAAO;AAAA;AAAA;AAAA,MAG3D,CAAC,UACD,MAAM,YAAY,mBAClB,qBAAqB,MAAM,WAAW,eAAe,GAAG;AAAA,MACxD,CAAC,UACD,MAAM,YAAY,eAClB,iBAAiB,MAAM,WAAW,WAAW,GAAG;AAAA;AAAA;AAAA;AAAA,MAIhD,CAAC,UACD,MAAM,YAAY,mBAClB,qBAAqB,MAAM,WAAW,eAAe,GAAG;AAAA;AAAA;AAIvD,IAAM,MAAM,MAAM;AAAA,EAIvB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb,aAAa;AAAA,IACb,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AAEH,QAAI,OAAO,SAAS,KAAK;AACvB,aACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,KAAK,OAAO;AAAA,UACZ,OAAO;AAAA,YACL,SAAS;AAAA,YACT,WAAW;AAAA,YACX,OACE,OAAO,MAAM,UAAU,WACnB,GAAG,MAAM,KAAK,OACd,MAAM;AAAA,YACZ,QACE,OAAO,MAAM,WAAW,WACpB,GAAG,MAAM,MAAM,OACf,MAAM;AAAA,YACZ,cACE,OAAO,MAAM,iBAAiB,WAC1B,GAAG,MAAM,YAAY,OACrB,MAAM;AAAA,YACZ,UAAU,MAAM;AAAA,YAChB,KAAK,OAAO,MAAM,QAAQ,WAAW,GAAG,MAAM,GAAG,OAAO,MAAM;AAAA,YAC9D,MACE,OAAO,MAAM,SAAS,WAAW,GAAG,MAAM,IAAI,OAAO,MAAM;AAAA,YAC7D,OACE,OAAO,MAAM,UAAU,WACnB,GAAG,MAAM,KAAK,OACd,MAAM;AAAA,YACZ,QACE,OAAO,MAAM,WAAW,WACpB,GAAG,MAAM,MAAM,OACf,MAAM;AAAA,UACd;AAAA;AAAA,MACF;AAAA,IAEJ;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM,OAAO,WAAW,QAAQ,WAAW;AAAA,QAC3C,UAAU,OAAO,WAAW,WAAW;AAAA,QACvC,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAY;AAAA,QACZ,mBAAiB;AAAA,QACjB,gBAAc;AAAA,QACd,iBAAe;AAAA,QACf,aAAW;AAAA,QACX,oBAAkB;AAAA,QAClB,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,gBAAc;AAAA,QACd,iBAAe;AAAA,QACf,aAAW;AAAA,QACX,UAAU,aAAa,SAAY,WAAW;AAAA,QAC7C,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,IAAI,cAAc;;;ACzQlB,OAAOA,aAAY;AA8Bf,gBAAAC,YAAA;AA3BJ,IAAM,aAAaD,QAAO;AAAA,WACf,CAAC,UAAU,MAAM,SAAS,SAAS;AAAA,eAC/B,CAAC,UACZ,OAAO,MAAM,aAAa,WACtB,GAAG,MAAM,QAAQ,OACjB,MAAM,YAAY,SAAS;AAAA,iBAClB,CAAC,UAAU,MAAM,cAAc,QAAQ;AAAA,iBACvC,CAAC,UACd,MAAM,cACN,sGAAsG;AAAA,iBACzF,CAAC,UACd,OAAO,MAAM,eAAe,WACxB,GAAG,MAAM,UAAU,OACnB,MAAM,cAAc,SAAS;AAAA,iBACpB,CAAC,UAAU,MAAM,cAAc,QAAQ;AAAA,gBACxC,CAAC,UAAU,MAAM,aAAa,SAAS;AAAA,qBAClC,CAAC,UAAU,MAAM,kBAAkB,MAAM;AAAA;AAGvD,IAAM,OAA4B,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACE,gBAAAC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;;;AF/BA,SAAS,iBAAiB,aAAa;AACvC,SAAS,OAAO,aAAa;AA8Tf,gBAAAC,MAQJ,YARI;AApRd,IAAM,cAA6C;AAAA,EACjD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGA,IAAM,kBAAiD;AAAA,EACrD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGA,IAAM,cAA6C;AAAA,EACjD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGA,IAAM,aAA4C;AAAA,EAChD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGA,IAAM,cAA6C;AAAA,EACjD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGA,IAAM,gBAA+C;AAAA,EACnD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGA,IAAM,yBAAwD;AAAA,EAC5D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGA,IAAM,2BAA0D;AAAA,EAC9D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,IAAM,WAAW;AAAA,EACtB,SAASC,UACP;AAAA,IACE;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,IAAI;AAAA,IACJ,cAAc;AAAA,EAChB,GACA,KACA;AACA,UAAM,EAAE,MAAM,IAAI,gBAAgB;AAClC,UAAM,eAAe,OAAuB,IAAI;AAGhD,UAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS,KAAK;AAG5D,UAAM,QAAQ,MAAM;AACpB,UAAM,SAAS,MAAM,QAAQ,MAAM,EAAE;AACrC,UAAM,aAAa,cAAc,YAAY,MAAM;AACnD,UAAM,UAAU,GAAG,UAAU;AAC7B,UAAM,gBAAgB,GAAG,UAAU;AACnC,UAAM,UAAU,GAAG,UAAU;AAG7B,UAAM,eAAe,YAAY;AACjC,UAAM,YAAY,eAAe,UAAU;AAG3C;AAAA,MACE;AAAA,MACA,OAAO;AAAA,QACL,OAAO,MAAM,aAAa,SAAS,MAAM;AAAA,QACzC,MAAM,MAAM,aAAa,SAAS,KAAK;AAAA,MACzC;AAAA,MACA,CAAC;AAAA,IACH;AAGA,UAAM,eAAe,MAAM;AACzB,UAAI,SAAU;AAGd,YAAM,aAAa,gBAAgB,OAAO,CAAC;AAE3C,UAAI,CAAC,cAAc;AACjB,2BAAmB,UAAU;AAAA,MAC/B;AAEA,iBAAW;AAAA,QACT,QAAQ;AAAA,UACN,SAAS;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH;AAGA,UAAM,gBAAgB,CAAC,UAA+B;AACpD,YAAM,MAAM,MAAM;AAElB,YAAM,UAAU,QAAQ,OAAO,QAAQ,cAAc,QAAQ;AAC7D,UAAI,WAAW,QAAQ,SAAS;AAC9B,cAAM,eAAe;AACrB,qBAAa;AAAA,MACf;AAAA,IACF;AAEA,UAAM,UAAU,CAAC,EAAE,gBAAgB;AACnC,UAAM,WAAW,CAAC,CAAC,YAAY,CAAC,CAAC;AACjC,UAAM,qBAAqB,CAAC,CAAC,gBAAgB;AAC7C,UAAM,2BAA2B,aAAa;AAI9C,UAAM,uBAAiC,CAAC;AACxC,QAAI,YAAa,sBAAqB,KAAK,aAAa;AACxD,QAAI,mBAAoB,sBAAqB,KAAK,OAAO;AACzD,UAAM,kBACJ,qBAAqB,SAAS,IAC1B,qBAAqB,KAAK,GAAG,IAC7B;AAGN,UAAM,cAAc,MAAM,OAAO,QAAQ;AACzC,UAAM,cAAc,MAAM,OAAO,QAAQ;AACzC,UAAM,aAAa,MAAM,OAAO,QAAQ;AACxC,UAAM,gBAAgB,MAAM,OAAO;AACnC,UAAM,eAAe,MAAM,OAAO;AAKlC,UAAM,qBAAqB,MAAM;AAC/B,UAAI,UAAU;AACZ,eAAO,YAAY;AAAA,MACrB;AACA,UAAI,0BAA0B;AAC5B,eAAO,YAAY;AAAA,MACrB;AACA,aAAO,YAAY;AAAA,IACrB;AAKA,UAAM,iBAAiB,MAAM;AAC3B,UAAI,WAAW,CAAC,0BAA0B;AACxC,eAAO,aAAa;AAAA,MACtB;AACA,UAAI,4BAA4B,CAAC,UAAU;AACzC,eAAO,YAAY;AAAA,MACrB;AACA,aAAO,YAAY;AAAA,IACrB;AAKA,UAAM,gBAAgB,MAAM;AAC1B,UAAI,SAAU,QAAO,WAAW;AAChC,aAAO,WAAW;AAAA,IACpB;AAKA,UAAM,sBAAsB,MAAM;AAChC,UAAI,SAAU,QAAO,WAAW;AAChC,aAAO,cAAc;AAAA,IACvB;AAKA,UAAM,uBAAuB,MAAM;AACjC,aAAO,cAAc,MAAM;AAAA,IAC7B;AAKA,UAAM,eAAe,MAAM;AACzB,UAAI,SAAU,QAAO,WAAW;AAChC,aAAO,YAAY;AAAA,IACrB;AAGA,UAAM,iBAAiB,MAAkC;AACvD,UAAI,cAAe,QAAO;AAC1B,aAAO,YAAY,SAAS;AAAA,IAC9B;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ,KAAK;AAAA,QACL,eAAc;AAAA,QACd,YAAW;AAAA,QACX,KAAK,YAAY,IAAI;AAAA,QACrB,SAAS;AAAA,QACT;AAAA,QACA,MAAK;AAAA,QACL,gBAAc,eAAe;AAAA,QAC7B,iBAAe,YAAY;AAAA,QAC3B,gBAAc,WAAW;AAAA,QACzB,oBAAkB;AAAA,QAClB,mBAAiB,WAAW,UAAU;AAAA,QACtC,cAAY,CAAC,WAAW,YAAY;AAAA,QACpC,UAAU,WAAW,KAAK;AAAA,QAC1B,WAAW;AAAA,QACX,eAAY;AAAA,QAGZ;AAAA,0BAAAD;AAAA,YAAC;AAAA;AAAA,cACC,OAAO,gBAAgB,IAAI;AAAA,cAC3B,QAAQ,gBAAgB,IAAI;AAAA,cAC5B,iBAAiB,mBAAmB;AAAA,cACpC,aAAa,eAAe;AAAA,cAC5B,aAAa;AAAA,cACb,cAAc;AAAA,cACd,YAAW;AAAA,cACX,gBAAe;AAAA,cACf,YAAY;AAAA,cACZ,YACE,CAAC,WACG;AAAA,gBACE,iBAAiB,2BACb,YAAY,UACZ,YAAY;AAAA,gBAChB,aACE,WAAW,CAAC,2BACR,aAAa,QACb,2BACE,YAAY,UACZ,YAAY;AAAA,cACtB,IACA;AAAA,cAEN,eAAY;AAAA,cAEX,uCACE,gBACC,gBAAAA,KAAC,SAAM,MAAM,YAAY,IAAI,GAAG,OAAO,aAAa,GAAG,IAEvD,gBAAAA,KAAC,SAAM,MAAM,YAAY,IAAI,GAAG,OAAO,aAAa,GAAG;AAAA;AAAA,UAE7D;AAAA,UAGC,YACC;AAAA,YAAC;AAAA;AAAA,cACC,eAAc;AAAA,cACd,YAAW;AAAA,cACX,KAAK,WAAW,IAAI;AAAA,cAEnB;AAAA,4BACC,gBAAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,IAAI;AAAA,oBACJ,OAAO,cAAc;AAAA,oBACrB,UAAU,YAAY,IAAI;AAAA,oBAC1B,YAAY,cAAc,IAAI;AAAA,oBAC9B,YAAY;AAAA,oBACZ,eAAY;AAAA,oBAEX;AAAA;AAAA,gBACH;AAAA,gBAED,eACC,gBAAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,IAAI;AAAA,oBACJ,OAAO,oBAAoB;AAAA,oBAC3B,UAAU,uBAAuB,IAAI;AAAA,oBACrC,YAAY,yBAAyB,IAAI;AAAA,oBACzC,eAAY;AAAA,oBAEX;AAAA;AAAA,gBACH;AAAA,gBAED,sBACC,gBAAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,IAAI;AAAA,oBACJ,MAAK;AAAA,oBACL,OAAO,qBAAqB;AAAA,oBAC5B,UAAU,uBAAuB,IAAI;AAAA,oBACrC,YAAY,yBAAyB,IAAI;AAAA,oBACzC,eAAY;AAAA,oBAEX;AAAA;AAAA,gBACH;AAAA;AAAA;AAAA,UAEJ;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,SAAS,cAAc;","names":["styled","jsx","jsx","Checkbox"]}
|
|
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 { useDesignSystem, useId } from \"@xsolla/xui-core\";\nimport { Check, Minus } from \"@xsolla/xui-icons\";\n\ntype ComponentSize = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport interface CheckboxProps {\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 },\n ref\n ) {\n const { theme } = useDesignSystem();\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.text;\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\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"]}
|