@xsolla/xui-primitives-core 0.212.0 → 0.213.0

package/index.d.mts

@@ -170,10 +170,23 @@ interface SpinnerProps {
     "aria-describedby"?: string;
     testID?: string;
 }
+/**
+ * Size of an icon glyph — the single definition shared by every icon package.
+ *
+ * A `number` is pixels. A `string` is a raw CSS length, which is what lets an
+ * icon fill a box owned by its parent: `size="100%"` is the reason this type
+ * is not just `number`.
+ *
+ * Only numbers and percentage strings survive on React Native, which has no
+ * layout engine for `calc()` or font-relative units. Use `resolveIconSize`
+ * (web) and `resolveNativeIconSize` (native) rather than interpolating a
+ * `size` into styles by hand — see FEP-895.
+ */
+type IconSize = number | string;
 interface IconProps {
     name?: string;
     color?: string;
-    size?: number | string;
+    size?: IconSize;
     children?: React.ReactNode;
     testID?: string;
     /** Test ID for testing frameworks (web) */
@@ -259,4 +272,30 @@ interface LinearGradientProps {
     testID?: string;
 }
 
-export type { BoxProps, DividerProps, IconProps, InputPrimitiveProps, LinearGradientProps, SpinnerProps, TestIDProps, TextAreaPrimitiveProps, TextProps };
+/**
+ * An `IconSize` narrowed to what React Native's layout accepts. Assignable to
+ * both `DimensionValue` (`View` styles) and `NumberProp` (react-native-svg).
+ */
+type NativeIconSize = number | `${number}%`;
+/**
+ * Resolve an `IconSize` to a CSS length for the web renderers.
+ *
+ * Numbers become pixels; strings pass through untouched, so any valid CSS
+ * length (`"100%"`, `"1em"`, `"calc(100% - 2px)"`) reaches the stylesheet as
+ * authored. Interpolating `size` directly into a `px` template is the bug this
+ * exists to prevent — it turns `"100%"` into `100%px`, which the browser drops.
+ */
+declare function resolveIconSize(size: IconSize): string;
+/**
+ * Resolve an `IconSize` for the React Native renderers.
+ *
+ * Numbers (density-independent pixels) and percentage strings pass through.
+ * Anything else — `calc()`, `em`, `rem`, `vw` — has no meaning to React
+ * Native's layout, so it falls back to `fallback` and warns once instead of
+ * silently rendering at the wrong size.
+ */
+declare function resolveNativeIconSize(size: IconSize, fallback: number): NativeIconSize;
+/** Reset the warn-once cache. Test-only. */
+declare function resetNativeIconSizeWarnings(): void;
+
+export { type BoxProps, type DividerProps, type IconProps, type IconSize, type InputPrimitiveProps, type LinearGradientProps, type NativeIconSize, type SpinnerProps, type TestIDProps, type TextAreaPrimitiveProps, type TextProps, resetNativeIconSizeWarnings, resolveIconSize, resolveNativeIconSize };

package/index.d.ts

@@ -170,10 +170,23 @@ interface SpinnerProps {
     "aria-describedby"?: string;
     testID?: string;
 }
+/**
+ * Size of an icon glyph — the single definition shared by every icon package.
+ *
+ * A `number` is pixels. A `string` is a raw CSS length, which is what lets an
+ * icon fill a box owned by its parent: `size="100%"` is the reason this type
+ * is not just `number`.
+ *
+ * Only numbers and percentage strings survive on React Native, which has no
+ * layout engine for `calc()` or font-relative units. Use `resolveIconSize`
+ * (web) and `resolveNativeIconSize` (native) rather than interpolating a
+ * `size` into styles by hand — see FEP-895.
+ */
+type IconSize = number | string;
 interface IconProps {
     name?: string;
     color?: string;
-    size?: number | string;
+    size?: IconSize;
     children?: React.ReactNode;
     testID?: string;
     /** Test ID for testing frameworks (web) */
@@ -259,4 +272,30 @@ interface LinearGradientProps {
     testID?: string;
 }
 
-export type { BoxProps, DividerProps, IconProps, InputPrimitiveProps, LinearGradientProps, SpinnerProps, TestIDProps, TextAreaPrimitiveProps, TextProps };
+/**
+ * An `IconSize` narrowed to what React Native's layout accepts. Assignable to
+ * both `DimensionValue` (`View` styles) and `NumberProp` (react-native-svg).
+ */
+type NativeIconSize = number | `${number}%`;
+/**
+ * Resolve an `IconSize` to a CSS length for the web renderers.
+ *
+ * Numbers become pixels; strings pass through untouched, so any valid CSS
+ * length (`"100%"`, `"1em"`, `"calc(100% - 2px)"`) reaches the stylesheet as
+ * authored. Interpolating `size` directly into a `px` template is the bug this
+ * exists to prevent — it turns `"100%"` into `100%px`, which the browser drops.
+ */
+declare function resolveIconSize(size: IconSize): string;
+/**
+ * Resolve an `IconSize` for the React Native renderers.
+ *
+ * Numbers (density-independent pixels) and percentage strings pass through.
+ * Anything else — `calc()`, `em`, `rem`, `vw` — has no meaning to React
+ * Native's layout, so it falls back to `fallback` and warns once instead of
+ * silently rendering at the wrong size.
+ */
+declare function resolveNativeIconSize(size: IconSize, fallback: number): NativeIconSize;
+/** Reset the warn-once cache. Test-only. */
+declare function resetNativeIconSizeWarnings(): void;
+
+export { type BoxProps, type DividerProps, type IconProps, type IconSize, type InputPrimitiveProps, type LinearGradientProps, type NativeIconSize, type SpinnerProps, type TestIDProps, type TextAreaPrimitiveProps, type TextProps, resetNativeIconSizeWarnings, resolveIconSize, resolveNativeIconSize };

package/index.js

@@ -3,6 +3,10 @@ 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))
@@ -15,5 +19,42 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 
 // src/index.ts
 var index_exports = {};
