@xsolla/xui-svg-themed 0.158.0 → 0.160.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/README.md +33 -25
  2. package/native/index.d.mts +2 -0
  3. package/native/index.d.ts +2 -0
  4. package/native/index.js +9 -2
  5. package/native/index.js.map +1 -1
  6. package/native/index.mjs +9 -2
  7. package/native/index.mjs.map +1 -1
  8. package/package.json +3 -3
  9. package/web/index.d.mts +2 -0
  10. package/web/index.d.ts +2 -0
  11. package/web/index.js +9 -2
  12. package/web/index.js.map +1 -1
  13. package/web/index.mjs +9 -2
  14. package/web/index.mjs.map +1 -1
package/README.md CHANGED
@@ -11,14 +11,14 @@ npm install @xsolla/xui-svg-themed
11
11
  ## Imports
12
12
 
13
13
  ```tsx
14
- import { SvgThemed, type SvgThemedProps } from '@xsolla/xui-svg-themed';
14
+ import { SvgThemed, type SvgThemedProps } from "@xsolla/xui-svg-themed";
15
15
  ```
16
16
 
17
17
  ## Quick start
18
18
 
19
19
  ```tsx
20
- import * as React from 'react';
21
- import { SvgThemed } from '@xsolla/xui-svg-themed';
20
+ import * as React from "react";
21
+ import { SvgThemed } from "@xsolla/xui-svg-themed";
22
22
 
23
23
  export default function QuickStart() {
24
24
  return (
@@ -33,10 +33,11 @@ export default function QuickStart() {
33
33
 
34
34
  ### `<SvgThemed>`
35
35
 
36
- | Prop | Type | Default | Description |
37
- | --- | --- | --- | --- |
38
- | `children` | `ReactNode` | — | SVG content. Themed token strings are resolved recursively. |
39
- | `data-testid` | `string` | — | Test identifier. |
36
+ | Prop | Type | Default | Description |
37
+ | ------------- | ----------- | ------- | ------------------------------------------------------------------------------------------------------------- |
38
+ | `children` | `ReactNode` | — | SVG content. Themed token strings are resolved recursively. |
39
+ | `data-testid` | `string` | — | Test identifier. |
40
+ | `testID` | `string` | — | Test ID for testing frameworks. On web this renders as `data-testid`; on React Native it renders as `testID`. |
40
41
 
41
42
  Standard SVG attributes (`width`, `height`, `viewBox`, `xmlns`, `role`, `fill`, `stroke`, etc.) come from `SVGProps<SVGSVGElement>` and are forwarded to the underlying `<svg>` element — they are not enumerated as explicit props.
42
43
 
@@ -55,25 +56,25 @@ The following descendant attributes are scanned recursively and replaced when th
55
56
 
56
57
  Token strings start with `$` and map to theme paths. Tokens not in the map are passed through unchanged.
57
58
 
58
- | Token | Theme path |
59
- | --- | --- |
60
- | `$colors_core_text_primary` | `content.primary` |
61
- | `$colors_core_text_secondary` | `content.secondary` |
62
- | `$colors_core_text_tertiary` | `content.tertiary` |
63
- | `$colors_core_text_brand` | `content.brand.primary` |
64
- | `$colors_core_text_success` | `content.success.primary` |
65
- | `$colors_core_text_warning` | `content.warning.primary` |
66
- | `$colors_core_text_alert` | `content.alert.primary` |
67
- | `$colors_core_text_neutral` | `content.neutral.primary` |
68
- | `$colors_control_faint_bg` | `control.mono.secondary.bg` |
59
+ | Token | Theme path |
60
+ | ----------------------------- | --------------------------- |
61
+ | `$colors_core_text_primary` | `content.primary` |
62
+ | `$colors_core_text_secondary` | `content.secondary` |
63
+ | `$colors_core_text_tertiary` | `content.tertiary` |
64
+ | `$colors_core_text_brand` | `content.brand.primary` |
65
+ | `$colors_core_text_success` | `content.success.primary` |
66
+ | `$colors_core_text_warning` | `content.warning.primary` |
67
+ | `$colors_core_text_alert` | `content.alert.primary` |
68
+ | `$colors_core_text_neutral` | `content.neutral.primary` |
69
+ | `$colors_control_faint_bg` | `control.mono.secondary.bg` |
69
70
 
70
71
  ## Examples
71
72
 
72
73
  ### Themed status icon
73
74
 
74
75
  ```tsx
75
- import * as React from 'react';
76
- import { SvgThemed } from '@xsolla/xui-svg-themed';
76
+ import * as React from "react";
77
+ import { SvgThemed } from "@xsolla/xui-svg-themed";
77
78
 
