@xsolla/xui-input-copy 0.114.0 → 0.116.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 +91 -82
- package/native/index.js.map +1 -1
- package/native/index.mjs +91 -82
- package/native/index.mjs.map +1 -1
- package/package.json +6 -6
- package/web/index.js +91 -82
- package/web/index.js.map +1 -1
- package/web/index.mjs +91 -82
- package/web/index.mjs.map +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-input-copy",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.116.0",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -13,11 +13,11 @@
|
|
|
13
13
|
"test:coverage": "vitest run --coverage"
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
|
-
"@xsolla/xui-button": "0.
|
|
17
|
-
"@xsolla/xui-core": "0.
|
|
18
|
-
"@xsolla/xui-icons-base": "0.
|
|
19
|
-
"@xsolla/xui-input": "0.
|
|
20
|
-
"@xsolla/xui-primitives-core": "0.
|
|
16
|
+
"@xsolla/xui-button": "0.116.0",
|
|
17
|
+
"@xsolla/xui-core": "0.116.0",
|
|
18
|
+
"@xsolla/xui-icons-base": "0.116.0",
|
|
19
|
+
"@xsolla/xui-input": "0.116.0",
|
|
20
|
+
"@xsolla/xui-primitives-core": "0.116.0"
|
|
21
21
|
},
|
|
22
22
|
"peerDependencies": {
|
|
23
23
|
"react": ">=16.8.0",
|
package/web/index.js
CHANGED
|
@@ -379,88 +379,97 @@ var InputCopy = (0, import_react2.forwardRef)(
|
|
|
379
379
|
children: isVisible ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_xui_icons_base.Eye, { size: iconSize, color: iconColor }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_xui_icons_base.EyeOff, { size: iconSize, color: iconColor })
|
|
380
380
|
}
|
|
381
381
|
) : null;
|
|
382
|
-
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
382
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
383
|
+
Box,
|
|
384
|
+
{
|
|
385
|
+
flexDirection: "column",
|
|
386
|
+
gap: sizeStyles.fieldGap,
|
|
387
|
+
width: "100%",
|
|
388
|
+
testID,
|
|
389
|
+
children: [
|
|
390
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Box, { as: "label", id: labelId, htmlFor: inputId, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
391
|
+
Text,
|
|
392
|
+
{
|
|
393
|
+
color: theme.colors.content.secondary,
|
|
394
|
+
fontSize: sizeStyles.fontSize - 2,
|
|
395
|
+
fontWeight: "500",
|
|
396
|
+
children: label
|
|
397
|
+
}
|
|
398
|
+
) }),
|
|
399
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Box, { flexDirection: "row", width: "100%", gap: 2, children: [
|
|
400
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Box, { flex: 1, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
401
|
+
import_xui_input.Input,
|
|
402
|
+
{
|
|
403
|
+
...props,
|
|
404
|
+
ref: inputRef,
|
|
405
|
+
id: inputId,
|
|
406
|
+
value: internalValue,
|
|
407
|
+
onChange: handleChange,
|
|
408
|
+
size,
|
|
409
|
+
disabled,
|
|
410
|
+
error: isError,
|
|
411
|
+
type: secureTextEntry && !isVisible ? "password" : "text",
|
|
412
|
+
iconRight: VisibilityToggle,
|
|
413
|
+
borderTopLeftRadius: borderRadius,
|
|
414
|
+
borderBottomLeftRadius: borderRadius,
|
|
415
|
+
borderTopRightRadius: 0,
|
|
416
|
+
borderBottomRightRadius: 0,
|
|
417
|
+
"aria-label": !label ? ariaLabel : void 0,
|
|
418
|
+
"aria-labelledby": label ? labelId : void 0,
|
|
419
|
+
"aria-describedby": errorMessage ? errorId : void 0,
|
|
420
|
+
"aria-invalid": isError || void 0,
|
|
421
|
+
label: void 0,
|
|
422
|
+
errorMessage: void 0,
|
|
423
|
+
testID: "input-copy__field"
|
|
424
|
+
}
|
|
425
|
+
) }),
|
|
426
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
427
|
+
Box,
|
|
428
|
+
{
|
|
429
|
+
as: "button",
|
|
430
|
+
type: "button",
|
|
431
|
+
width: sizeStyles.height,
|
|
432
|
+
height: sizeStyles.height,
|
|
433
|
+
backgroundColor: buttonBgColor,
|
|
434
|
+
borderColor: buttonBorderColor,
|
|
435
|
+
borderWidth: 1,
|
|
436
|
+
alignItems: "center",
|
|
437
|
+
justifyContent: "center",
|
|
438
|
+
onPress: handleCopy,
|
|
439
|
+
cursor: isDisable ? "default" : "pointer",
|
|
440
|
+
disabled: isDisable,
|
|
441
|
+
"aria-label": copied ? "Copied" : "Copy to clipboard",
|
|
442
|
+
"aria-disabled": isDisable || void 0,
|
|
443
|
+
"data-testid": "input-copy__copy-button",
|
|
444
|
+
style: {
|
|
445
|
+
borderTopLeftRadius: 0,
|
|
446
|
+
borderBottomLeftRadius: 0,
|
|
447
|
+
borderTopRightRadius: borderRadius,
|
|
448
|
+
borderBottomRightRadius: borderRadius,
|
|
449
|
+
background: buttonBgColor,
|
|
450
|
+
opacity: 1
|
|
451
|
+
},
|
|
452
|
+
hoverStyle: !isDisable && !isError ? {
|
|
453
|
+
backgroundColor: inputColors.bgHover,
|
|
454
|
+
borderColor: inputColors.borderHover
|
|
455
|
+
} : void 0,
|
|
456
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { size: iconSize, color: copyIconColor, children: copied ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_xui_icons_base.CheckCr, {}) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_xui_icons_base.Copy, {}) })
|
|
457
|
+
}
|
|
458
|
+
)
|
|
459
|
+
] }),
|
|
460
|
+
isError && errorMessage && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
461
|
+
Text,
|
|
462
|
+
{
|
|
463
|
+
id: errorId,
|
|
464
|
+
role: "alert",
|
|
465
|
+
color: theme.colors.content.alert.primary,
|
|
466
|
+
fontSize: sizeStyles.fontSize - 2,
|
|
467
|
+
children: errorMessage
|
|
468
|
+
}
|
|
469
|
+
)
|
|
470
|
+
]
|
|
471
|
+
}
|
|
472
|
+
);
|
|
464
473
|
}
|
|
465
474
|
);
|
|
466
475
|
InputCopy.displayName = "InputCopy";
|
package/web/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.tsx","../../src/InputCopy.tsx","../../../primitives-web/src/Box.tsx","../../../primitives-web/src/Text.tsx","../../../primitives-web/src/Icon.tsx"],"sourcesContent":["export * from \"./InputCopy\";\n","import React, { useState, useEffect, forwardRef, useRef } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Icon, Text } from \"@xsolla/xui-primitives\";\nimport { Input, InputProps } from \"@xsolla/xui-input\";\nimport { Copy, CheckCr, Eye, EyeOff } from \"@xsolla/xui-icons-base\";\nimport { useDesignSystem, useId } from \"@xsolla/xui-core\";\n\nexport interface InputCopyProps extends Omit<InputProps, \"onCopy\"> {\n /**\n * Callback when value is copied to clipboard\n */\n onCopy?: (value: string) => void;\n /**\n * Whether to hide the text (like a password field)\n */\n secureTextEntry?: boolean;\n /**\n * Initial visibility state when secureTextEntry is true\n */\n initialVisible?: boolean;\n /**\n * Test identifier for the component\n */\n testID?: string;\n}\n\nexport const InputCopy = forwardRef<HTMLInputElement, InputCopyProps>(\n (\n {\n value = \"\",\n onCopy,\n onChange,\n onChangeText,\n size = \"md\",\n disabled = false,\n label,\n errorMessage,\n error,\n secureTextEntry = false,\n initialVisible = false,\n id: providedId,\n \"aria-label\": ariaLabel,\n testID,\n ...props\n },\n ref\n ) => {\n const { theme } = useDesignSystem();\n const [copied, setCopied] = useState(false);\n const [isVisible, setIsVisible] = useState(\n secureTextEntry ? initialVisible : true\n );\n // Internal value state to track current input value\n const [internalValue, setInternalValue] = useState(value);\n const inputRef = useRef<HTMLInputElement>(null);\n\n // Generate unique IDs for accessibility\n const rawId = useId();\n const safeId = rawId.replace(/:/g, \"\");\n const inputId = providedId || `input-copy-${safeId}`;\n const labelId = `${inputId}-label`;\n const errorId = `${inputId}-error`;\n\n // Forward ref to input element\n React.useImperativeHandle(\n ref,\n () => inputRef.current as HTMLInputElement,\n []\n );\n\n // Sync internalValue with value prop when it changes\n useEffect(() => {\n setInternalValue(value);\n }, [value]);\n\n const isDisable = disabled;\n const isError = !!(errorMessage || error);\n const sizeStyles = theme.sizing.input(size);\n const inputColors = theme.colors.control.input;\n\n // Border radius config matching Input component\n const borderRadiusConfig: Record<string, number> = {\n xl: 8,\n lg: 8,\n md: 8,\n sm: 4,\n xs: 4,\n };\n\n // Icon sizes matching Input component\n const iconSizeConfig: Record<string, number> = {\n xl: 18,\n lg: 18,\n md: 18,\n sm: 16,\n xs: 16,\n };\n\n const borderRadius = borderRadiusConfig[size];\n const iconSize = iconSizeConfig[size];\n\n const handleCopy = async () => {\n if (internalValue && !isDisable) {\n try {\n // Use clipboard API (works on both web and can be polyfilled for RN)\n if (\n typeof navigator !== \"undefined\" &&\n navigator.clipboard?.writeText\n ) {\n await navigator.clipboard.writeText(String(internalValue));\n } else {\n throw new Error(\"Clipboard API not available\");\n }\n setCopied(true);\n onCopy?.(String(internalValue));\n } catch {\n // Silently fail - clipboard operations can fail due to permissions or browser restrictions\n setCopied(false);\n return;\n }\n setTimeout(() => setCopied(false), 2000);\n }\n };\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n setInternalValue(newValue);\n if (onChange) onChange(e);\n if (onChangeText) onChangeText(newValue);\n };\n\n const toggleVisibility = () => {\n if (!isDisable) {\n setIsVisible(!isVisible);\n }\n };\n\n // Icon colors - disabled icons use placeholder color per Figma spec\n const iconColor = isDisable ? inputColors.placeholder : inputColors.text;\n const copyIconColor = isDisable\n ? inputColors.placeholder\n : copied\n ? theme.colors.content.success.secondary\n : inputColors.text;\n\n // Button background color\n let buttonBgColor = inputColors.bg;\n if (isDisable) {\n buttonBgColor = inputColors.bgDisable;\n }\n\n // Button border color\n let buttonBorderColor = inputColors.border;\n if (isDisable) {\n buttonBorderColor = inputColors.borderDisable;\n }\n\n // Visibility toggle icon component\n const VisibilityToggle = secureTextEntry ? (\n <Box\n as=\"button\"\n type=\"button\"\n onPress={toggleVisibility}\n cursor={isDisable ? \"default\" : \"pointer\"}\n alignItems=\"center\"\n justifyContent=\"center\"\n backgroundColor=\"transparent\"\n borderWidth={0}\n aria-label={isVisible ? \"Hide text\" : \"Show text\"}\n aria-pressed={isVisible}\n data-testid=\"input-copy__visibility-toggle\"\n >\n {isVisible ? (\n <Eye size={iconSize} color={iconColor} />\n ) : (\n <EyeOff size={iconSize} color={iconColor} />\n )}\n </Box>\n ) : null;\n\n return (\n <Box flexDirection=\"column\" gap={8} width=\"100%\" testID={testID}>\n {label && (\n <Box as=\"label\" id={labelId} htmlFor={inputId}>\n <Text\n color={theme.colors.content.secondary}\n fontSize={sizeStyles.fontSize - 2}\n fontWeight=\"500\"\n >\n {label}\n </Text>\n </Box>\n )}\n <Box flexDirection=\"row\" width=\"100%\" gap={2}>\n <Box flex={1}>\n <Input\n {...props}\n ref={inputRef}\n id={inputId}\n value={internalValue}\n onChange={handleChange}\n size={size}\n disabled={disabled}\n error={isError}\n type={secureTextEntry && !isVisible ? \"password\" : \"text\"}\n iconRight={VisibilityToggle}\n borderTopLeftRadius={borderRadius}\n borderBottomLeftRadius={borderRadius}\n borderTopRightRadius={0}\n borderBottomRightRadius={0}\n aria-label={!label ? ariaLabel : undefined}\n aria-labelledby={label ? labelId : undefined}\n aria-describedby={errorMessage ? errorId : undefined}\n aria-invalid={isError || undefined}\n // Clear label and errorMessage here as we handle them in InputCopy\n label={undefined}\n errorMessage={undefined}\n testID=\"input-copy__field\"\n />\n </Box>\n <Box\n as=\"button\"\n type=\"button\"\n width={sizeStyles.height}\n height={sizeStyles.height}\n backgroundColor={buttonBgColor}\n borderColor={buttonBorderColor}\n borderWidth={1}\n alignItems=\"center\"\n justifyContent=\"center\"\n onPress={handleCopy}\n cursor={isDisable ? \"default\" : \"pointer\"}\n disabled={isDisable}\n aria-label={copied ? \"Copied\" : \"Copy to clipboard\"}\n aria-disabled={isDisable || undefined}\n data-testid=\"input-copy__copy-button\"\n style={{\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n borderTopRightRadius: borderRadius,\n borderBottomRightRadius: borderRadius,\n background: buttonBgColor,\n opacity: 1,\n }}\n hoverStyle={\n !isDisable && !isError\n ? {\n backgroundColor: inputColors.bgHover,\n borderColor: inputColors.borderHover,\n }\n : undefined\n }\n >\n <Icon size={iconSize} color={copyIconColor}>\n {copied ? <CheckCr /> : <Copy />}\n </Icon>\n </Box>\n </Box>\n {isError && errorMessage && (\n <Text\n id={errorId}\n role=\"alert\"\n color={theme.colors.content.alert.primary}\n fontSize={sizeStyles.fontSize - 2}\n >\n {errorMessage}\n </Text>\n )}\n </Box>\n );\n }\n);\n\nInputCopy.displayName = \"InputCopy\";\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","import React from \"react\";\nimport styled from \"styled-components\";\nimport { IconProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledIcon = styled.div<IconProps>`\n display: flex;\n align-items: center;\n justify-content: center;\n width: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n height: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n color: ${(props) => props.color || \"currentColor\"};\n\n svg {\n width: 100%;\n height: 100%;\n fill: none;\n stroke: currentColor;\n }\n`;\n\nexport const Icon: React.FC<IconProps> = ({ children, ...props }) => {\n return <StyledIcon {...props}>{children}</StyledIcon>;\n};\n"],"mappings":"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","names":["import_react","styled","React","import_styled_components","import_jsx_runtime","styled","import_styled_components","import_jsx_runtime","styled","import_jsx_runtime","React"]}
|
|
1
|
+
{"version":3,"sources":["../../src/index.tsx","../../src/InputCopy.tsx","../../../primitives-web/src/Box.tsx","../../../primitives-web/src/Text.tsx","../../../primitives-web/src/Icon.tsx"],"sourcesContent":["export * from \"./InputCopy\";\n","import React, { useState, useEffect, forwardRef, useRef } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Icon, Text } from \"@xsolla/xui-primitives\";\nimport { Input, InputProps } from \"@xsolla/xui-input\";\nimport { Copy, CheckCr, Eye, EyeOff } from \"@xsolla/xui-icons-base\";\nimport { useDesignSystem, useId } from \"@xsolla/xui-core\";\n\nexport interface InputCopyProps extends Omit<InputProps, \"onCopy\"> {\n /**\n * Callback when value is copied to clipboard\n */\n onCopy?: (value: string) => void;\n /**\n * Whether to hide the text (like a password field)\n */\n secureTextEntry?: boolean;\n /**\n * Initial visibility state when secureTextEntry is true\n */\n initialVisible?: boolean;\n /**\n * Test identifier for the component\n */\n testID?: string;\n}\n\nexport const InputCopy = forwardRef<HTMLInputElement, InputCopyProps>(\n (\n {\n value = \"\",\n onCopy,\n onChange,\n onChangeText,\n size = \"md\",\n disabled = false,\n label,\n errorMessage,\n error,\n secureTextEntry = false,\n initialVisible = false,\n id: providedId,\n \"aria-label\": ariaLabel,\n testID,\n ...props\n },\n ref\n ) => {\n const { theme } = useDesignSystem();\n const [copied, setCopied] = useState(false);\n const [isVisible, setIsVisible] = useState(\n secureTextEntry ? initialVisible : true\n );\n // Internal value state to track current input value\n const [internalValue, setInternalValue] = useState(value);\n const inputRef = useRef<HTMLInputElement>(null);\n\n // Generate unique IDs for accessibility\n const rawId = useId();\n const safeId = rawId.replace(/:/g, \"\");\n const inputId = providedId || `input-copy-${safeId}`;\n const labelId = `${inputId}-label`;\n const errorId = `${inputId}-error`;\n\n // Forward ref to input element\n React.useImperativeHandle(\n ref,\n () => inputRef.current as HTMLInputElement,\n []\n );\n\n // Sync internalValue with value prop when it changes\n useEffect(() => {\n setInternalValue(value);\n }, [value]);\n\n const isDisable = disabled;\n const isError = !!(errorMessage || error);\n const sizeStyles = theme.sizing.input(size);\n const inputColors = theme.colors.control.input;\n\n // Border radius config matching Input component\n const borderRadiusConfig: Record<string, number> = {\n xl: 8,\n lg: 8,\n md: 8,\n sm: 4,\n xs: 4,\n };\n\n // Icon sizes matching Input component\n const iconSizeConfig: Record<string, number> = {\n xl: 18,\n lg: 18,\n md: 18,\n sm: 16,\n xs: 16,\n };\n\n const borderRadius = borderRadiusConfig[size];\n const iconSize = iconSizeConfig[size];\n\n const handleCopy = async () => {\n if (internalValue && !isDisable) {\n try {\n // Use clipboard API (works on both web and can be polyfilled for RN)\n if (\n typeof navigator !== \"undefined\" &&\n navigator.clipboard?.writeText\n ) {\n await navigator.clipboard.writeText(String(internalValue));\n } else {\n throw new Error(\"Clipboard API not available\");\n }\n setCopied(true);\n onCopy?.(String(internalValue));\n } catch {\n // Silently fail - clipboard operations can fail due to permissions or browser restrictions\n setCopied(false);\n return;\n }\n setTimeout(() => setCopied(false), 2000);\n }\n };\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n setInternalValue(newValue);\n if (onChange) onChange(e);\n if (onChangeText) onChangeText(newValue);\n };\n\n const toggleVisibility = () => {\n if (!isDisable) {\n setIsVisible(!isVisible);\n }\n };\n\n // Icon colors - disabled icons use placeholder color per Figma spec\n const iconColor = isDisable ? inputColors.placeholder : inputColors.text;\n const copyIconColor = isDisable\n ? inputColors.placeholder\n : copied\n ? theme.colors.content.success.secondary\n : inputColors.text;\n\n // Button background color\n let buttonBgColor = inputColors.bg;\n if (isDisable) {\n buttonBgColor = inputColors.bgDisable;\n }\n\n // Button border color\n let buttonBorderColor = inputColors.border;\n if (isDisable) {\n buttonBorderColor = inputColors.borderDisable;\n }\n\n // Visibility toggle icon component\n const VisibilityToggle = secureTextEntry ? (\n <Box\n as=\"button\"\n type=\"button\"\n onPress={toggleVisibility}\n cursor={isDisable ? \"default\" : \"pointer\"}\n alignItems=\"center\"\n justifyContent=\"center\"\n backgroundColor=\"transparent\"\n borderWidth={0}\n aria-label={isVisible ? \"Hide text\" : \"Show text\"}\n aria-pressed={isVisible}\n data-testid=\"input-copy__visibility-toggle\"\n >\n {isVisible ? (\n <Eye size={iconSize} color={iconColor} />\n ) : (\n <EyeOff size={iconSize} color={iconColor} />\n )}\n </Box>\n ) : null;\n\n return (\n <Box\n flexDirection=\"column\"\n gap={sizeStyles.fieldGap}\n width=\"100%\"\n testID={testID}\n >\n {label && (\n <Box as=\"label\" id={labelId} htmlFor={inputId}>\n <Text\n color={theme.colors.content.secondary}\n fontSize={sizeStyles.fontSize - 2}\n fontWeight=\"500\"\n >\n {label}\n </Text>\n </Box>\n )}\n <Box flexDirection=\"row\" width=\"100%\" gap={2}>\n <Box flex={1}>\n <Input\n {...props}\n ref={inputRef}\n id={inputId}\n value={internalValue}\n onChange={handleChange}\n size={size}\n disabled={disabled}\n error={isError}\n type={secureTextEntry && !isVisible ? \"password\" : \"text\"}\n iconRight={VisibilityToggle}\n borderTopLeftRadius={borderRadius}\n borderBottomLeftRadius={borderRadius}\n borderTopRightRadius={0}\n borderBottomRightRadius={0}\n aria-label={!label ? ariaLabel : undefined}\n aria-labelledby={label ? labelId : undefined}\n aria-describedby={errorMessage ? errorId : undefined}\n aria-invalid={isError || undefined}\n // Clear label and errorMessage here as we handle them in InputCopy\n label={undefined}\n errorMessage={undefined}\n testID=\"input-copy__field\"\n />\n </Box>\n <Box\n as=\"button\"\n type=\"button\"\n width={sizeStyles.height}\n height={sizeStyles.height}\n backgroundColor={buttonBgColor}\n borderColor={buttonBorderColor}\n borderWidth={1}\n alignItems=\"center\"\n justifyContent=\"center\"\n onPress={handleCopy}\n cursor={isDisable ? \"default\" : \"pointer\"}\n disabled={isDisable}\n aria-label={copied ? \"Copied\" : \"Copy to clipboard\"}\n aria-disabled={isDisable || undefined}\n data-testid=\"input-copy__copy-button\"\n style={{\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n borderTopRightRadius: borderRadius,\n borderBottomRightRadius: borderRadius,\n background: buttonBgColor,\n opacity: 1,\n }}\n hoverStyle={\n !isDisable && !isError\n ? {\n backgroundColor: inputColors.bgHover,\n borderColor: inputColors.borderHover,\n }\n : undefined\n }\n >\n <Icon size={iconSize} color={copyIconColor}>\n {copied ? <CheckCr /> : <Copy />}\n </Icon>\n </Box>\n </Box>\n {isError && errorMessage && (\n <Text\n id={errorId}\n role=\"alert\"\n color={theme.colors.content.alert.primary}\n fontSize={sizeStyles.fontSize - 2}\n >\n {errorMessage}\n </Text>\n )}\n </Box>\n );\n }\n);\n\nInputCopy.displayName = \"InputCopy\";\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","import React from \"react\";\nimport styled from \"styled-components\";\nimport { IconProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledIcon = styled.div<IconProps>`\n display: flex;\n align-items: center;\n justify-content: center;\n width: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n height: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n color: ${(props) => props.color || \"currentColor\"};\n\n svg {\n width: 100%;\n height: 100%;\n fill: none;\n stroke: currentColor;\n }\n`;\n\nexport const Icon: React.FC<IconProps> = ({ children, ...props }) => {\n return <StyledIcon {...props}>{children}</StyledIcon>;\n};\n"],"mappings":"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","names":["import_react","styled","React","import_styled_components","import_jsx_runtime","styled","import_styled_components","import_jsx_runtime","styled","import_jsx_runtime","React"]}
|
package/web/index.mjs
CHANGED
|
@@ -343,88 +343,97 @@ var InputCopy = forwardRef(
|
|
|
343
343
|
children: isVisible ? /* @__PURE__ */ jsx4(Eye, { size: iconSize, color: iconColor }) : /* @__PURE__ */ jsx4(EyeOff, { size: iconSize, color: iconColor })
|
|
344
344
|
}
|
|
345
345
|
) : null;
|
|
346
|
-
return /* @__PURE__ */ jsxs(
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
346
|
+
return /* @__PURE__ */ jsxs(
|
|
347
|
+
Box,
|
|
348
|
+
{
|
|
349
|
+
flexDirection: "column",
|
|
350
|
+
gap: sizeStyles.fieldGap,
|
|
351
|
+
width: "100%",
|
|
352
|
+
testID,
|
|
353
|
+
children: [
|
|
354
|
+
label && /* @__PURE__ */ jsx4(Box, { as: "label", id: labelId, htmlFor: inputId, children: /* @__PURE__ */ jsx4(
|
|
355
|
+
Text,
|
|
356
|
+
{
|
|
357
|
+
color: theme.colors.content.secondary,
|
|
358
|
+
fontSize: sizeStyles.fontSize - 2,
|
|
359
|
+
fontWeight: "500",
|
|
360
|
+
children: label
|
|
361
|
+
}
|
|
362
|
+
) }),
|
|
363
|
+
/* @__PURE__ */ jsxs(Box, { flexDirection: "row", width: "100%", gap: 2, children: [
|
|
364
|
+
/* @__PURE__ */ jsx4(Box, { flex: 1, children: /* @__PURE__ */ jsx4(
|
|
365
|
+
Input,
|
|
366
|
+
{
|
|
367
|
+
...props,
|
|
368
|
+
ref: inputRef,
|
|
369
|
+
id: inputId,
|
|
370
|
+
value: internalValue,
|
|
371
|
+
onChange: handleChange,
|
|
372
|
+
size,
|
|
373
|
+
disabled,
|
|
374
|
+
error: isError,
|
|
375
|
+
type: secureTextEntry && !isVisible ? "password" : "text",
|
|
376
|
+
iconRight: VisibilityToggle,
|
|
377
|
+
borderTopLeftRadius: borderRadius,
|
|
378
|
+
borderBottomLeftRadius: borderRadius,
|
|
379
|
+
borderTopRightRadius: 0,
|
|
380
|
+
borderBottomRightRadius: 0,
|
|
381
|
+
"aria-label": !label ? ariaLabel : void 0,
|
|
382
|
+
"aria-labelledby": label ? labelId : void 0,
|
|
383
|
+
"aria-describedby": errorMessage ? errorId : void 0,
|
|
384
|
+
"aria-invalid": isError || void 0,
|
|
385
|
+
label: void 0,
|
|
386
|
+
errorMessage: void 0,
|
|
387
|
+
testID: "input-copy__field"
|
|
388
|
+
}
|
|
389
|
+
) }),
|
|
390
|
+
/* @__PURE__ */ jsx4(
|
|
391
|
+
Box,
|
|
392
|
+
{
|
|
393
|
+
as: "button",
|
|
394
|
+
type: "button",
|
|
395
|
+
width: sizeStyles.height,
|
|
396
|
+
height: sizeStyles.height,
|
|
397
|
+
backgroundColor: buttonBgColor,
|
|
398
|
+
borderColor: buttonBorderColor,
|
|
399
|
+
borderWidth: 1,
|
|
400
|
+
alignItems: "center",
|
|
401
|
+
justifyContent: "center",
|
|
402
|
+
onPress: handleCopy,
|
|
403
|
+
cursor: isDisable ? "default" : "pointer",
|
|
404
|
+
disabled: isDisable,
|
|
405
|
+
"aria-label": copied ? "Copied" : "Copy to clipboard",
|
|
406
|
+
"aria-disabled": isDisable || void 0,
|
|
407
|
+
"data-testid": "input-copy__copy-button",
|
|
408
|
+
style: {
|
|
409
|
+
borderTopLeftRadius: 0,
|
|
410
|
+
borderBottomLeftRadius: 0,
|
|
411
|
+
borderTopRightRadius: borderRadius,
|
|
412
|
+
borderBottomRightRadius: borderRadius,
|
|
413
|
+
background: buttonBgColor,
|
|
414
|
+
opacity: 1
|
|
415
|
+
},
|
|
416
|
+
hoverStyle: !isDisable && !isError ? {
|
|
417
|
+
backgroundColor: inputColors.bgHover,
|
|
418
|
+
borderColor: inputColors.borderHover
|
|
419
|
+
} : void 0,
|
|
420
|
+
children: /* @__PURE__ */ jsx4(Icon, { size: iconSize, color: copyIconColor, children: copied ? /* @__PURE__ */ jsx4(CheckCr, {}) : /* @__PURE__ */ jsx4(Copy, {}) })
|
|
421
|
+
}
|
|
422
|
+
)
|
|
423
|
+
] }),
|
|
424
|
+
isError && errorMessage && /* @__PURE__ */ jsx4(
|
|
425
|
+
Text,
|
|
426
|
+
{
|
|
427
|
+
id: errorId,
|
|
428
|
+
role: "alert",
|
|
429
|
+
color: theme.colors.content.alert.primary,
|
|
430
|
+
fontSize: sizeStyles.fontSize - 2,
|
|
431
|
+
children: errorMessage
|
|
432
|
+
}
|
|
433
|
+
)
|
|
434
|
+
]
|
|
435
|
+
}
|
|
436
|
+
);
|
|
428
437
|
}
|
|
429
438
|
);
|
|
430
439
|
InputCopy.displayName = "InputCopy";
|