+__export(index_exports, {
+  resetNativeIconSizeWarnings: () => resetNativeIconSizeWarnings,
+  resolveIconSize: () => resolveIconSize,
+  resolveNativeIconSize: () => resolveNativeIconSize
+});
 module.exports = __toCommonJS(index_exports);
+
+// src/iconSize.ts
+var PERCENTAGE = /^\d+(?:\.\d+)?%$/;
+function resolveIconSize(size) {
+  return typeof size === "number" ? `${size}px` : size.trim();
+}
+function resolveNativeIconSize(size, fallback) {
+  if (typeof size === "number") return size;
+  const trimmed = size.trim();
+  if (PERCENTAGE.test(trimmed)) return trimmed;
+  warnUnsupportedNativeSize(trimmed, fallback);
+  return fallback;
+}
+var warned = /* @__PURE__ */ new Set();
+function resetNativeIconSizeWarnings() {
+  warned.clear();
+}
+function warnUnsupportedNativeSize(size, fallback) {
+  if (warned.has(size)) return;
+  warned.add(size);
+  if (typeof console !== "undefined" && console.warn) {
+    console.warn(
+      `Icon: size="${size}" is not supported on React Native \u2014 only numbers and percentage strings (e.g. "100%") are. Falling back to ${fallback}. To size an icon by its container, use size="100%".`
+    );
+  }
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  resetNativeIconSizeWarnings,
+  resolveIconSize,
+  resolveNativeIconSize
+});
 //# sourceMappingURL=index.js.map