78
79
  export default function StatusIcon() {
79
80
  return (
@@ -95,15 +96,22 @@ export default function StatusIcon() {
95
96
  ### Multi-colour illustration
96
97
 
97
98
  ```tsx
98
- import * as React from 'react';
99
- import { SvgThemed } from '@xsolla/xui-svg-themed';
99
+ import * as React from "react";
100
+ import { SvgThemed } from "@xsolla/xui-svg-themed";
100
101
 
101
102
  export default function Illustration() {
102
103
  return (
103
104
  <SvgThemed width={100} height={100} viewBox="0 0 100 100">
104
105
  <rect width={100} height={100} rx={12} fill="$colors_control_faint_bg" />
105
106
  <circle cx={50} cy={40} r={20} fill="$colors_core_text_brand" />
106
- <rect x={30} y={65} width={40} height={20} rx={4} fill="$colors_core_text_secondary" />
107
+ <rect
108
+ x={30}
109
+ y={65}
110
+ width={40}
111
+ height={20}
112
+ rx={4}
113
+ fill="$colors_core_text_secondary"
114
+ />
107
115
  </SvgThemed>
108
116
  );
109
117
  }
@@ -112,8 +120,8 @@ export default function Illustration() {
112
120
  ### Gradient with token stops
113
121
 
114
122
  ```tsx
115
- import * as React from 'react';
116
- import { SvgThemed } from '@xsolla/xui-svg-themed';
123
+ import * as React from "react";
124
+ import { SvgThemed } from "@xsolla/xui-svg-themed";
117
125
 
118
126
  export default function GradientBadge() {
119
127
  return (
package/native/index.d.mts CHANGED
@@ -7,6 +7,8 @@ interface SvgThemedProps extends SVGProps<SVGSVGElement>, ThemeOverrideProps {
7
7
  * Optional test ID for testing
8
8
  */
9
9
  "data-testid"?: string;
10
+ /** Test ID for testing frameworks */
11
+ testID?: string;
10
12
  }
11
13
 
12
14
  declare const SvgThemed: React.ForwardRefExoticComponent<Omit<SvgThemedProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
package/native/index.d.ts CHANGED
@@ -7,6 +7,8 @@ interface SvgThemedProps extends SVGProps<SVGSVGElement>, ThemeOverrideProps {
7
7
  * Optional test ID for testing
8
8
  */
9
9
  "data-testid"?: string;
10
+ /** Test ID for testing frameworks */
11
+ testID?: string;
10
12
  }
11
13
 
12
14
  declare const SvgThemed: React.ForwardRefExoticComponent<Omit<SvgThemedProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
package/native/index.js CHANGED
@@ -63,10 +63,17 @@ var processChildren = (children, theme) => {
63
63
  });
64
64
  };
65
65
  var SvgThemed = (0, import_react.forwardRef)(
66
- ({ children, themeMode, themeProductContext, ...props }, ref) => {
66
+ ({
67
+ children,
68
+ themeMode,
69
+ themeProductContext,
70
+ testID,
71
+ "data-testid": dataTestId,
72
+ ...props
73
+ }, ref) => {
67
74
  const { theme } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
68
75
  const themedChildren = processChildren(children, theme);
69
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { ref, ...props, children: themedChildren });
76
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { ref, "data-testid": dataTestId || testID, ...props, children: themedChildren });
70
77
  }
71
78
  );
72
79
  SvgThemed.displayName = "SvgThemed";
package/native/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/index.tsx","../../src/SvgThemed.tsx"],"sourcesContent":["export * from \"./SvgThemed\";\nexport * from \"./types\";\n","import React, {\n Children,\n cloneElement,\n forwardRef,\n isValidElement,\n} from \"react\";\nimport { useResolvedTheme } from \"@xsolla/xui-core\";\nimport type { SvgThemedProps } from \"./types\";\n\nconst resolveToken = (value: any, theme: any) => {\n if (typeof value === \"string\" && value.startsWith(\"$\")) {\n const token = value.slice(1);\n\n // Mapping for common tokens used in display packages\n const tokenMap: Record<string, any> = {\n colors_core_text_primary: theme.colors.content.primary,\n colors_core_text_secondary: theme.colors.content.secondary,\n colors_core_text_tertiary: theme.colors.content.tertiary,\n colors_core_text_brand: theme.colors.content.brand.primary,\n colors_core_text_success: theme.colors.content.success.primary,\n colors_core_text_warning: theme.colors.content.warning.primary,\n colors_core_text_alert: theme.colors.content.alert.primary,\n colors_core_text_neutral: theme.colors.content.neutral.primary,\n colors_control_faint_bg: theme.colors.control.mono.secondary.bg,\n };\n\n return tokenMap[token] || value;\n }\n return value;\n};\n\nconst processChildren = (\n children: React.ReactNode,\n theme: any\n): React.ReactNode => {\n return Children.map(children, (child) => {\n if (!isValidElement(child)) return child;\n\n const props: any = { ...(child.props as any) };\n const themeableProps = [\"fill\", \"stroke\", \"stopColor\", \"color\"];\n\n themeableProps.forEach((prop) => {\n if (props[prop]) {\n props[prop] = resolveToken(props[prop], theme);\n }\n });\n\n if (props.children) {\n props.children = processChildren(props.children, theme);\n }\n\n return cloneElement(child, props);\n });\n};\n\nexport const SvgThemed = forwardRef<SVGSVGElement, SvgThemedProps>(\n ({ children, themeMode, themeProductContext, ...props }, ref) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const themedChildren = processChildren(children, theme);\n\n return (\n <svg ref={ref} {...props}>\n {themedChildren}\n </svg>\n );\n }\n);\n\nSvgThemed.displayName = \"SvgThemed\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAKO;AACP,sBAAiC;AAuD3B;AApDN,IAAM,eAAe,CAAC,OAAY,UAAe;AAC/C,MAAI,OAAO,UAAU,YAAY,MAAM,WAAW,GAAG,GAAG;AACtD,UAAM,QAAQ,MAAM,MAAM,CAAC;AAG3B,UAAM,WAAgC;AAAA,MACpC,0BAA0B,MAAM,OAAO,QAAQ;AAAA,MAC/C,4BAA4B,MAAM,OAAO,QAAQ;AAAA,MACjD,2BAA2B,MAAM,OAAO,QAAQ;AAAA,MAChD,wBAAwB,MAAM,OAAO,QAAQ,MAAM;AAAA,MACnD,0BAA0B,MAAM,OAAO,QAAQ,QAAQ;AAAA,MACvD,0BAA0B,MAAM,OAAO,QAAQ,QAAQ;AAAA,MACvD,wBAAwB,MAAM,OAAO,QAAQ,MAAM;AAAA,MACnD,0BAA0B,MAAM,OAAO,QAAQ,QAAQ;AAAA,MACvD,yBAAyB,MAAM,OAAO,QAAQ,KAAK,UAAU;AAAA,IAC/D;AAEA,WAAO,SAAS,KAAK,KAAK;AAAA,EAC5B;AACA,SAAO;AACT;AAEA,IAAM,kBAAkB,CACtB,UACA,UACoB;AACpB,SAAO,sBAAS,IAAI,UAAU,CAAC,UAAU;AACvC,QAAI,KAAC,6BAAe,KAAK,EAAG,QAAO;AAEnC,UAAM,QAAa,EAAE,GAAI,MAAM,MAAc;AAC7C,UAAM,iBAAiB,CAAC,QAAQ,UAAU,aAAa,OAAO;AAE9D,mBAAe,QAAQ,CAAC,SAAS;AAC/B,UAAI,MAAM,IAAI,GAAG;AACf,cAAM,IAAI,IAAI,aAAa,MAAM,IAAI,GAAG,KAAK;AAAA,MAC/C;AAAA,IACF,CAAC;AAED,QAAI,MAAM,UAAU;AAClB,YAAM,WAAW,gBAAgB,MAAM,UAAU,KAAK;AAAA,IACxD;AAEA,eAAO,2BAAa,OAAO,KAAK;AAAA,EAClC,CAAC;AACH;AAEO,IAAM,gBAAY;AAAA,EACvB,CAAC,EAAE,UAAU,WAAW,qBAAqB,GAAG,MAAM,GAAG,QAAQ;AAC/D,UAAM,EAAE,MAAM,QAAI,kCAAiB,EAAE,WAAW,oBAAoB,CAAC;AACrE,UAAM,iBAAiB,gBAAgB,UAAU,KAAK;AAEtD,WACE,4CAAC,SAAI,KAAW,GAAG,OAChB,0BACH;AAAA,EAEJ;AACF;AAEA,UAAU,cAAc;","names":[]}
1
+ {"version":3,"sources":["../../src/index.tsx","../../src/SvgThemed.tsx"],"sourcesContent":["export * from \"./SvgThemed\";\nexport * from \"./types\";\n","import React, {\n Children,\n cloneElement,\n forwardRef,\n isValidElement,\n} from \"react\";\nimport { useResolvedTheme } from \"@xsolla/xui-core\";\nimport type { SvgThemedProps } from \"./types\";\n\nconst resolveToken = (value: any, theme: any) => {\n if (typeof value === \"string\" && value.startsWith(\"$\")) {\n const token = value.slice(1);\n\n // Mapping for common tokens used in display packages\n const tokenMap: Record<string, any> = {\n colors_core_text_primary: theme.colors.content.primary,\n colors_core_text_secondary: theme.colors.content.secondary,\n colors_core_text_tertiary: theme.colors.content.tertiary,\n colors_core_text_brand: theme.colors.content.brand.primary,\n colors_core_text_success: theme.colors.content.success.primary,\n colors_core_text_warning: theme.colors.content.warning.primary,\n colors_core_text_alert: theme.colors.content.alert.primary,\n colors_core_text_neutral: theme.colors.content.neutral.primary,\n colors_control_faint_bg: theme.colors.control.mono.secondary.bg,\n };\n\n return tokenMap[token] || value;\n }\n return value;\n};\n\nconst processChildren = (\n children: React.ReactNode,\n theme: any\n): React.ReactNode => {\n return Children.map(children, (child) => {\n if (!isValidElement(child)) return child;\n\n const props: any = { ...(child.props as any) };\n const themeableProps = [\"fill\", \"stroke\", \"stopColor\", \"color\"];\n\n themeableProps.forEach((prop) => {\n if (props[prop]) {\n props[prop] = resolveToken(props[prop], theme);\n }\n });\n\n if (props.children) {\n props.children = processChildren(props.children, theme);\n }\n\n return cloneElement(child, props);\n });\n};\n\nexport const SvgThemed = forwardRef<SVGSVGElement, SvgThemedProps>(\n (\n {\n children,\n themeMode,\n themeProductContext,\n testID,\n \"data-testid\": dataTestId,\n ...props\n },\n ref\n ) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const themedChildren = processChildren(children, theme);\n\n return (\n <svg ref={ref} data-testid={dataTestId || testID} {...props}>\n {themedChildren}\n </svg>\n );\n }\n);\n\nSvgThemed.displayName = \"SvgThemed\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAKO;AACP,sBAAiC;AAiE3B;AA9DN,IAAM,eAAe,CAAC,OAAY,UAAe;AAC/C,MAAI,OAAO,UAAU,YAAY,MAAM,WAAW,GAAG,GAAG;AACtD,UAAM,QAAQ,MAAM,MAAM,CAAC;AAG3B,UAAM,WAAgC;AAAA,MACpC,0BAA0B,MAAM,OAAO,QAAQ;AAAA,MAC/C,4BAA4B,MAAM,OAAO,QAAQ;AAAA,MACjD,2BAA2B,MAAM,OAAO,QAAQ;AAAA,MAChD,wBAAwB,MAAM,OAAO,QAAQ,MAAM;AAAA,MACnD,0BAA0B,MAAM,OAAO,QAAQ,QAAQ;AAAA,MACvD,0BAA0B,MAAM,OAAO,QAAQ,QAAQ;AAAA,MACvD,wBAAwB,MAAM,OAAO,QAAQ,MAAM;AAAA,MACnD,0BAA0B,MAAM,OAAO,QAAQ,QAAQ;AAAA,MACvD,yBAAyB,MAAM,OAAO,QAAQ,KAAK,UAAU;AAAA,IAC/D;AAEA,WAAO,SAAS,KAAK,KAAK;AAAA,EAC5B;AACA,SAAO;AACT;AAEA,IAAM,kBAAkB,CACtB,UACA,UACoB;AACpB,SAAO,sBAAS,IAAI,UAAU,CAAC,UAAU;AACvC,QAAI,KAAC,6BAAe,KAAK,EAAG,QAAO;AAEnC,UAAM,QAAa,EAAE,GAAI,MAAM,MAAc;AAC7C,UAAM,iBAAiB,CAAC,QAAQ,UAAU,aAAa,OAAO;AAE9D,mBAAe,QAAQ,CAAC,SAAS;AAC/B,UAAI,MAAM,IAAI,GAAG;AACf,cAAM,IAAI,IAAI,aAAa,MAAM,IAAI,GAAG,KAAK;AAAA,MAC/C;AAAA,IACF,CAAC;AAED,QAAI,MAAM,UAAU;AAClB,YAAM,WAAW,gBAAgB,MAAM,UAAU,KAAK;AAAA,IACxD;AAEA,eAAO,2BAAa,OAAO,KAAK;AAAA,EAClC,CAAC;AACH;AAEO,IAAM,gBAAY;AAAA,EACvB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,EAAE,MAAM,QAAI,kCAAiB,EAAE,WAAW,oBAAoB,CAAC;AACrE,UAAM,iBAAiB,gBAAgB,UAAU,KAAK;AAEtD,WACE,4CAAC,SAAI,KAAU,eAAa,cAAc,QAAS,GAAG,OACnD,0BACH;AAAA,EAEJ;AACF;AAEA,UAAU,cAAc;","names":[]}
package/native/index.mjs CHANGED
@@ -42,10 +42,17 @@ var processChildren = (children, theme) => {
42
42
  });
43
43
  };
