@xsolla/xui-svg-themed-web 0.64.0-pr56.1768348754

package/index.d.mts

@@ -0,0 +1,13 @@
+import React, { SVGProps, ReactNode } from 'react';
+
+interface SvgThemedProps extends SVGProps<SVGSVGElement> {
+    children?: ReactNode;
+    /**
+     * Optional test ID for testing
+     */
+    "data-testid"?: string;
+}
+
+declare const SvgThemed: React.ForwardRefExoticComponent<Omit<SvgThemedProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+
+export { SvgThemed, type SvgThemedProps };

package/index.d.ts

@@ -0,0 +1,13 @@
+import React, { SVGProps, ReactNode } from 'react';
+
+interface SvgThemedProps extends SVGProps<SVGSVGElement> {
+    children?: ReactNode;
+    /**
+     * Optional test ID for testing
+     */
+    "data-testid"?: string;
+}
+
+declare const SvgThemed: React.ForwardRefExoticComponent<Omit<SvgThemedProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+
+export { SvgThemed, type SvgThemedProps };

package/index.js

@@ -0,0 +1,77 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  SvgThemed: () => SvgThemed
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/SvgThemed.tsx
+var import_react = require("react");
+var import_xui_core = require("@xsolla/xui-core");
+var import_jsx_runtime = require("react/jsx-runtime");
+var resolveToken = (value, theme) => {
+  if (typeof value === "string" && value.startsWith("$")) {
+    const token = value.slice(1);
+    const tokenMap = {
+      colors_core_text_primary: theme.colors.content.primary,
+      colors_core_text_secondary: theme.colors.content.secondary,
+      colors_core_text_tertiary: theme.colors.content.tertiary,
+      colors_core_text_brand: theme.colors.content.brand.primary,
+      colors_core_text_success: theme.colors.content.success.primary,
+      colors_core_text_warning: theme.colors.content.warning.primary,
+      colors_core_text_alert: theme.colors.content.alert.primary,
+      colors_core_text_neutral: theme.colors.content.neutral.primary,
+      colors_control_faint_bg: theme.colors.control.mono.secondary.bg
+    };
+    return tokenMap[token] || value;
+  }
+  return value;
+};
+var processChildren = (children, theme) => {
+  return import_react.Children.map(children, (child) => {
+    if (!(0, import_react.isValidElement)(child)) return child;
+    const props = { ...child.props };
+    const themeableProps = ["fill", "stroke", "stopColor", "color"];
+    themeableProps.forEach((prop) => {
+      if (props[prop]) {
+        props[prop] = resolveToken(props[prop], theme);
+      }
+    });
+    if (props.children) {
+      props.children = processChildren(props.children, theme);
+    }
+    return (0, import_react.cloneElement)(child, props);
+  });
+};
+var SvgThemed = (0, import_react.forwardRef)(
+  ({ children, ...props }, ref) => {
+    const { theme } = (0, import_xui_core.useDesignSystem)();
+    const themedChildren = processChildren(children, theme);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { ref, ...props, children: themedChildren });
+  }
+);
+SvgThemed.displayName = "SvgThemed";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SvgThemed
+});
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +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 { useDesignSystem } 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, ...props }, ref) => {\n    const { theme } = useDesignSystem();\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,sBAAgC;AAuD1B;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,GAAG,MAAM,GAAG,QAAQ;AAC/B,UAAM,EAAE,MAAM,QAAI,iCAAgB;AAClC,UAAM,iBAAiB,gBAAgB,UAAU,KAAK;AAEtD,WACE,4CAAC,SAAI,KAAW,GAAG,OAChB,0BACH;AAAA,EAEJ;AACF;AAEA,UAAU,cAAc;","names":[]}

package/index.mjs

@@ -0,0 +1,55 @@
+// src/SvgThemed.tsx
+import {
+  Children,
+  cloneElement,
+  forwardRef,
+  isValidElement
+} from "react";
+import { useDesignSystem } from "@xsolla/xui-core";
+import { jsx } from "react/jsx-runtime";
+var resolveToken = (value, theme) => {
+  if (typeof value === "string" && value.startsWith("$")) {
+    const token = value.slice(1);
+    const tokenMap = {
+      colors_core_text_primary: theme.colors.content.primary,
+      colors_core_text_secondary: theme.colors.content.secondary,
+      colors_core_text_tertiary: theme.colors.content.tertiary,
+      colors_core_text_brand: theme.colors.content.brand.primary,
+      colors_core_text_success: theme.colors.content.success.primary,
+      colors_core_text_warning: theme.colors.content.warning.primary,
+      colors_core_text_alert: theme.colors.content.alert.primary,
+      colors_core_text_neutral: theme.colors.content.neutral.primary,
+      colors_control_faint_bg: theme.colors.control.mono.secondary.bg
+    };
+    return tokenMap[token] || value;
+  }
+  return value;
+};
+var processChildren = (children, theme) => {
+  return Children.map(children, (child) => {
+    if (!isValidElement(child)) return child;
+    const props = { ...child.props };
+    const themeableProps = ["fill", "stroke", "stopColor", "color"];
+    themeableProps.forEach((prop) => {
+      if (props[prop]) {
+        props[prop] = resolveToken(props[prop], theme);
+      }
+    });
+    if (props.children) {
+      props.children = processChildren(props.children, theme);
+    }
+    return cloneElement(child, props);
+  });
+};
+var SvgThemed = forwardRef(
+  ({ children, ...props }, ref) => {
+    const { theme } = useDesignSystem();
+    const themedChildren = processChildren(children, theme);
+    return /* @__PURE__ */ jsx("svg", { ref, ...props, children: themedChildren });
+  }
+);
+SvgThemed.displayName = "SvgThemed";
+export {
+  SvgThemed
+};
+//# sourceMappingURL=index.mjs.map

package/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/SvgThemed.tsx"],"sourcesContent":["import React, {\n  Children,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n} from \"react\";\nimport { useDesignSystem } 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, ...props }, ref) => {\n    const { theme } = useDesignSystem();\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,uBAAuB;AAuD1B;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,GAAG,MAAM,GAAG,QAAQ;AAC/B,UAAM,EAAE,MAAM,IAAI,gBAAgB;AAClC,UAAM,iBAAiB,gBAAgB,UAAU,KAAK;AAEtD,WACE,oBAAC,SAAI,KAAW,GAAG,OAChB,0BACH;AAAA,EAEJ;AACF;AAEA,UAAU,cAAc;","names":[]}

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@xsolla/xui-svg-themed-web",
+  "version": "0.64.0-pr56.1768348754",
+  "main": "./index.js",
+  "module": "./index.mjs",
+  "types": "./index.d.ts",
+  "scripts": {
+    "build": "yarn build:web && yarn build:native",
+    "build:web": "PLATFORM=web tsup src/index.tsx --format esm,cjs --dts --env.PLATFORM web --clean",
+    "build:native": "PLATFORM=native tsup src/index.tsx --format esm,cjs --dts --env.PLATFORM native --clean"
+  },
+  "dependencies": {
+    "@xsolla/xui-core": "0.64.0-pr56.1768348754",
+    "@xsolla/xui-primitives-core": "0.64.0-pr56.1768348754"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "styled-components": ">=4"
+  },
+  "devDependencies": {
+    "tsup": "^8.0.0"
+  },
+  "license": "MIT"
+}