@xsolla/xui-svg-themed 0.127.0 → 0.129.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/native/index.d.mts +2 -1
- package/native/index.d.ts +2 -1
- package/native/index.js +2 -2
- package/native/index.js.map +1 -1
- package/native/index.mjs +3 -3
- package/native/index.mjs.map +1 -1
- package/package.json +3 -3
- package/web/index.d.mts +2 -1
- package/web/index.d.ts +2 -1
- package/web/index.js +2 -2
- package/web/index.js.map +1 -1
- package/web/index.mjs +3 -3
- package/web/index.mjs.map +1 -1
package/native/index.d.mts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React, { SVGProps, ReactNode } from 'react';
|
|
2
|
+
import { ThemeOverrideProps } from '@xsolla/xui-core';
|
|
2
3
|
|
|
3
|
-
interface SvgThemedProps extends SVGProps<SVGSVGElement
|
|
4
|
+
interface SvgThemedProps extends SVGProps<SVGSVGElement>, ThemeOverrideProps {
|
|
4
5
|
children?: ReactNode;
|
|
5
6
|
/**
|
|
6
7
|
* Optional test ID for testing
|
package/native/index.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React, { SVGProps, ReactNode } from 'react';
|
|
2
|
+
import { ThemeOverrideProps } from '@xsolla/xui-core';
|
|
2
3
|
|
|
3
|
-
interface SvgThemedProps extends SVGProps<SVGSVGElement
|
|
4
|
+
interface SvgThemedProps extends SVGProps<SVGSVGElement>, ThemeOverrideProps {
|
|
4
5
|
children?: ReactNode;
|
|
5
6
|
/**
|
|
6
7
|
* Optional test ID for testing
|
package/native/index.js
CHANGED
|
@@ -63,8 +63,8 @@ var processChildren = (children, theme) => {
|
|
|
63
63
|
});
|
|
64
64
|
};
|
|
65
65
|
var SvgThemed = (0, import_react.forwardRef)(
|
|
66
|
-
({ children, ...props }, ref) => {
|
|
67
|
-
const { theme } = (0, import_xui_core.
|
|
66
|
+
({ children, themeMode, themeProductContext, ...props }, ref) => {
|
|
67
|
+
const { theme } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
|
|
68
68
|
const themedChildren = processChildren(children, theme);
|
|
69
69
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { ref, ...props, children: themedChildren });
|
|
70
70
|
}
|
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 {
|
|
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":[]}
|
package/native/index.mjs
CHANGED
|
@@ -5,7 +5,7 @@ import {
|
|
|
5
5
|
forwardRef,
|
|
6
6
|
isValidElement
|
|
7
7
|
} from "react";
|
|
8
|
-
import {
|
|
8
|
+
import { useResolvedTheme } from "@xsolla/xui-core";
|
|
9
9
|
import { jsx } from "react/jsx-runtime";
|
|
10
10
|
var resolveToken = (value, theme) => {
|
|
11
11
|
if (typeof value === "string" && value.startsWith("$")) {
|
|
@@ -42,8 +42,8 @@ var processChildren = (children, theme) => {
|
|
|
42
42
|
});
|
|
43
43
|
};
|
|
44
44
|
var SvgThemed = forwardRef(
|
|
45
|
-
({ children, ...props }, ref) => {
|
|
46
|
-
const { theme } =
|
|
45
|
+
({ children, themeMode, themeProductContext, ...props }, ref) => {
|
|
46
|
+
const { theme } = useResolvedTheme({ themeMode, themeProductContext });
|
|
47
47
|
const themedChildren = processChildren(children, theme);
|
|
48
48
|
return /* @__PURE__ */ jsx("svg", { ref, ...props, children: themedChildren });
|
|
49
49
|
}
|
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 {
|
|
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":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-svg-themed",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.129.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.
|
|
14
|
-
"@xsolla/xui-primitives-core": "0.
|
|
13
|
+
"@xsolla/xui-core": "0.129.0",
|
|
14
|
+
"@xsolla/xui-primitives-core": "0.129.0"
|
|
15
15
|
},
|
|
16
16
|
"peerDependencies": {
|
|
17
17
|
"react": ">=16.8.0",
|
package/web/index.d.mts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React, { SVGProps, ReactNode } from 'react';
|
|
2
|
+
import { ThemeOverrideProps } from '@xsolla/xui-core';
|
|
2
3
|
|
|
3
|
-
interface SvgThemedProps extends SVGProps<SVGSVGElement
|
|
4
|
+
interface SvgThemedProps extends SVGProps<SVGSVGElement>, ThemeOverrideProps {
|
|
4
5
|
children?: ReactNode;
|
|
5
6
|
/**
|
|
6
7
|
* Optional test ID for testing
|
package/web/index.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React, { SVGProps, ReactNode } from 'react';
|
|
2
|
+
import { ThemeOverrideProps } from '@xsolla/xui-core';
|
|
2
3
|
|
|
3
|
-
interface SvgThemedProps extends SVGProps<SVGSVGElement
|
|
4
|
+
interface SvgThemedProps extends SVGProps<SVGSVGElement>, ThemeOverrideProps {
|
|
4
5
|
children?: ReactNode;
|
|
5
6
|
/**
|
|
6
7
|
* Optional test ID for testing
|
package/web/index.js
CHANGED
|
@@ -63,8 +63,8 @@ var processChildren = (children, theme) => {
|
|
|
63
63
|
});
|
|
64
64
|
};
|
|
65
65
|
var SvgThemed = (0, import_react.forwardRef)(
|
|
66
|
-
({ children, ...props }, ref) => {
|
|
67
|
-
const { theme } = (0, import_xui_core.
|
|
66
|
+
({ children, themeMode, themeProductContext, ...props }, ref) => {
|
|
67
|
+
const { theme } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
|
|
68
68
|
const themedChildren = processChildren(children, theme);
|
|
69
69
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { ref, ...props, children: themedChildren });
|
|
70
70
|
}
|
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 {
|
|
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":[]}
|
package/web/index.mjs
CHANGED
|
@@ -5,7 +5,7 @@ import {
|
|
|
5
5
|
forwardRef,
|
|
6
6
|
isValidElement
|
|
7
7
|
} from "react";
|
|
8
|
-
import {
|
|
8
|
+
import { useResolvedTheme } from "@xsolla/xui-core";
|
|
9
9
|
import { jsx } from "react/jsx-runtime";
|
|
10
10
|
var resolveToken = (value, theme) => {
|
|
11
11
|
if (typeof value === "string" && value.startsWith("$")) {
|
|
@@ -42,8 +42,8 @@ var processChildren = (children, theme) => {
|
|
|
42
42
|
});
|
|
43
43
|
};
|
|
44
44
|
var SvgThemed = forwardRef(
|
|
45
|
-
({ children, ...props }, ref) => {
|
|
46
|
-
const { theme } =
|
|
45
|
+
({ children, themeMode, themeProductContext, ...props }, ref) => {
|
|
46
|
+
const { theme } = useResolvedTheme({ themeMode, themeProductContext });
|
|
47
47
|
const themedChildren = processChildren(children, theme);
|
|
48
48
|
return /* @__PURE__ */ jsx("svg", { ref, ...props, children: themedChildren });
|
|
49
49
|
}
|
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 {
|
|
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":[]}
|