44
44
  var SvgThemed = forwardRef(
45
- ({ children, themeMode, themeProductContext, ...props }, ref) => {
45
+ ({
46
+ children,
47
+ themeMode,
48
+ themeProductContext,
49
+ testID,
50
+ "data-testid": dataTestId,
51
+ ...props
52
+ }, ref) => {
46
53
  const { theme } = useResolvedTheme({ themeMode, themeProductContext });
47
54
  const themedChildren = processChildren(children, theme);
48
- return /* @__PURE__ */ jsx("svg", { ref, ...props, children: themedChildren });
55
+ return /* @__PURE__ */ jsx("svg", { ref, "data-testid": dataTestId || testID, ...props, children: themedChildren });
49
56
  }
50
57
  );
51
58
  SvgThemed.displayName = "SvgThemed";
package/native/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/SvgThemed.tsx"],"sourcesContent":["import React, {\n Children,\n cloneElement,\n forwardRef,\n isValidElement,\n} from \"react\";\nimport { useResolvedTheme } from \"@xsolla/xui-core\";\nimport type { SvgThemedProps } from \"./types\";\n\nconst resolveToken = (value: any, theme: any) => {\n if (typeof value === \"string\" && value.startsWith(\"$\")) {\n const token = value.slice(1);\n\n // Mapping for common tokens used in display packages\n const tokenMap: Record<string, any> = {\n colors_core_text_primary: theme.colors.content.primary,\n colors_core_text_secondary: theme.colors.content.secondary,\n colors_core_text_tertiary: theme.colors.content.tertiary,\n colors_core_text_brand: theme.colors.content.brand.primary,\n colors_core_text_success: theme.colors.content.success.primary,\n colors_core_text_warning: theme.colors.content.warning.primary,\n colors_core_text_alert: theme.colors.content.alert.primary,\n colors_core_text_neutral: theme.colors.content.neutral.primary,\n colors_control_faint_bg: theme.colors.control.mono.secondary.bg,\n };\n\n return tokenMap[token] || value;\n }\n return value;\n};\n\nconst processChildren = (\n children: React.ReactNode,\n theme: any\n): React.ReactNode => {\n return Children.map(children, (child) => {\n if (!isValidElement(child)) return child;\n\n const props: any = { ...(child.props as any) };\n const themeableProps = [\"fill\", \"stroke\", \"stopColor\", \"color\"];\n\n themeableProps.forEach((prop) => {\n if (props[prop]) {\n props[prop] = resolveToken(props[prop], theme);\n }\n });\n\n if (props.children) {\n props.children = processChildren(props.children, theme);\n }\n\n return cloneElement(child, props);\n });\n};\n\nexport const SvgThemed = forwardRef<SVGSVGElement, SvgThemedProps>(\n ({ children, themeMode, themeProductContext, ...props }, ref) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const themedChildren = processChildren(children, theme);\n\n return (\n <svg ref={ref} {...props}>\n {themedChildren}\n </svg>\n );\n }\n);\n\nSvgThemed.displayName = \"SvgThemed\";\n"],"mappings":";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,wBAAwB;AAuD3B;AApDN,IAAM,eAAe,CAAC,OAAY,UAAe;AAC/C,MAAI,OAAO,UAAU,YAAY,MAAM,WAAW,GAAG,GAAG;AACtD,UAAM,QAAQ,MAAM,MAAM,CAAC;AAG3B,UAAM,WAAgC;AAAA,MACpC,0BAA0B,MAAM,OAAO,QAAQ;AAAA,MAC/C,4BAA4B,MAAM,OAAO,QAAQ;AAAA,MACjD,2BAA2B,MAAM,OAAO,QAAQ;AAAA,MAChD,wBAAwB,MAAM,OAAO,QAAQ,MAAM;AAAA,MACnD,0BAA0B,MAAM,OAAO,QAAQ,QAAQ;AAAA,MACvD,0BAA0B,MAAM,OAAO,QAAQ,QAAQ;AAAA,MACvD,wBAAwB,MAAM,OAAO,QAAQ,MAAM;AAAA,MACnD,0BAA0B,MAAM,OAAO,QAAQ,QAAQ;AAAA,MACvD,yBAAyB,MAAM,OAAO,QAAQ,KAAK,UAAU;AAAA,IAC/D;AAEA,WAAO,SAAS,KAAK,KAAK;AAAA,EAC5B;AACA,SAAO;AACT;AAEA,IAAM,kBAAkB,CACtB,UACA,UACoB;AACpB,SAAO,SAAS,IAAI,UAAU,CAAC,UAAU;AACvC,QAAI,CAAC,eAAe,KAAK,EAAG,QAAO;AAEnC,UAAM,QAAa,EAAE,GAAI,MAAM,MAAc;AAC7C,UAAM,iBAAiB,CAAC,QAAQ,UAAU,aAAa,OAAO;AAE9D,mBAAe,QAAQ,CAAC,SAAS;AAC/B,UAAI,MAAM,IAAI,GAAG;AACf,cAAM,IAAI,IAAI,aAAa,MAAM,IAAI,GAAG,KAAK;AAAA,MAC/C;AAAA,IACF,CAAC;AAED,QAAI,MAAM,UAAU;AAClB,YAAM,WAAW,gBAAgB,MAAM,UAAU,KAAK;AAAA,IACxD;AAEA,WAAO,aAAa,OAAO,KAAK;AAAA,EAClC,CAAC;AACH;AAEO,IAAM,YAAY;AAAA,EACvB,CAAC,EAAE,UAAU,WAAW,qBAAqB,GAAG,MAAM,GAAG,QAAQ;AAC/D,UAAM,EAAE,MAAM,IAAI,iBAAiB,EAAE,WAAW,oBAAoB,CAAC;AACrE,UAAM,iBAAiB,gBAAgB,UAAU,KAAK;AAEtD,WACE,oBAAC,SAAI,KAAW,GAAG,OAChB,0BACH;AAAA,EAEJ;AACF;AAEA,UAAU,cAAc;","names":[]}
1
+ {"version":3,"sources":["../../src/SvgThemed.tsx"],"sourcesContent":["import React, {\n Children,\n cloneElement,\n forwardRef,\n isValidElement,\n} from \"react\";\nimport { useResolvedTheme } from \"@xsolla/xui-core\";\nimport type { SvgThemedProps } from \"./types\";\n\nconst resolveToken = (value: any, theme: any) => {\n if (typeof value === \"string\" && value.startsWith(\"$\")) {\n const token = value.slice(1);\n\n // Mapping for common tokens used in display packages\n const tokenMap: Record<string, any> = {\n colors_core_text_primary: theme.colors.content.primary,\n colors_core_text_secondary: theme.colors.content.secondary,\n colors_core_text_tertiary: theme.colors.content.tertiary,\n colors_core_text_brand: theme.colors.content.brand.primary,\n colors_core_text_success: theme.colors.content.success.primary,\n colors_core_text_warning: theme.colors.content.warning.primary,\n colors_core_text_alert: theme.colors.content.alert.primary,\n colors_core_text_neutral: theme.colors.content.neutral.primary,\n colors_control_faint_bg: theme.colors.control.mono.secondary.bg,\n };\n\n return tokenMap[token] || value;\n }\n return value;\n};\n\nconst processChildren = (\n children: React.ReactNode,\n theme: any\n): React.ReactNode => {\n return Children.map(children, (child) => {\n if (!isValidElement(child)) return child;\n\n const props: any = { ...(child.props as any) };\n const themeableProps = [\"fill\", \"stroke\", \"stopColor\", \"color\"];\n\n themeableProps.forEach((prop) => {\n if (props[prop]) {\n props[prop] = resolveToken(props[prop], theme);\n }\n });\n\n if (props.children) {\n props.children = processChildren(props.children, theme);\n }\n\n return cloneElement(child, props);\n });\n};\n\nexport const SvgThemed = forwardRef<SVGSVGElement, SvgThemedProps>(\n (\n {\n children,\n themeMode,\n themeProductContext,\n testID,\n \"data-testid\": dataTestId,\n ...props\n },\n ref\n ) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const themedChildren = processChildren(children, theme);\n\n return (\n <svg ref={ref} data-testid={dataTestId || testID} {...props}>\n {themedChildren}\n </svg>\n );\n }\n);\n\nSvgThemed.displayName = \"SvgThemed\";\n"],"mappings":";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,wBAAwB;AAiE3B;AA9DN,IAAM,eAAe,CAAC,OAAY,UAAe;AAC/C,MAAI,OAAO,UAAU,YAAY,MAAM,WAAW,GAAG,GAAG;AACtD,UAAM,QAAQ,MAAM,MAAM,CAAC;AAG3B,UAAM,WAAgC;AAAA,MACpC,0BAA0B,MAAM,OAAO,QAAQ;AAAA,MAC/C,4BAA4B,MAAM,OAAO,QAAQ;AAAA,MACjD,2BAA2B,MAAM,OAAO,QAAQ;AAAA,MAChD,wBAAwB,MAAM,OAAO,QAAQ,MAAM;AAAA,MACnD,0BAA0B,MAAM,OAAO,QAAQ,QAAQ;AAAA,MACvD,0BAA0B,MAAM,OAAO,QAAQ,QAAQ;AAAA,MACvD,wBAAwB,MAAM,OAAO,QAAQ,MAAM;AAAA,MACnD,0BAA0B,MAAM,OAAO,QAAQ,QAAQ;AAAA,MACvD,yBAAyB,MAAM,OAAO,QAAQ,KAAK,UAAU;AAAA,IAC/D;AAEA,WAAO,SAAS,KAAK,KAAK;AAAA,EAC5B;AACA,SAAO;AACT;AAEA,IAAM,kBAAkB,CACtB,UACA,UACoB;AACpB,SAAO,SAAS,IAAI,UAAU,CAAC,UAAU;AACvC,QAAI,CAAC,eAAe,KAAK,EAAG,QAAO;AAEnC,UAAM,QAAa,EAAE,GAAI,MAAM,MAAc;AAC7C,UAAM,iBAAiB,CAAC,QAAQ,UAAU,aAAa,OAAO;AAE9D,mBAAe,QAAQ,CAAC,SAAS;AAC/B,UAAI,MAAM,IAAI,GAAG;AACf,cAAM,IAAI,IAAI,aAAa,MAAM,IAAI,GAAG,KAAK;AAAA,MAC/C;AAAA,IACF,CAAC;AAED,QAAI,MAAM,UAAU;AAClB,YAAM,WAAW,gBAAgB,MAAM,UAAU,KAAK;AAAA,IACxD;AAEA,WAAO,aAAa,OAAO,KAAK;AAAA,EAClC,CAAC;AACH;AAEO,IAAM,YAAY;AAAA,EACvB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,EAAE,MAAM,IAAI,iBAAiB,EAAE,WAAW,oBAAoB,CAAC;AACrE,UAAM,iBAAiB,gBAAgB,UAAU,KAAK;AAEtD,WACE,oBAAC,SAAI,KAAU,eAAa,cAAc,QAAS,GAAG,OACnD,0BACH;AAAA,EAEJ;AACF;AAEA,UAAU,cAAc;","names":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xsolla/xui-svg-themed",
3
- "version": "0.158.0",
3
+ "version": "0.160.0",
4
4
  "main": "./web/index.js",
5
5
  "module": "./web/index.mjs",
6
6
  "types": "./web/index.d.ts",
@@ -10,8 +10,8 @@
10
10
  "build:native": "PLATFORM=native tsup"
11
11
  },
