@xsolla/xui-input-copy 0.104.0 → 0.106.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/native/index.js +5 -5
  2. package/native/index.js.map +1 -1
  3. package/native/index.mjs +5 -5
  4. package/native/index.mjs.map +1 -1
  5. package/package.json +6 -6
  6. package/web/index.js +5 -5
  7. package/web/index.js.map +1 -1
  8. package/web/index.mjs +5 -5
  9. package/web/index.mjs.map +1 -1
package/native/index.js CHANGED
@@ -310,11 +310,11 @@ var InputCopy = (0, import_react2.forwardRef)(
310
310
  const sizeStyles = theme.sizing.input(size);
311
311
  const inputColors = theme.colors.control.input;
312
312
  const borderRadiusConfig = {
313
- xl: 4,
314
- lg: 4,
315
- md: 2,
316
- sm: 2,
317
- xs: 2
313
+ xl: 8,
314
+ lg: 8,
315
+ md: 8,
316
+ sm: 4,
317
+ xs: 4
318
318
  };
319
319
  const iconSizeConfig = {
320
320
  xl: 18,
package/native/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/index.tsx","../../src/InputCopy.tsx","../../../primitives-native/src/Box.tsx","../../../primitives-native/src/Text.tsx","../../../primitives-native/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, Check, Eye, EyeOff } from \"@xsolla/xui-icons\";\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: 4,\n lg: 4,\n md: 2,\n sm: 2,\n xs: 2,\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 ? <Check /> : <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 {\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","import React from \"react\";\nimport { View, ViewStyle } from \"react-native\";\nimport { IconProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Icon: React.FC<IconProps> = ({ children, color, size }) => {\n const style: ViewStyle = {\n width: typeof size === \"number\" ? size : undefined,\n height: typeof size === \"number\" ? size : undefined,\n alignItems: \"center\",\n justifyContent: \"center\",\n };\n\n // On native, we try to pass the color down to children (like Text primitives)\n // to mimic the CSS inheritance behavior of the web version.\n const childrenWithProps = React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n return React.cloneElement(child, {\n color: child.props.color || color,\n // Also pass size if child seems to be an icon that needs it\n size: child.props.size || size,\n });\n }\n return child;\n });\n\n return <View style={style}>{childrenWithProps}</View>;\n};\n"],"mappings":"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","names":["import_react","import_react_native","import_jsx_runtime","RNText","import_react_native","import_jsx_runtime","React","import_jsx_runtime","React"]}
1
+ {"version":3,"sources":["../../src/index.tsx","../../src/InputCopy.tsx","../../../primitives-native/src/Box.tsx","../../../primitives-native/src/Text.tsx","../../../primitives-native/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, Check, Eye, EyeOff } from \"@xsolla/xui-icons\";\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 ? <Check /> : <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 {\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","import React from \"react\";\nimport { View, ViewStyle } from \"react-native\";\nimport { IconProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Icon: React.FC<IconProps> = ({ children, color, size }) => {\n const style: ViewStyle = {\n width: typeof size === \"number\" ? size : undefined,\n height: typeof size === \"number\" ? size : undefined,\n alignItems: \"center\",\n justifyContent: \"center\",\n };\n\n // On native, we try to pass the color down to children (like Text primitives)\n // to mimic the CSS inheritance behavior of the web version.\n const childrenWithProps = React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n return React.cloneElement(child, {\n color: child.props.color || color,\n // Also pass size if child seems to be an icon that needs it\n size: child.props.size || size,\n });\n }\n return child;\n });\n\n return <View style={style}>{childrenWithProps}</View>;\n};\n"],"mappings":"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","names":["import_react","import_react_native","import_jsx_runtime","RNText","import_react_native","import_jsx_runtime","React","import_jsx_runtime","React"]}
package/native/index.mjs CHANGED
@@ -278,11 +278,11 @@ var InputCopy = forwardRef(
278
278
  const sizeStyles = theme.sizing.input(size);
279
279
  const inputColors = theme.colors.control.input;
280
280
  const borderRadiusConfig = {
281
- xl: 4,
282
- lg: 4,
283
- md: 2,
284
- sm: 2,
285
- xs: 2
281
+ xl: 8,
282
+ lg: 8,
283
+ md: 8,
284
+ sm: 4,
285
+ xs: 4
286
286
  };
287
287
  const iconSizeConfig = {
288
288
  xl: 18,
package/native/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/InputCopy.tsx","../../../primitives-native/src/Box.tsx","../../../primitives-native/src/Text.tsx","../../../primitives-native/src/Icon.tsx"],"sourcesContent":["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, Check, Eye, EyeOff } from \"@xsolla/xui-icons\";\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: 4,\n lg: 4,\n md: 2,\n sm: 2,\n xs: 2,\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 ? <Check /> : <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 {\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","import React from \"react\";\nimport { View, ViewStyle } from \"react-native\";\nimport { IconProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Icon: React.FC<IconProps> = ({ children, color, size }) => {\n const style: ViewStyle = {\n width: typeof size === \"number\" ? size : undefined,\n height: typeof size === \"number\" ? size : undefined,\n alignItems: \"center\",\n justifyContent: \"center\",\n };\n\n // On native, we try to pass the color down to children (like Text primitives)\n // to mimic the CSS inheritance behavior of the web version.\n const childrenWithProps = React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n return React.cloneElement(child, {\n color: child.props.color || color,\n // Also pass size if child seems to be an icon that needs it\n size: child.props.size || size,\n });\n }\n return child;\n });\n\n return <View style={style}>{childrenWithProps}</View>;\n};\n"],"mappings":"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","names":["React","jsx","View","jsx","jsx","React"]}
1
+ {"version":3,"sources":["../../src/InputCopy.tsx","../../../primitives-native/src/Box.tsx","../../../primitives-native/src/Text.tsx","../../../primitives-native/src/Icon.tsx"],"sourcesContent":["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, Check, Eye, EyeOff } from \"@xsolla/xui-icons\";\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 ? <Check /> : <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 {\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","import React from \"react\";\nimport { View, ViewStyle } from \"react-native\";\nimport { IconProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Icon: React.FC<IconProps> = ({ children, color, size }) => {\n const style: ViewStyle = {\n width: typeof size === \"number\" ? size : undefined,\n height: typeof size === \"number\" ? size : undefined,\n alignItems: \"center\",\n justifyContent: \"center\",\n };\n\n // On native, we try to pass the color down to children (like Text primitives)\n // to mimic the CSS inheritance behavior of the web version.\n const childrenWithProps = React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n return React.cloneElement(child, {\n color: child.props.color || color,\n // Also pass size if child seems to be an icon that needs it\n size: child.props.size || size,\n });\n }\n return child;\n });\n\n return <View style={style}>{childrenWithProps}</View>;\n};\n"],"mappings":"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","names":["React","jsx","View","jsx","jsx","React"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xsolla/xui-input-copy",
3
- "version": "0.104.0",
3
+ "version": "0.106.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.104.0",
17
- "@xsolla/xui-core": "0.104.0",
18
- "@xsolla/xui-icons": "0.104.0",
19
- "@xsolla/xui-input": "0.104.0",
20
- "@xsolla/xui-primitives-core": "0.104.0"
16
+ "@xsolla/xui-button": "0.106.0",
17
+ "@xsolla/xui-core": "0.106.0",
18
+ "@xsolla/xui-icons": "0.106.0",
19
+ "@xsolla/xui-input": "0.106.0",
20
+ "@xsolla/xui-primitives-core": "0.106.0"
21
21
  },
22
22
  "peerDependencies": {
23
23
  "react": ">=16.8.0",
package/web/index.js CHANGED
@@ -308,11 +308,11 @@ var InputCopy = (0, import_react2.forwardRef)(
308
308
  const sizeStyles = theme.sizing.input(size);
309
309
  const inputColors = theme.colors.control.input;
310
310
  const borderRadiusConfig = {
311
- xl: 4,
312
- lg: 4,
313
- md: 2,
314
- sm: 2,
315
- xs: 2
311
+ xl: 8,
312
+ lg: 8,
313
+ md: 8,
314
+ sm: 4,
315
+ xs: 4
316
316
  };
317
317
  const iconSizeConfig = {
318
318
  xl: 18,
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, Check, Eye, EyeOff } from \"@xsolla/xui-icons\";\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: 4,\n lg: 4,\n md: 2,\n sm: 2,\n xs: 2,\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 ? <Check /> : <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 ...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, Check, Eye, EyeOff } from \"@xsolla/xui-icons\";\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 ? <Check /> : <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 ...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
@@ -272,11 +272,11 @@ var InputCopy = forwardRef(
272
272
  const sizeStyles = theme.sizing.input(size);
273
273
  const inputColors = theme.colors.control.input;
274
274
  const borderRadiusConfig = {
275
- xl: 4,
276
- lg: 4,
277
- md: 2,
278
- sm: 2,
279
- xs: 2
275
+ xl: 8,
276
+ lg: 8,
277
+ md: 8,
278
+ sm: 4,
279
+ xs: 4
280
280
  };
281
281
  const iconSizeConfig = {
282
282
  xl: 18,
package/web/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/InputCopy.tsx","../../../primitives-web/src/Box.tsx","../../../primitives-web/src/Text.tsx","../../../primitives-web/src/Icon.tsx"],"sourcesContent":["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, Check, Eye, EyeOff } from \"@xsolla/xui-icons\";\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: 4,\n lg: 4,\n md: 2,\n sm: 2,\n xs: 2,\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 ? <Check /> : <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 ...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":["React","styled","jsx","styled","jsx","jsx","React"]}
1
+ {"version":3,"sources":["../../src/InputCopy.tsx","../../../primitives-web/src/Box.tsx","../../../primitives-web/src/Text.tsx","../../../primitives-web/src/Icon.tsx"],"sourcesContent":["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, Check, Eye, EyeOff } from \"@xsolla/xui-icons\";\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 ? <Check /> : <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 ...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":["React","styled","jsx","styled","jsx","jsx","React"]}