@xsolla/xui-core 0.219.0 → 0.221.0

package/index.d.ts

@@ -225,6 +225,14 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
             };
         };
         control: {
+            disable: {
+                bg: string;
+                bgActive: string;
+                border: string;
+                borderActive: string;
+                content: string;
+                contentActive: string;
+            };
             brand: {
                 primary: {
                     bg: string;
@@ -657,6 +665,14 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
             };
         };
         control: {
+            disable: {
+                bg: string;
+                bgActive: string;
+                border: string;
+                borderActive: string;
+                content: string;
+                contentActive: string;
+            };
             brand: {
                 primary: {
                     bg: string;
@@ -1089,6 +1105,14 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
             };
         };
         control: {
+            disable: {
+                bg: string;
+                bgActive: string;
+                border: string;
+                borderActive: string;
+                content: string;
+                contentActive: string;
+            };
             brand: {
                 primary: {
                     bg: string;
@@ -1521,6 +1545,14 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
             };
         };
         control: {
+            disable: {
+                bg: string;
+                bgActive: string;
+                border: string;
+                borderActive: string;
+                content: string;
+                contentActive: string;
+            };
             brand: {
                 primary: {
                     bg: string;
@@ -1953,6 +1985,14 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
             };
         };
         control: {
+            disable: {
+                bg: string;
+                bgActive: string;
+                border: string;
+                borderActive: string;
+                content: string;
+                contentActive: string;
+            };
             brand: {
                 primary: {
                     bg: string;
@@ -2385,6 +2425,14 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
             };
         };
         control: {
+            disable: {
+                bg: string;
+                bgActive: string;
+                border: string;
+                borderActive: string;
+                content: string;
+                contentActive: string;
+            };
             brand: {
                 primary: {
                     bg: string;
@@ -2817,6 +2865,14 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
             };
         };
         control: {
+            disable: {
+                bg: string;
+                bgActive: string;
+                border: string;
+                borderActive: string;
+                content: string;
+                contentActive: string;
+            };
             brand: {
                 primary: {
                     bg: string;
@@ -4846,6 +4902,50 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
             paginationGap: number;
             paginationPaddingHorizontal: number;
         };
+        slider: (size: "xl" | "lg" | "md" | "sm") => {
+            trackHeight: 4;
+        } | {
+            trackHeight: 4;
+        } | {
+            trackHeight: 4;
+        } | {
+            trackHeight: 4;
+        };
+        tooltip: (size: "xl" | "lg" | "md" | "sm") => {
+            minHeight: number;
+        } | {
+            minHeight: number;
+        } | {
+            minHeight: number;
+        } | {
+            minHeight: number;
+        };
+        markdown: () => {
+            h1: {
+                paddingTop: 40;
+                paddingBottom: 8;
+            };
+            h2: {
+                paddingTop: 32;
+                paddingBottom: 8;
+            };
+            h3: {
+                paddingTop: 16;
+                paddingBottom: 8;
+            };
+            h4: {
+                paddingTop: 8;
+                paddingBottom: 8;
+            };
+            p: {
+                paddingTop: number;
+                paddingBottom: 16;
+            };
+            image: {
+                paddingTop: number;
+                paddingBottom: 24;
+            };
+        };
     };
 };
 /**
@@ -5122,6 +5222,14 @@ var data = {
 	}
 };
 var control = {
+	disable: {
+		bg: "rgba(178, 242, 255, 0.25)",
+		bgActive: "rgba(178, 242, 255, 0.4)",
+		border: "rgba(255, 255, 255, 0)",
+		borderActive: "rgba(255, 255, 255, 0)",
+		content: "rgba(255, 255, 255, 0.36)",
+		contentActive: "rgba(255, 255, 255, 0.6)"
+	},
 	brand: {
 		primary: {
 			bg: "#80eaff",
@@ -5576,6 +5684,14 @@ declare const colors: {
             };
         };
         control: {
+            disable: {
+                bg: string;
+                bgActive: string;
+                border: string;
+                borderActive: string;
+                content: string;
+                contentActive: string;
+            };
             brand: {
                 primary: {
                     bg: string;
@@ -6009,6 +6125,14 @@ declare const colors: {
             };
         };
         control: {
+            disable: {
+                bg: string;
+                bgActive: string;
+                border: string;
+                borderActive: string;
+                content: string;
+                contentActive: string;
+            };
             brand: {
                 primary: {
                     bg: string;
@@ -6442,6 +6566,14 @@ declare const colors: {
             };
         };
         control: {
+            disable: {
+                bg: string;
+                bgActive: string;
+                border: string;
+                borderActive: string;
+                content: string;
+                contentActive: string;
+            };
             brand: {
                 primary: {
                     bg: string;
@@ -6875,6 +7007,14 @@ declare const colors: {
             };
         };
         control: {
+            disable: {
+                bg: string;
+                bgActive: string;
+                border: string;
+                borderActive: string;
+                content: string;
+                contentActive: string;
+            };
             brand: {
                 primary: {
                     bg: string;
@@ -7308,6 +7448,14 @@ declare const colors: {
             };
         };
         control: {
+            disable: {
+                bg: string;
+                bgActive: string;
+                border: string;
+                borderActive: string;
+                content: string;
+                contentActive: string;
+            };
             brand: {
                 primary: {
                     bg: string;
@@ -7741,6 +7889,14 @@ declare const colors: {
             };
         };
         control: {
+            disable: {
+                bg: string;
+                bgActive: string;
+                border: string;
+                borderActive: string;
+                content: string;
+                contentActive: string;
+            };
             brand: {
                 primary: {
                     bg: string;
@@ -8174,6 +8330,14 @@ declare const colors: {
             };
         };
         control: {
+            disable: {
+                bg: string;
+                bgActive: string;
+                border: string;
+                borderActive: string;
+                content: string;
+                contentActive: string;
+            };
             brand: {
                 primary: {
                     bg: string;
@@ -8607,6 +8771,14 @@ declare const colors: {
             };
         };
         control: {
+            disable: {
+                bg: string;
+                bgActive: string;
+                border: string;
+                borderActive: string;
+                content: string;
+                contentActive: string;
+            };
             brand: {
                 primary: {
                     bg: string;
@@ -9040,6 +9212,14 @@ declare const colors: {
             };
         };
         control: {
+            disable: {
+                bg: string;
+                bgActive: string;
+                border: string;
+                borderActive: string;
+                content: string;
+                contentActive: string;
+            };
             brand: {
                 primary: {
                     bg: string;
@@ -9408,6 +9588,76 @@ declare const radiusScale: {
     readonly "400": 32;
     readonly "999": 999;
 };
+/**
+ * Primitive control-size scale. Mirrors Figma "Scale / control-size/*"
+ * variables (XUITSD-71). Values are px heights/widths for controls.
+ */
+declare const controlSizeScale: {
+    readonly "25": 6;
+    readonly "50": 8;
+    readonly "75": 10;
+    readonly "100": 12;
+    readonly "125": 14;
+    readonly "150": 16;
+    readonly "175": 18;
+    readonly "200": 20;
+    readonly "250": 24;
+    readonly "300": 28;
+    readonly "350": 32;
+    readonly "400": 36;
+    readonly "450": 40;
+    readonly "500": 44;
+    readonly "550": 48;
+    readonly "650": 56;
+    readonly "750": 64;
+    readonly "850": 72;
+    readonly "950": 80;
+};
+/**
+ * Primitive icon-size scale. Mirrors Figma "Scale / icon-size/*" variables
+ * (XUITSD-71). Values are px.
+ */
+declare const iconSizeScale: {
+    readonly "50": 14;
+    readonly "100": 16;
+    readonly "150": 18;
+    readonly "200": 20;
+    readonly "250": 22;
+    readonly "300": 24;
+    readonly "400": 28;
+    readonly "500": 32;
+};
+/**
+ * Primitive component typography scale. Mirrors Figma
+ * "Scale / typography-scale/*" variables (XUITSD-71) — font size and line
+ * height in px for component-level text.
+ */
+declare const componentTypographyScale: {
+    readonly "100": {
+        readonly fontSize: 10;
+        readonly lineHeight: 12;
+    };
+    readonly "200": {
+        readonly fontSize: 12;
+        readonly lineHeight: 14;
+    };
+    readonly "300": {
+        readonly fontSize: 14;
+        readonly lineHeight: 16;
+    };
+    readonly "400": {
+        readonly fontSize: 16;
+        readonly lineHeight: 18;
+    };
+    readonly "500": {
+        readonly fontSize: 18;
+        readonly lineHeight: 20;
+    };
+    readonly "600": {
+        readonly fontSize: 20;
+        readonly lineHeight: 22;
+    };
+};
 /** Primitive border-width scale. Mirrors Figma "Scale / stroke/*" variables. */
 declare const stroke: {
     readonly "1": 1;
@@ -9905,4 +10155,4 @@ declare const cssVar: {
     readonly lhText: (step: string) => string;
 };
 
-export { type BreakpointKey, type ComponentSize, DISPLAY_SCALE_STEPS, type DesignSystemContextType, type DisplayScaleStep, FontLoader, LAYER_OFFSET, MOBILE_MAX_WIDTH, MODAL_LAYER_STEP, ModalIdContext, ModalStackProvider, OVERLAY_LAYER_BASE, OverlayLayerProvider, type ProductContext, type ResponsiveValue, SCALE_STEPS, type ScaleStep, TOAST_LAYER, type Theme, type ThemeColorScheme, type ThemeColors, type ThemeFonts, type ThemeMode, type ThemeOverrideProps, type ThemeShadow, type ThemeShape, type ThemeSizing, type ThemeSpacing, type ThemeTypographyRoles, type TypographyBodyVariant, TypographyStyleLoader, type TypographyTokens, type TypographyVariant, XUIProvider, breakpoints, colors, cssVar, defaultProductContext, fontFacesCSS, fontSize, fonts, generateTypographyCSS, getFonts, getTypographyTokens, getTypographyVariant, isAndroid, isIOS, isNative, isWeb, lineHeightCompact, lineHeightDisplay, lineHeightText, radius, radiusScale, responsiveTypographyScale, shadow, shape, spacing, spacingScale, stroke, themeConfig, typography, typographyTokens, useDesignSystem, useId, useModalId, useModalStackDepth, useOverlayLayer, useResolvedTheme };
+export { type BreakpointKey, type ComponentSize, DISPLAY_SCALE_STEPS, type DesignSystemContextType, type DisplayScaleStep, FontLoader, LAYER_OFFSET, MOBILE_MAX_WIDTH, MODAL_LAYER_STEP, ModalIdContext, ModalStackProvider, OVERLAY_LAYER_BASE, OverlayLayerProvider, type ProductContext, type ResponsiveValue, SCALE_STEPS, type ScaleStep, TOAST_LAYER, type Theme, type ThemeColorScheme, type ThemeColors, type ThemeFonts, type ThemeMode, type ThemeOverrideProps, type ThemeShadow, type ThemeShape, type ThemeSizing, type ThemeSpacing, type ThemeTypographyRoles, type TypographyBodyVariant, TypographyStyleLoader, type TypographyTokens, type TypographyVariant, XUIProvider, breakpoints, colors, componentTypographyScale, controlSizeScale, cssVar, defaultProductContext, fontFacesCSS, fontSize, fonts, generateTypographyCSS, getFonts, getTypographyTokens, getTypographyVariant, iconSizeScale, isAndroid, isIOS, isNative, isWeb, lineHeightCompact, lineHeightDisplay, lineHeightText, radius, radiusScale, responsiveTypographyScale, shadow, shape, spacing, spacingScale, stroke, themeConfig, typography, typographyTokens, useDesignSystem, useId, useModalId, useModalStackDepth, useOverlayLayer, useResolvedTheme };

package/index.js

@@ -45,6 +45,8 @@ __export(index_exports, {
   XUIProvider: () => XUIProvider,
   breakpoints: () => breakpoints,
   colors: () => colors,
+  componentTypographyScale: () => componentTypographyScale,
+  controlSizeScale: () => controlSizeScale,
   cssVar: () => cssVar,
   defaultProductContext: () => defaultProductContext,
   fontFacesCSS: () => fontFacesCSS,
@@ -54,6 +56,7 @@ __export(index_exports, {
   getFonts: () => getFonts,
   getTypographyTokens: () => getTypographyTokens,
   getTypographyVariant: () => getTypographyVariant,
+  iconSizeScale: () => iconSizeScale,
   isAndroid: () => isAndroid,
   isIOS: () => isIOS,
   isNative: () => isNative,
@@ -214,6 +217,14 @@ var dark_default = {
     }
   },
   control: {
+    disable: {
+      bg: "rgba(178, 242, 255, 0.25)",
+      bgActive: "rgba(178, 242, 255, 0.4)",
+      border: "rgba(255, 255, 255, 0)",
+      borderActive: "rgba(255, 255, 255, 0)",
+      content: "rgba(255, 255, 255, 0.36)",
+      contentActive: "rgba(255, 255, 255, 0.6)"
+    },
     brand: {
       primary: {
         bg: "#80eaff",
@@ -649,6 +660,14 @@ var light_default = {
     }
   },
   control: {
+    disable: {
+      bg: "rgba(194, 196, 186, 0.8)",
+      bgActive: "rgba(65, 66, 62, 0.6)",
+      border: "rgba(0, 0, 0, 0)",
+      borderActive: "rgba(0, 0, 0, 0)",
+      content: "rgba(0, 0, 0, 0.4)",
+      contentActive: "rgba(255, 255, 255, 0.6)"
+    },
     brand: {
       primary: {
         bg: "#80eaff",
@@ -1084,6 +1103,14 @@ var ltg_dark_default = {
     }
   },
   control: {
+    disable: {
+      bg: "rgba(255, 255, 255, 0.25)",
+      bgActive: "rgba(255, 255, 255, 0.25)",
+      border: "rgba(255, 255, 255, 0)",
+      borderActive: "rgba(255, 255, 255, 0)",
+      content: "rgba(255, 255, 255, 0.36)",
+      contentActive: "rgba(255, 255, 255, 0.6)"
+    },
     brand: {
       primary: {
         bg: "#ffca43",
@@ -1519,6 +1546,14 @@ var ltg_light_default = {
     }
   },
   control: {
+    disable: {
+      bg: "#d3d3d3",
+      bgActive: "rgba(0, 0, 0, 0.25)",
+      border: "rgba(0, 0, 0, 0)",
+      borderActive: "rgba(0, 0, 0, 0)",
+      content: "#898b97",
+      contentActive: "#898b97"
+    },
     brand: {
       primary: {
         bg: "#c9eb6a",
@@ -1954,6 +1989,14 @@ var blueprints_default = {
     }
   },
   control: {
+    disable: {
+      bg: "#e8eced",
+      bgActive: "#e8eced",
+      border: "rgba(0, 0, 0, 0)",
+      borderActive: "rgba(0, 0, 0, 0)",
+      content: "rgba(0, 0, 0, 0.36)",
+      contentActive: "rgba(0, 0, 0, 0.36)"
+    },
     brand: {
       primary: {
         bg: "#80eaff",
@@ -2389,6 +2432,14 @@ var corpsite_dark_default = {
     }
   },
   control: {
+    disable: {
+      bg: "rgba(178, 242, 255, 0.25)",
+      bgActive: "rgba(178, 242, 255, 0.25)",
+      border: "rgba(178, 242, 255, 0)",
+      borderActive: "rgba(178, 242, 255, 0)",
+      content: "rgba(232, 236, 237, 0.2)",
+      contentActive: "rgba(232, 236, 237, 0.2)"
+    },
     brand: {
       primary: {
         bg: "#80eaff",
@@ -2824,6 +2875,14 @@ var corpsite_light_default = {
     }
   },
   control: {
+    disable: {
+      bg: "rgba(0, 0, 0, 0.2)",
+      bgActive: "rgba(0, 0, 0, 0.2)",
+      border: "rgba(221, 223, 216, 0)",
+      borderActive: "rgba(221, 223, 216, 0)",
+      content: "rgba(0, 0, 0, 0.2)",
+      contentActive: "rgba(0, 0, 0, 0.2)"
+    },
     brand: {
       primary: {
         bg: "#80eaff",
@@ -3196,6 +3255,45 @@ var radiusScale = {
   "400": 32,
   "999": 999
 };
+var controlSizeScale = {
+  "25": 6,
+  "50": 8,
+  "75": 10,
+  "100": 12,
+  "125": 14,
+  "150": 16,
+  "175": 18,
+  "200": 20,
+  "250": 24,
+  "300": 28,
+  "350": 32,
+  "400": 36,
+  "450": 40,
+  "500": 44,
+  "550": 48,
+  "650": 56,
+  "750": 64,
+  "850": 72,
+  "950": 80
+};
+var iconSizeScale = {
+  "50": 14,
+  "100": 16,
+  "150": 18,
+  "200": 20,
+  "250": 22,
+  "300": 24,
+  "400": 28,
+  "500": 32
+};
+var componentTypographyScale = {
+  "100": { fontSize: 10, lineHeight: 12 },
+  "200": { fontSize: 12, lineHeight: 14 },
+  "300": { fontSize: 14, lineHeight: 16 },
+  "400": { fontSize: 16, lineHeight: 18 },
+  "500": { fontSize: 18, lineHeight: 20 },
+  "600": { fontSize: 20, lineHeight: 22 }
+};
 var stroke = {
   "1": 1,
   "2": 2,
@@ -5415,6 +5513,38 @@ var table = {
   paginationPaddingHorizontal: 24
 };
 
+// src/theme/sizing/slider.ts
+var slider = (size) => {
+  const configs = {
+    xl: { trackHeight: spacingScale["50"] },
+    lg: { trackHeight: spacingScale["50"] },
+    md: { trackHeight: spacingScale["50"] },
+    sm: { trackHeight: spacingScale["50"] }
+  };
+  return configs[size];
+};
+
+// src/theme/sizing/tooltip.ts
+var tooltip = (size) => {
+  const configs = {
+    xl: { minHeight: 60 },
+    lg: { minHeight: 56 },
+    md: { minHeight: 52 },
+    sm: { minHeight: 32 }
+  };
+  return configs[size];
+};
+
+// src/theme/sizing/markdown.ts
+var markdown = () => ({
+  h1: { paddingTop: spacingScale["500"], paddingBottom: spacingScale["100"] },
+  h2: { paddingTop: spacingScale["400"], paddingBottom: spacingScale["100"] },
+  h3: { paddingTop: spacingScale["200"], paddingBottom: spacingScale["100"] },
+  h4: { paddingTop: spacingScale["100"], paddingBottom: spacingScale["100"] },
+  p: { paddingTop: 0, paddingBottom: spacingScale["200"] },
+  image: { paddingTop: 0, paddingBottom: spacingScale["300"] }
+});
+
 // src/theme/sizing/index.ts
 function createSizing(contextFonts, contextTypography) {
   return {
@@ -5451,7 +5581,10 @@ function createSizing(contextFonts, contextTypography) {
     collapsibleB2b,
     toast,
     toggleButtonGroup,
-    table
+    table,
+    slider,
+    tooltip,
+    markdown
   };
 }
 
@@ -5890,6 +6023,8 @@ var useModalStackDepth = () => (0, import_react4.useContext)(ModalStackContext);
   XUIProvider,
   breakpoints,
   colors,
+  componentTypographyScale,
+  controlSizeScale,
   cssVar,
   defaultProductContext,
   fontFacesCSS,
@@ -5899,6 +6034,7 @@ var useModalStackDepth = () => (0, import_react4.useContext)(ModalStackContext);
   getFonts,
   getTypographyTokens,
   getTypographyVariant,
+  iconSizeScale,
   isAndroid,
   isIOS,
   isNative,