12
12
  "dependencies": {
13
- "@xsolla/xui-core": "0.158.0",
14
- "@xsolla/xui-primitives-core": "0.158.0"
13
+ "@xsolla/xui-core": "0.160.0",
14
+ "@xsolla/xui-primitives-core": "0.160.0"
15
15
  },
16
16
  "peerDependencies": {
17
17
  "react": ">=16.8.0",
package/web/index.d.mts CHANGED
@@ -7,6 +7,8 @@ interface SvgThemedProps extends SVGProps<SVGSVGElement>, ThemeOverrideProps {
7
7
  * Optional test ID for testing
8
8
  */
9
9
  "data-testid"?: string;
10
+ /** Test ID for testing frameworks */
11
+ testID?: string;
10
12
  }
11
13
 
12
14
  declare const SvgThemed: React.ForwardRefExoticComponent<Omit<SvgThemedProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
package/web/index.d.ts CHANGED
@@ -7,6 +7,8 @@ interface SvgThemedProps extends SVGProps<SVGSVGElement>, ThemeOverrideProps {
7
7
  * Optional test ID for testing
8
8
  */
9
9
  "data-testid"?: string;
10
+ /** Test ID for testing frameworks */
11
+ testID?: string;
10
12
  }
11
13
 
12
14
  declare const SvgThemed: React.ForwardRefExoticComponent<Omit<SvgThemedProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
package/web/index.js CHANGED
@@ -63,10 +63,17 @@ var processChildren = (children, theme) => {
63
63
  });