package/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export * from \"./types\";\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}
+{"version":3,"sources":["../src/index.ts","../src/iconSize.ts"],"sourcesContent":["export * from \"./types\";\nexport * from \"./iconSize\";\n","import type { IconSize } from \"./types\";\n\n/**\n * A bare, non-negative percentage length — the only string form React Native\n * understands. Deliberately rejects signs, whitespace-separated junk and\n * anything calc-like.\n */\nconst PERCENTAGE = /^\\d+(?:\\.\\d+)?%$/;\n\n/**\n * An `IconSize` narrowed to what React Native's layout accepts. Assignable to\n * both `DimensionValue` (`View` styles) and `NumberProp` (react-native-svg).\n */\nexport type NativeIconSize = number | `${number}%`;\n\n/**\n * Resolve an `IconSize` to a CSS length for the web renderers.\n *\n * Numbers become pixels; strings pass through untouched, so any valid CSS\n * length (`\"100%\"`, `\"1em\"`, `\"calc(100% - 2px)\"`) reaches the stylesheet as\n * authored. Interpolating `size` directly into a `px` template is the bug this\n * exists to prevent — it turns `\"100%\"` into `100%px`, which the browser drops.\n */\nexport function resolveIconSize(size: IconSize): string {\n  return typeof size === \"number\" ? `${size}px` : size.trim();\n}\n\n/**\n * Resolve an `IconSize` for the React Native renderers.\n *\n * Numbers (density-independent pixels) and percentage strings pass through.\n * Anything else — `calc()`, `em`, `rem`, `vw` — has no meaning to React\n * Native's layout, so it falls back to `fallback` and warns once instead of\n * silently rendering at the wrong size.\n */\nexport function resolveNativeIconSize(\n  size: IconSize,\n  fallback: number\n): NativeIconSize {\n  if (typeof size === \"number\") return size;\n\n  const trimmed = size.trim();\n  if (PERCENTAGE.test(trimmed)) return trimmed as `${number}%`;\n\n  warnUnsupportedNativeSize(trimmed, fallback);\n  return fallback;\n}\n\nconst warned = new Set<string>();\n\n/** Reset the warn-once cache. Test-only. */\nexport function resetNativeIconSizeWarnings(): void {\n  warned.clear();\n}\n\nfunction warnUnsupportedNativeSize(size: string, fallback: number): void {\n  if (warned.has(size)) return;\n  warned.add(size);\n\n  if (typeof console !== \"undefined\" && console.warn) {\n    console.warn(\n      `Icon: size=\"${size}\" is not supported on React Native — only numbers ` +\n        `and percentage strings (e.g. \"100%\") are. Falling back to ${fallback}. ` +\n        `To size an icon by its container, use size=\"100%\".`\n    );\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACOA,IAAM,aAAa;AAgBZ,SAAS,gBAAgB,MAAwB;AACtD,SAAO,OAAO,SAAS,WAAW,GAAG,IAAI,OAAO,KAAK,KAAK;AAC5D;AAUO,SAAS,sBACd,MACA,UACgB;AAChB,MAAI,OAAO,SAAS,SAAU,QAAO;AAErC,QAAM,UAAU,KAAK,KAAK;AAC1B,MAAI,WAAW,KAAK,OAAO,EAAG,QAAO;AAErC,4BAA0B,SAAS,QAAQ;AAC3C,SAAO;AACT;AAEA,IAAM,SAAS,oBAAI,IAAY;AAGxB,SAAS,8BAAoC;AAClD,SAAO,MAAM;AACf;AAEA,SAAS,0BAA0B,MAAc,UAAwB;AACvE,MAAI,OAAO,IAAI,IAAI,EAAG;AACtB,SAAO,IAAI,IAAI;AAEf,MAAI,OAAO,YAAY,eAAe,QAAQ,MAAM;AAClD,YAAQ;AAAA,MACN,eAAe,IAAI,oHAC4C,QAAQ;AAAA,IAEzE;AAAA,EACF;AACF;","names":[]}

package/index.mjs

@@ -1 +1,31 @@
+// src/iconSize.ts
+var PERCENTAGE = /^\d+(?:\.\d+)?%$/;
+function resolveIconSize(size) {
+  return typeof size === "number" ? `${size}px` : size.trim();
+}
+function resolveNativeIconSize(size, fallback) {
+  if (typeof size === "number") return size;
+  const trimmed = size.trim();
+  if (PERCENTAGE.test(trimmed)) return trimmed;
+  warnUnsupportedNativeSize(trimmed, fallback);
+  return fallback;
+}
+var warned = /* @__PURE__ */ new Set();
+function resetNativeIconSizeWarnings() {
+  warned.clear();
+}
+function warnUnsupportedNativeSize(size, fallback) {
+  if (warned.has(size)) return;
+  warned.add(size);
+  if (typeof console !== "undefined" && console.warn) {
+    console.warn(
+      `Icon: size="${size}" is not supported on React Native \u2014 only numbers and percentage strings (e.g. "100%") are. Falling back to ${fallback}. To size an icon by its container, use size="100%".`
+    );
+  }
+}
+export {
+  resetNativeIconSizeWarnings,
+  resolveIconSize,
+  resolveNativeIconSize
+};
 //# sourceMappingURL=index.mjs.map

package/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
+{"version":3,"sources":["../src/iconSize.ts"],"sourcesContent":["import type { IconSize } from \"./types\";\n\n/**\n * A bare, non-negative percentage length — the only string form React Native\n * understands. Deliberately rejects signs, whitespace-separated junk and\n * anything calc-like.\n */\nconst PERCENTAGE = /^\\d+(?:\\.\\d+)?%$/;\n\n/**\n * An `IconSize` narrowed to what React Native's layout accepts. Assignable to\n * both `DimensionValue` (`View` styles) and `NumberProp` (react-native-svg).\n */\nexport type NativeIconSize = number | `${number}%`;\n\n/**\n * Resolve an `IconSize` to a CSS length for the web renderers.\n *\n * Numbers become pixels; strings pass through untouched, so any valid CSS\n * length (`\"100%\"`, `\"1em\"`, `\"calc(100% - 2px)\"`) reaches the stylesheet as\n * authored. Interpolating `size` directly into a `px` template is the bug this\n * exists to prevent — it turns `\"100%\"` into `100%px`, which the browser drops.\n */\nexport function resolveIconSize(size: IconSize): string {\n  return typeof size === \"number\" ? `${size}px` : size.trim();\n}\n\n/**\n * Resolve an `IconSize` for the React Native renderers.\n *\n * Numbers (density-independent pixels) and percentage strings pass through.\n * Anything else — `calc()`, `em`, `rem`, `vw` — has no meaning to React\n * Native's layout, so it falls back to `fallback` and warns once instead of\n * silently rendering at the wrong size.\n */\nexport function resolveNativeIconSize(\n  size: IconSize,\n  fallback: number\n): NativeIconSize {\n  if (typeof size === \"number\") return size;\n\n  const trimmed = size.trim();\n  if (PERCENTAGE.test(trimmed)) return trimmed as `${number}%`;\n\n  warnUnsupportedNativeSize(trimmed, fallback);\n  return fallback;\n}\n\nconst warned = new Set<string>();\n\n/** Reset the warn-once cache. Test-only. */\nexport function resetNativeIconSizeWarnings(): void {\n  warned.clear();\n}\n\nfunction warnUnsupportedNativeSize(size: string, fallback: number): void {\n  if (warned.has(size)) return;\n  warned.add(size);\n\n  if (typeof console !== \"undefined\" && console.warn) {\n    console.warn(\n      `Icon: size=\"${size}\" is not supported on React Native — only numbers ` +\n        `and percentage strings (e.g. \"100%\") are. Falling back to ${fallback}. ` +\n        `To size an icon by its container, use size=\"100%\".`\n    );\n  }\n}\n"],"mappings":";AAOA,IAAM,aAAa;AAgBZ,SAAS,gBAAgB,MAAwB;AACtD,SAAO,OAAO,SAAS,WAAW,GAAG,IAAI,OAAO,KAAK,KAAK;AAC5D;AAUO,SAAS,sBACd,MACA,UACgB;AAChB,MAAI,OAAO,SAAS,SAAU,QAAO;AAErC,QAAM,UAAU,KAAK,KAAK;AAC1B,MAAI,WAAW,KAAK,OAAO,EAAG,QAAO;AAErC,4BAA0B,SAAS,QAAQ;AAC3C,SAAO;AACT;AAEA,IAAM,SAAS,oBAAI,IAAY;AAGxB,SAAS,8BAAoC;AAClD,SAAO,MAAM;AACf;AAEA,SAAS,0BAA0B,MAAc,UAAwB;AACvE,MAAI,OAAO,IAAI,IAAI,EAAG;AACtB,SAAO,IAAI,IAAI;AAEf,MAAI,OAAO,YAAY,eAAe,QAAQ,MAAM;AAClD,YAAQ;AAAA,MACN,eAAe,IAAI,oHAC4C,QAAQ;AAAA,IAEzE;AAAA,EACF;AACF;","names":[]}

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@xsolla/xui-primitives-core",
-  "version": "0.212.0",
+  "version": "0.213.0",
   "description": "Core type definitions for XUI primitives",
   "main": "./index.js",
   "module": "./index.mjs",
   "types": "./index.d.ts",
   "scripts": {
-    "build": "tsup"
+    "build": "tsup",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage"
   },
   "devDependencies": {
     "@vitest/coverage-v8": "^4.0.18",