@xsolla/xui-core 0.149.1 → 0.150.0-pr250.1778061864

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/README.md CHANGED
@@ -5,7 +5,7 @@ Design system foundation providing theming, context, design tokens, and shared u
5
5
  ## Installation
6
6
 
7
7
  ```bash
8
- yarn add @xsolla/xui-core
8
+ npm install @xsolla/xui-core
9
9
  ```
10
10
 
11
11
  ## Usage
package/index.d.mts CHANGED
@@ -2464,6 +2464,7 @@ declare const spacing: {
2464
2464
  declare const radius: {
2465
2465
  button: number;
2466
2466
  card: number;
2467
+ contextMenu: number;
2467
2468
  input: number;
2468
2469
  tagSmall: number;
2469
2470
  tagMedium: number;
@@ -2479,6 +2480,7 @@ declare const shadow: {
2479
2480
  surfaceHover: string;
2480
2481
  popover: string;
2481
2482
  modal: string;
2483
+ contextMenu: string;
2482
2484
  };
2483
2485
 
2484
2486
  /**
@@ -3850,6 +3852,7 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
3850
3852
  radius: {
3851
3853
  button: number;
3852
3854
  card: number;
3855
+ contextMenu: number;
3853
3856
  input: number;
3854
3857
  tagSmall: number;
3855
3858
  tagMedium: number;
@@ -3864,6 +3867,7 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
3864
3867
  surfaceHover: string;
3865
3868
  popover: string;
3866
3869
  modal: string;
3870
+ contextMenu: string;
3867
3871
  };
3868
3872
  fonts: {
3869
3873
  heading: string;
@@ -4801,6 +4805,10 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
4801
4805
  iconSize: number;
4802
4806
  gap: number;
4803
4807
  minWidth: number;
4808
+ panelWidth: number;
4809
+ statusDotSize: number;
4810
+ iconWrapperSize: number;
4811
+ triggerOffset: number;
4804
4812
  searchPaddingHorizontal: number;
4805
4813
  searchPaddingVertical: number;
4806
4814
  searchGap: number;
@@ -4817,6 +4825,10 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
4817
4825
  iconSize: number;
4818
4826
  gap: number;
4819
4827
  minWidth: number;
4828
+ panelWidth: number;
4829
+ statusDotSize: number;
4830
+ iconWrapperSize: number;
4831
+ triggerOffset: number;
4820
4832
  searchPaddingHorizontal: number;
4821
4833
  searchPaddingVertical: number;
4822
4834
  searchGap: number;
@@ -4833,6 +4845,10 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
4833
4845
  iconSize: number;
4834
4846
  gap: number;
4835
4847
  minWidth: number;
4848
+ panelWidth: number;
4849
+ statusDotSize: number;
4850
+ iconWrapperSize: number;
4851
+ triggerOffset: number;
4836
4852
  searchPaddingHorizontal: number;
4837
4853
  searchPaddingVertical: number;
4838
4854
  searchGap: number;
@@ -4849,6 +4865,10 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
4849
4865
  iconSize: number;
4850
4866
  gap: number;
4851
4867
  minWidth: number;
4868
+ panelWidth: number;
4869
+ statusDotSize: number;
4870
+ iconWrapperSize: number;
4871
+ triggerOffset: number;
4852
4872
  searchPaddingHorizontal: number;
4853
4873
  searchPaddingVertical: number;
4854
4874
  searchGap: number;
@@ -6267,6 +6287,7 @@ declare const useResolvedTheme: (overrides?: ThemeOverrideProps) => {
6267
6287
  radius: {
6268
6288
  button: number;
6269
6289
  card: number;
6290
+ contextMenu: number;
6270
6291
  input: number;
6271
6292
  tagSmall: number;
6272
6293
  tagMedium: number;
@@ -6281,6 +6302,7 @@ declare const useResolvedTheme: (overrides?: ThemeOverrideProps) => {
6281
6302
  surfaceHover: string;
6282
6303
  popover: string;
6283
6304
  modal: string;
6305
+ contextMenu: string;
6284
6306
  };
6285
6307
  fonts: {
6286
6308
  heading: string;
@@ -7218,6 +7240,10 @@ declare const useResolvedTheme: (overrides?: ThemeOverrideProps) => {
7218
7240
  iconSize: number;
7219
7241
  gap: number;
7220
7242
  minWidth: number;
7243
+ panelWidth: number;
7244
+ statusDotSize: number;
7245
+ iconWrapperSize: number;
7246
+ triggerOffset: number;
7221
7247
  searchPaddingHorizontal: number;
7222
7248
  searchPaddingVertical: number;
7223
7249
  searchGap: number;
@@ -7234,6 +7260,10 @@ declare const useResolvedTheme: (overrides?: ThemeOverrideProps) => {
7234
7260
  iconSize: number;
7235
7261
  gap: number;
7236
7262
  minWidth: number;
7263
+ panelWidth: number;
7264
+ statusDotSize: number;
7265
+ iconWrapperSize: number;
7266
+ triggerOffset: number;
7237
7267
  searchPaddingHorizontal: number;
7238
7268
  searchPaddingVertical: number;
7239
7269
  searchGap: number;
@@ -7250,6 +7280,10 @@ declare const useResolvedTheme: (overrides?: ThemeOverrideProps) => {
7250
7280
  iconSize: number;
7251
7281
  gap: number;
7252
7282
  minWidth: number;
7283
+ panelWidth: number;
7284
+ statusDotSize: number;
7285
+ iconWrapperSize: number;
7286
+ triggerOffset: number;
7253
7287
  searchPaddingHorizontal: number;
7254
7288
  searchPaddingVertical: number;
7255
7289
  searchGap: number;
@@ -7266,6 +7300,10 @@ declare const useResolvedTheme: (overrides?: ThemeOverrideProps) => {
7266
7300
  iconSize: number;
7267
7301
  gap: number;
7268
7302
  minWidth: number;
7303
+ panelWidth: number;
7304
+ statusDotSize: number;
7305
+ iconWrapperSize: number;
7306
+ triggerOffset: number;
7269
7307
  searchPaddingHorizontal: number;
7270
7308
  searchPaddingVertical: number;
7271
7309
  searchGap: number;
package/index.d.ts CHANGED
@@ -2464,6 +2464,7 @@ declare const spacing: {
2464
2464
  declare const radius: {
2465
2465
  button: number;
2466
2466
  card: number;
2467
+ contextMenu: number;
2467
2468
  input: number;
2468
2469
  tagSmall: number;
2469
2470
  tagMedium: number;
@@ -2479,6 +2480,7 @@ declare const shadow: {
2479
2480
  surfaceHover: string;
2480
2481
  popover: string;
2481
2482
  modal: string;
2483
+ contextMenu: string;
2482
2484
  };
2483
2485
 
2484
2486
  /**
@@ -3850,6 +3852,7 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
3850
3852
  radius: {
3851
3853
  button: number;
3852
3854
  card: number;
3855
+ contextMenu: number;
3853
3856
  input: number;
3854
3857
  tagSmall: number;
3855
3858
  tagMedium: number;
@@ -3864,6 +3867,7 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
3864
3867
  surfaceHover: string;
3865
3868
  popover: string;
3866
3869
  modal: string;
3870
+ contextMenu: string;
3867
3871
  };
3868
3872
  fonts: {
3869
3873
  heading: string;
@@ -4801,6 +4805,10 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
4801
4805
  iconSize: number;
4802
4806
  gap: number;
4803
4807
  minWidth: number;
4808
+ panelWidth: number;
4809
+ statusDotSize: number;
4810
+ iconWrapperSize: number;
4811
+ triggerOffset: number;
4804
4812
  searchPaddingHorizontal: number;
4805
4813
  searchPaddingVertical: number;
4806
4814
  searchGap: number;
@@ -4817,6 +4825,10 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
4817
4825
  iconSize: number;
4818
4826
  gap: number;
4819
4827
  minWidth: number;
4828
+ panelWidth: number;
4829
+ statusDotSize: number;
4830
+ iconWrapperSize: number;
4831
+ triggerOffset: number;
4820
4832
  searchPaddingHorizontal: number;
4821
4833
  searchPaddingVertical: number;
4822
4834
  searchGap: number;
@@ -4833,6 +4845,10 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
4833
4845
  iconSize: number;
4834
4846
  gap: number;
4835
4847
  minWidth: number;
4848
+ panelWidth: number;
4849
+ statusDotSize: number;
4850
+ iconWrapperSize: number;
4851
+ triggerOffset: number;
4836
4852
  searchPaddingHorizontal: number;
4837
4853
  searchPaddingVertical: number;
4838
4854
  searchGap: number;
@@ -4849,6 +4865,10 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
4849
4865
  iconSize: number;
4850
4866
  gap: number;
4851
4867
  minWidth: number;
4868
+ panelWidth: number;
4869
+ statusDotSize: number;
4870
+ iconWrapperSize: number;
4871
+ triggerOffset: number;
4852
4872
  searchPaddingHorizontal: number;
4853
4873
  searchPaddingVertical: number;
4854
4874
  searchGap: number;
@@ -6267,6 +6287,7 @@ declare const useResolvedTheme: (overrides?: ThemeOverrideProps) => {
6267
6287
  radius: {
6268
6288
  button: number;
6269
6289
  card: number;
6290
+ contextMenu: number;
6270
6291
  input: number;
6271
6292
  tagSmall: number;
6272
6293
  tagMedium: number;
@@ -6281,6 +6302,7 @@ declare const useResolvedTheme: (overrides?: ThemeOverrideProps) => {
6281
6302
  surfaceHover: string;
6282
6303
  popover: string;
6283
6304
  modal: string;
6305
+ contextMenu: string;
6284
6306
  };
6285
6307
  fonts: {
6286
6308
  heading: string;
@@ -7218,6 +7240,10 @@ declare const useResolvedTheme: (overrides?: ThemeOverrideProps) => {
7218
7240
  iconSize: number;
7219
7241
  gap: number;
7220
7242
  minWidth: number;
7243
+ panelWidth: number;
7244
+ statusDotSize: number;
7245
+ iconWrapperSize: number;
7246
+ triggerOffset: number;
7221
7247
  searchPaddingHorizontal: number;
7222
7248
  searchPaddingVertical: number;
7223
7249
  searchGap: number;
@@ -7234,6 +7260,10 @@ declare const useResolvedTheme: (overrides?: ThemeOverrideProps) => {
7234
7260
  iconSize: number;
7235
7261
  gap: number;
7236
7262
  minWidth: number;
7263
+ panelWidth: number;
7264
+ statusDotSize: number;
7265
+ iconWrapperSize: number;
7266
+ triggerOffset: number;
7237
7267
  searchPaddingHorizontal: number;
7238
7268
  searchPaddingVertical: number;
7239
7269
  searchGap: number;
@@ -7250,6 +7280,10 @@ declare const useResolvedTheme: (overrides?: ThemeOverrideProps) => {
7250
7280
  iconSize: number;
7251
7281
  gap: number;
7252
7282
  minWidth: number;
7283
+ panelWidth: number;
7284
+ statusDotSize: number;
7285
+ iconWrapperSize: number;
7286
+ triggerOffset: number;
7253
7287
  searchPaddingHorizontal: number;
7254
7288
  searchPaddingVertical: number;
7255
7289
  searchGap: number;
@@ -7266,6 +7300,10 @@ declare const useResolvedTheme: (overrides?: ThemeOverrideProps) => {
7266
7300
  iconSize: number;
7267
7301
  gap: number;
7268
7302
  minWidth: number;
7303
+ panelWidth: number;
7304
+ statusDotSize: number;
7305
+ iconWrapperSize: number;
7306
+ triggerOffset: number;
7269
7307
  searchPaddingHorizontal: number;
7270
7308
  searchPaddingVertical: number;
7271
7309
  searchGap: number;
package/index.js CHANGED
@@ -1283,6 +1283,7 @@ var spacing = {
1283
1283
  var radius = {
1284
1284
  button: 4,
1285
1285
  card: 12,
1286
+ contextMenu: 8,
1286
1287
  input: 4,
1287
1288
  tagSmall: 4,
1288
1289
  tagMedium: 6,
@@ -1298,7 +1299,8 @@ var shadow = {
1298
1299
  surface: "0px 1px 2px rgba(7, 7, 8, 0.2), 0px 2px 6px 2px rgba(7, 7, 8, 0.1)",
1299
1300
  surfaceHover: "0px 4px 8px 3px rgba(7, 7, 8, 0.1), 0px 1px 3px rgba(7, 7, 8, 0.2)",
1300
1301
  popover: "0px 6px 10px 4px rgba(7, 7, 8, 0.1), 0px 2px 3px rgba(7, 7, 8, 0.2)",
1301
- modal: "0px 8px 12px 6px rgba(7, 7, 8, 0.1), 0px 4px 4px rgba(7, 7, 8, 0.2)"
1302
+ modal: "0px 8px 12px 6px rgba(7, 7, 8, 0.1), 0px 4px 4px rgba(7, 7, 8, 0.2)",
1303
+ contextMenu: "0px 4px 12px rgba(0, 0, 0, 0.15)"
1302
1304
  };
1303
1305
 
1304
1306
  // src/tokens/fonts.ts
@@ -3113,6 +3115,10 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
3113
3115
  iconSize: 18,
3114
3116
  gap: 12,
3115
3117
  minWidth: 276,
3118
+ panelWidth: 320,
3119
+ statusDotSize: 12,
3120
+ iconWrapperSize: 40,
3121
+ triggerOffset: 4,
3116
3122
  // Search sizing from Figma
3117
3123
  searchPaddingHorizontal: 16,
3118
3124
  searchPaddingVertical: 18,
@@ -3131,6 +3137,10 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
3131
3137
  iconSize: 18,
3132
3138
  gap: 10,
3133
3139
  minWidth: 220,
3140
+ panelWidth: 296,
3141
+ statusDotSize: 10,
3142
+ iconWrapperSize: 36,
3143
+ triggerOffset: 4,
3134
3144
  // Search sizing from Figma
3135
3145
  searchPaddingHorizontal: 14,
3136
3146
  searchPaddingVertical: 14,
@@ -3149,6 +3159,10 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
3149
3159
  iconSize: 18,
3150
3160
  gap: 8,
3151
3161
  minWidth: 172,
3162
+ panelWidth: 272,
3163
+ statusDotSize: 8,
3164
+ iconWrapperSize: 32,
3165
+ triggerOffset: 4,
3152
3166
  // Search sizing from Figma
3153
3167
  searchPaddingHorizontal: 12,
3154
3168
  searchPaddingVertical: 11,
@@ -3167,6 +3181,10 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
3167
3181
  iconSize: 18,
3168
3182
  gap: 8,
3169
3183
  minWidth: 132,
3184
+ panelWidth: 248,
3185
+ statusDotSize: 6,
3186
+ iconWrapperSize: 24,
3187
+ triggerOffset: 4,
3170
3188
  // Search sizing from Figma
3171
3189
  searchPaddingHorizontal: 10,
3172
3190
  searchPaddingVertical: 7,