64
64
  };
65
65
  var SvgThemed = (0, import_react.forwardRef)(
66
- ({ children, themeMode, themeProductContext, ...props }, ref) => {
66
+ ({
67
+ children,
68
+ themeMode,
69
+ themeProductContext,
70
+ testID,
71
+ "data-testid": dataTestId,
72
+ ...props
73
+ }, ref) => {
67
74
  const { theme } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
68
75
  const themedChildren = processChildren(children, theme);
69
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { ref, ...props, children: themedChildren });
76
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { ref, "data-testid": dataTestId || testID, ...props, children: themedChildren });
70
77
  }
71
78
  );
72
79
  SvgThemed.displayName = "SvgThemed";
package/web/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/index.tsx","../../src/SvgThemed.tsx"],"sourcesContent":["export * from \"./SvgThemed\";\nexport * from \"./types\";\n","import React, {\n Children,\n cloneElement,\n forwardRef,\n isValidElement,\n} from \"react\";\nimport { useResolvedTheme } from \"@xsolla/xui-core\";\nimport type { SvgThemedProps } from \"./types\";\n\nconst resolveToken = (value: any, theme: any) => {\n if (typeof value === \"string\" && value.startsWith(\"$\")) {\n const token = value.slice(1);\n\n // Mapping for common tokens used in display packages\n const tokenMap: Record<string, any> = {\n colors_core_text_primary: theme.colors.content.primary,\n colors_core_text_secondary: theme.colors.content.secondary,\n colors_core_text_tertiary: theme.colors.content.tertiary,\n colors_core_text_brand: theme.colors.content.brand.primary,\n colors_core_text_success: theme.colors.content.success.primary,\n colors_core_text_warning: theme.colors.content.warning.primary,\n colors_core_text_alert: theme.colors.content.alert.primary,\n colors_core_text_neutral: theme.colors.content.neutral.primary,\n colors_control_faint_bg: theme.colors.control.mono.secondary.bg,\n };\n\n return tokenMap[token] || value;\n }\n return value;\n};\n\nconst processChildren = (\n children: React.ReactNode,\n theme: any\n): React.ReactNode => {\n return Children.map(children, (child) => {\n if (!isValidElement(child)) return child;\n\n const props: any = { ...(child.props as any) };\n const themeableProps = [\"fill\", \"stroke\", \"stopColor\", \"color\"];\n\n themeableProps.forEach((prop) => {\n if (props[prop]) {\n props[prop] = resolveToken(props[prop], theme);\n }\n });\n\n if (props.children) {\n props.children = processChildren(props.children, theme);\n }\n\n return cloneElement(child, props);\n });\n};\n\nexport const SvgThemed = forwardRef<SVGSVGElement, SvgThemedProps>(\n ({ children, themeMode, themeProductContext, ...props }, ref) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const themedChildren = processChildren(children, theme);\n\n return (\n <svg ref={ref} {...props}>\n {themedChildren}\n </svg>\n );\n }\n);\n\nSvgThemed.displayName = \"SvgThemed\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAKO;AACP,sBAAiC;AAuD3B;AApDN,IAAM,eAAe,CAAC,OAAY,UAAe;AAC/C,MAAI,OAAO,UAAU,YAAY,MAAM,WAAW,GAAG,GAAG;AACtD,UAAM,QAAQ,MAAM,MAAM,CAAC;AAG3B,UAAM,WAAgC;AAAA,MACpC,0BAA0B,MAAM,OAAO,QAAQ;AAAA,MAC/C,4BAA4B,MAAM,OAAO,QAAQ;AAAA,MACjD,2BAA2B,MAAM,OAAO,QAAQ;AAAA,MAChD,wBAAwB,MAAM,OAAO,QAAQ,MAAM;AAAA,MACnD,0BAA0B,MAAM,OAAO,QAAQ,QAAQ;AAAA,MACvD,0BAA0B,MAAM,OAAO,QAAQ,QAAQ;AAAA,MACvD,wBAAwB,MAAM,OAAO,QAAQ,MAAM;AAAA,MACnD,0BAA0B,MAAM,OAAO,QAAQ,QAAQ;AAAA,MACvD,yBAAyB,MAAM,OAAO,QAAQ,KAAK,UAAU;AAAA,IAC/D;AAEA,WAAO,SAAS,KAAK,KAAK;AAAA,EAC5B;AACA,SAAO;AACT;AAEA,IAAM,kBAAkB,CACtB,UACA,UACoB;AACpB,SAAO,sBAAS,IAAI,UAAU,CAAC,UAAU;AACvC,QAAI,KAAC,6BAAe,KAAK,EAAG,QAAO;AAEnC,UAAM,QAAa,EAAE,GAAI,MAAM,MAAc;AAC7C,UAAM,iBAAiB,CAAC,QAAQ,UAAU,aAAa,OAAO;AAE9D,mBAAe,QAAQ,CAAC,SAAS;AAC/B,UAAI,MAAM,IAAI,GAAG;AACf,cAAM,IAAI,IAAI,aAAa,MAAM,IAAI,GAAG,KAAK;AAAA,MAC/C;AAAA,IACF,CAAC;AAED,QAAI,MAAM,UAAU;AAClB,YAAM,WAAW,gBAAgB,MAAM,UAAU,KAAK;AAAA,IACxD;AAEA,eAAO,2BAAa,OAAO,KAAK;AAAA,EAClC,CAAC;AACH;AAEO,IAAM,gBAAY;AAAA,EACvB,CAAC,EAAE,UAAU,WAAW,qBAAqB,GAAG,MAAM,GAAG,QAAQ;AAC/D,UAAM,EAAE,MAAM,QAAI,kCAAiB,EAAE,WAAW,oBAAoB,CAAC;AACrE,UAAM,iBAAiB,gBAAgB,UAAU,KAAK;AAEtD,WACE,4CAAC,SAAI,KAAW,GAAG,OAChB,0BACH;AAAA,EAEJ;AACF;AAEA,UAAU,cAAc;","names":[]}
1
+ {"version":3,"sources":["../../src/index.tsx","../../src/SvgThemed.tsx"],"sourcesContent":["export * from \"./SvgThemed\";\nexport * from \"./types\";\n","import React, {\n Children,\n cloneElement,\n forwardRef,\n isValidElement,\n} from \"react\";\nimport { useResolvedTheme } from \"@xsolla/xui-core\";\nimport type { SvgThemedProps } from \"./types\";\n\nconst resolveToken = (value: any, theme: any) => {\n if (typeof value === \"string\" && value.startsWith(\"$\")) {\n const token = value.slice(1);\n\n // Mapping for common tokens used in display packages\n const tokenMap: Record<string, any> = {\n colors_core_text_primary: theme.colors.content.primary,\n colors_core_text_secondary: theme.colors.content.secondary,\n colors_core_text_tertiary: theme.colors.content.tertiary,\n colors_core_text_brand: theme.colors.content.brand.primary,\n colors_core_text_success: theme.colors.content.success.primary,\n colors_core_text_warning: theme.colors.content.warning.primary,\n colors_core_text_alert: theme.colors.content.alert.primary,\n colors_core_text_neutral: theme.colors.content.neutral.primary,\n colors_control_faint_bg: theme.colors.control.mono.secondary.bg,\n };\n\n return tokenMap[token] || value;\n }\n return value;\n};\n\nconst processChildren = (\n children: React.ReactNode,\n theme: any\n): React.ReactNode => {\n return Children.map(children, (child) => {\n if (!isValidElement(child)) return child;\n\n const props: any = { ...(child.props as any) };\n const themeableProps = [\"fill\", \"stroke\", \"stopColor\", \"color\"];\n\n themeableProps.forEach((prop) => {\n if (props[prop]) {\n props[prop] = resolveToken(props[prop], theme);\n }\n });\n\n if (props.children) {\n props.children = processChildren(props.children, theme);\n }\n\n return cloneElement(child, props);\n });\n};\n\nexport const SvgThemed = forwardRef<SVGSVGElement, SvgThemedProps>(\n (\n {\n children,\n themeMode,\n themeProductContext,\n testID,\n \"data-testid\": dataTestId,\n ...props\n },\n ref\n ) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const themedChildren = processChildren(children, theme);\n\n return (\n <svg ref={ref} data-testid={dataTestId || testID} {...props}>\n {themedChildren}\n </svg>\n );\n }\n);\n\nSvgThemed.displayName = \"SvgThemed\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAKO;AACP,sBAAiC;AAiE3B;AA9DN,IAAM,eAAe,CAAC,OAAY,UAAe;AAC/C,MAAI,OAAO,UAAU,YAAY,MAAM,WAAW,GAAG,GAAG;AACtD,UAAM,QAAQ,MAAM,MAAM,CAAC;AAG3B,UAAM,WAAgC;AAAA,MACpC,0BAA0B,MAAM,OAAO,QAAQ;AAAA,MAC/C,4BAA4B,MAAM,OAAO,QAAQ;AAAA,MACjD,2BAA2B,MAAM,OAAO,QAAQ;AAAA,MAChD,wBAAwB,MAAM,OAAO,QAAQ,MAAM;AAAA,MACnD,0BAA0B,MAAM,OAAO,QAAQ,QAAQ;AAAA,MACvD,0BAA0B,MAAM,OAAO,QAAQ,QAAQ;AAAA,MACvD,wBAAwB,MAAM,OAAO,QAAQ,MAAM;AAAA,MACnD,0BAA0B,MAAM,OAAO,QAAQ,QAAQ;AAAA,MACvD,yBAAyB,MAAM,OAAO,QAAQ,KAAK,UAAU;AAAA,IAC/D;AAEA,WAAO,SAAS,KAAK,KAAK;AAAA,EAC5B;AACA,SAAO;AACT;AAEA,IAAM,kBAAkB,CACtB,UACA,UACoB;AACpB,SAAO,sBAAS,IAAI,UAAU,CAAC,UAAU;AACvC,QAAI,KAAC,6BAAe,KAAK,EAAG,QAAO;AAEnC,UAAM,QAAa,EAAE,GAAI,MAAM,MAAc;AAC7C,UAAM,iBAAiB,CAAC,QAAQ,UAAU,aAAa,OAAO;AAE9D,mBAAe,QAAQ,CAAC,SAAS;AAC/B,UAAI,MAAM,IAAI,GAAG;AACf,cAAM,IAAI,IAAI,aAAa,MAAM,IAAI,GAAG,KAAK;AAAA,MAC/C;AAAA,IACF,CAAC;AAED,QAAI,MAAM,UAAU;AAClB,YAAM,WAAW,gBAAgB,MAAM,UAAU,KAAK;AAAA,IACxD;AAEA,eAAO,2BAAa,OAAO,KAAK;AAAA,EAClC,CAAC;AACH;AAEO,IAAM,gBAAY;AAAA,EACvB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,EAAE,MAAM,QAAI,kCAAiB,EAAE,WAAW,oBAAoB,CAAC;AACrE,UAAM,iBAAiB,gBAAgB,UAAU,KAAK;AAEtD,WACE,4CAAC,SAAI,KAAU,eAAa,cAAc,QAAS,GAAG,OACnD,0BACH;AAAA,EAEJ;AACF;AAEA,UAAU,cAAc;","names":[]}
package/web/index.mjs CHANGED
@@ -42,10 +42,17 @@ var processChildren = (children, theme) => {
42
42
  });
43
43
  };
44
44
  var SvgThemed = forwardRef(
45
- ({ children, themeMode, themeProductContext, ...props }, ref) => {
45
+ ({
46
+ children,
47
+ themeMode,
48
+ themeProductContext,
49
+ testID,
50
+ "data-testid": dataTestId,
51
+ ...props
52
+ }, ref) => {
46
53
  const { theme } = useResolvedTheme({ themeMode, themeProductContext });
47
54
  const themedChildren = processChildren(children, theme);
48
- return /* @__PURE__ */ jsx("svg", { ref, ...props, children: themedChildren });
55
+ return /* @__PURE__ */ jsx("svg", { ref, "data-testid": dataTestId || testID, ...props, children: themedChildren });
49
56
  }
50
57
  );
51
58
  SvgThemed.displayName = "SvgThemed";
package/web/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/SvgThemed.tsx"],"sourcesContent":["import React, {\n Children,\n cloneElement,\n forwardRef,\n isValidElement,\n} from \"react\";\nimport { useResolvedTheme } from \"@xsolla/xui-core\";\nimport type { SvgThemedProps } from \"./types\";\n\nconst resolveToken = (value: any, theme: any) => {\n if (typeof value === \"string\" && value.startsWith(\"$\")) {\n const token = value.slice(1);\n\n // Mapping for common tokens used in display packages\n const tokenMap: Record<string, any> = {\n colors_core_text_primary: theme.colors.content.primary,\n colors_core_text_secondary: theme.colors.content.secondary,\n colors_core_text_tertiary: theme.colors.content.tertiary,\n colors_core_text_brand: theme.colors.content.brand.primary,\n colors_core_text_success: theme.colors.content.success.primary,\n colors_core_text_warning: theme.colors.content.warning.primary,\n colors_core_text_alert: theme.colors.content.alert.primary,\n colors_core_text_neutral: theme.colors.content.neutral.primary,\n colors_control_faint_bg: theme.colors.control.mono.secondary.bg,\n };\n\n return tokenMap[token] || value;\n }\n return value;\n};\n\nconst processChildren = (\n children: React.ReactNode,\n theme: any\n): React.ReactNode => {\n return Children.map(children, (child) => {\n if (!isValidElement(child)) return child;\n\n const props: any = { ...(child.props as any) };\n const themeableProps = [\"fill\", \"stroke\", \"stopColor\", \"color\"];\n\n themeableProps.forEach((prop) => {\n if (props[prop]) {\n props[prop] = resolveToken(props[prop], theme);\n }\n });\n\n if (props.children) {\n props.children = processChildren(props.children, theme);\n }\n\n return cloneElement(child, props);\n });\n};\n\nexport const SvgThemed = forwardRef<SVGSVGElement, SvgThemedProps>(\n ({ children, themeMode, themeProductContext, ...props }, ref) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const themedChildren = processChildren(children, theme);\n\n return (\n <svg ref={ref} {...props}>\n {themedChildren}\n </svg>\n );\n }\n);\n\nSvgThemed.displayName = \"SvgThemed\";\n"],"mappings":";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,wBAAwB;AAuD3B;AApDN,IAAM,eAAe,CAAC,OAAY,UAAe;AAC/C,MAAI,OAAO,UAAU,YAAY,MAAM,WAAW,GAAG,GAAG;AACtD,UAAM,QAAQ,MAAM,MAAM,CAAC;AAG3B,UAAM,WAAgC;AAAA,MACpC,0BAA0B,MAAM,OAAO,QAAQ;AAAA,MAC/C,4BAA4B,MAAM,OAAO,QAAQ;AAAA,MACjD,2BAA2B,MAAM,OAAO,QAAQ;AAAA,MAChD,wBAAwB,MAAM,OAAO,QAAQ,MAAM;AAAA,MACnD,0BAA0B,MAAM,OAAO,QAAQ,QAAQ;AAAA,MACvD,0BAA0B,MAAM,OAAO,QAAQ,QAAQ;AAAA,MACvD,wBAAwB,MAAM,OAAO,QAAQ,MAAM;AAAA,MACnD,0BAA0B,MAAM,OAAO,QAAQ,QAAQ;AAAA,MACvD,yBAAyB,MAAM,OAAO,QAAQ,KAAK,UAAU;AAAA,IAC/D;AAEA,WAAO,SAAS,KAAK,KAAK;AAAA,EAC5B;AACA,SAAO;AACT;AAEA,IAAM,kBAAkB,CACtB,UACA,UACoB;AACpB,SAAO,SAAS,IAAI,UAAU,CAAC,UAAU;AACvC,QAAI,CAAC,eAAe,KAAK,EAAG,QAAO;AAEnC,UAAM,QAAa,EAAE,GAAI,MAAM,MAAc;AAC7C,UAAM,iBAAiB,CAAC,QAAQ,UAAU,aAAa,OAAO;AAE9D,mBAAe,QAAQ,CAAC,SAAS;AAC/B,UAAI,MAAM,IAAI,GAAG;AACf,cAAM,IAAI,IAAI,aAAa,MAAM,IAAI,GAAG,KAAK;AAAA,MAC/C;AAAA,IACF,CAAC;AAED,QAAI,MAAM,UAAU;AAClB,YAAM,WAAW,gBAAgB,MAAM,UAAU,KAAK;AAAA,IACxD;AAEA,WAAO,aAAa,OAAO,KAAK;AAAA,EAClC,CAAC;AACH;AAEO,IAAM,YAAY;AAAA,EACvB,CAAC,EAAE,UAAU,WAAW,qBAAqB,GAAG,MAAM,GAAG,QAAQ;AAC/D,UAAM,EAAE,MAAM,IAAI,iBAAiB,EAAE,WAAW,oBAAoB,CAAC;AACrE,UAAM,iBAAiB,gBAAgB,UAAU,KAAK;AAEtD,WACE,oBAAC,SAAI,KAAW,GAAG,OAChB,0BACH;AAAA,EAEJ;AACF;AAEA,UAAU,cAAc;","names":[]}
1
+ {"version":3,"sources":["../../src/SvgThemed.tsx"],"sourcesContent":["import React, {\n Children,\n cloneElement,\n forwardRef,\n isValidElement,\n} from \"react\";\nimport { useResolvedTheme } from \"@xsolla/xui-core\";\nimport type { SvgThemedProps } from \"./types\";\n\nconst resolveToken = (value: any, theme: any) => {\n if (typeof value === \"string\" && value.startsWith(\"$\")) {\n const token = value.slice(1);\n\n // Mapping for common tokens used in display packages\n const tokenMap: Record<string, any> = {\n colors_core_text_primary: theme.colors.content.primary,\n colors_core_text_secondary: theme.colors.content.secondary,\n colors_core_text_tertiary: theme.colors.content.tertiary,\n colors_core_text_brand: theme.colors.content.brand.primary,\n colors_core_text_success: theme.colors.content.success.primary,\n colors_core_text_warning: theme.colors.content.warning.primary,\n colors_core_text_alert: theme.colors.content.alert.primary,\n colors_core_text_neutral: theme.colors.content.neutral.primary,\n colors_control_faint_bg: theme.colors.control.mono.secondary.bg,\n };\n\n return tokenMap[token] || value;\n }\n return value;\n};\n\nconst processChildren = (\n children: React.ReactNode,\n theme: any\n): React.ReactNode => {\n return Children.map(children, (child) => {\n if (!isValidElement(child)) return child;\n\n const props: any = { ...(child.props as any) };\n const themeableProps = [\"fill\", \"stroke\", \"stopColor\", \"color\"];\n\n themeableProps.forEach((prop) => {\n if (props[prop]) {\n props[prop] = resolveToken(props[prop], theme);\n }\n });\n\n if (props.children) {\n props.children = processChildren(props.children, theme);\n }\n\n return cloneElement(child, props);\n });\n};\n\nexport const SvgThemed = forwardRef<SVGSVGElement, SvgThemedProps>(\n (\n {\n children,\n themeMode,\n themeProductContext,\n testID,\n \"data-testid\": dataTestId,\n ...props\n },\n ref\n ) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const themedChildren = processChildren(children, theme);\n\n return (\n <svg ref={ref} data-testid={dataTestId || testID} {...props}>\n {themedChildren}\n </svg>\n );\n }\n);\n\nSvgThemed.displayName = \"SvgThemed\";\n"],"mappings":";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,wBAAwB;AAiE3B;AA9DN,IAAM,eAAe,CAAC,OAAY,UAAe;AAC/C,MAAI,OAAO,UAAU,YAAY,MAAM,WAAW,GAAG,GAAG;AACtD,UAAM,QAAQ,MAAM,MAAM,CAAC;AAG3B,UAAM,WAAgC;AAAA,MACpC,0BAA0B,MAAM,OAAO,QAAQ;AAAA,MAC/C,4BAA4B,MAAM,OAAO,QAAQ;AAAA,MACjD,2BAA2B,MAAM,OAAO,QAAQ;AAAA,MAChD,wBAAwB,MAAM,OAAO,QAAQ,MAAM;AAAA,MACnD,0BAA0B,MAAM,OAAO,QAAQ,QAAQ;AAAA,MACvD,0BAA0B,MAAM,OAAO,QAAQ,QAAQ;AAAA,MACvD,wBAAwB,MAAM,OAAO,QAAQ,MAAM;AAAA,MACnD,0BAA0B,MAAM,OAAO,QAAQ,QAAQ;AAAA,MACvD,yBAAyB,MAAM,OAAO,QAAQ,KAAK,UAAU;AAAA,IAC/D;AAEA,WAAO,SAAS,KAAK,KAAK;AAAA,EAC5B;AACA,SAAO;AACT;AAEA,IAAM,kBAAkB,CACtB,UACA,UACoB;AACpB,SAAO,SAAS,IAAI,UAAU,CAAC,UAAU;AACvC,QAAI,CAAC,eAAe,KAAK,EAAG,QAAO;AAEnC,UAAM,QAAa,EAAE,GAAI,MAAM,MAAc;AAC7C,UAAM,iBAAiB,CAAC,QAAQ,UAAU,aAAa,OAAO;AAE9D,mBAAe,QAAQ,CAAC,SAAS;AAC/B,UAAI,MAAM,IAAI,GAAG;AACf,cAAM,IAAI,IAAI,aAAa,MAAM,IAAI,GAAG,KAAK;AAAA,MAC/C;AAAA,IACF,CAAC;AAED,QAAI,MAAM,UAAU;AAClB,YAAM,WAAW,gBAAgB,MAAM,UAAU,KAAK;AAAA,IACxD;AAEA,WAAO,aAAa,OAAO,KAAK;AAAA,EAClC,CAAC;AACH;AAEO,IAAM,YAAY;AAAA,EACvB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,EAAE,MAAM,IAAI,iBAAiB,EAAE,WAAW,oBAAoB,CAAC;AACrE,UAAM,iBAAiB,gBAAgB,UAAU,KAAK;AAEtD,WACE,oBAAC,SAAI,KAAU,eAAa,cAAc,QAAS,GAAG,OACnD,0BACH;AAAA,EAEJ;AACF;AAEA,UAAU,cAAc;","names":[]}