@xsolla/xui-slider 0.89.0 → 0.91.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.js +34 -297
- package/native/index.js.map +1 -1
- package/native/index.mjs +13 -266
- package/native/index.mjs.map +1 -1
- package/package.json +5 -4
- package/web/index.js +34 -281
- package/web/index.js.map +1 -1
- package/web/index.mjs +13 -260
- package/web/index.mjs.map +1 -1
package/native/index.mjs
CHANGED
|
@@ -206,263 +206,10 @@ var Text = ({
|
|
|
206
206
|
return /* @__PURE__ */ jsx2(RNText, { style, testID: id, accessibilityRole, children });
|
|
207
207
|
};
|
|
208
208
|
|
|
209
|
-
// ../primitives-native/src/Spinner.tsx
|
|
210
|
-
import { ActivityIndicator, View as View2 } from "react-native";
|
|
211
|
-
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
212
|
-
var Spinner = ({
|
|
213
|
-
color,
|
|
214
|
-
size,
|
|
215
|
-
role,
|
|
216
|
-
"aria-label": ariaLabel,
|
|
217
|
-
"aria-live": ariaLive,
|
|
218
|
-
testID
|
|
219
|
-
}) => {
|
|
220
|
-
return /* @__PURE__ */ jsx3(
|
|
221
|
-
View2,
|
|
222
|
-
{
|
|
223
|
-
accessible: true,
|
|
224
|
-
accessibilityRole: role === "status" ? "none" : void 0,
|
|
225
|
-
accessibilityLabel: ariaLabel,
|
|
226
|
-
accessibilityLiveRegion: ariaLive === "polite" ? "polite" : ariaLive === "assertive" ? "assertive" : "none",
|
|
227
|
-
testID,
|
|
228
|
-
children: /* @__PURE__ */ jsx3(
|
|
229
|
-
ActivityIndicator,
|
|
230
|
-
{
|
|
231
|
-
color,
|
|
232
|
-
size: typeof size === "number" ? size : "small"
|
|
233
|
-
}
|
|
234
|
-
)
|
|
235
|
-
}
|
|
236
|
-
);
|
|
237
|
-
};
|
|
238
|
-
Spinner.displayName = "Spinner";
|
|
239
|
-
|
|
240
|
-
// ../primitives-native/src/Icon.tsx
|
|
241
|
-
import React from "react";
|
|
242
|
-
import { View as View3 } from "react-native";
|
|
243
|
-
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
244
|
-
|
|
245
|
-
// ../primitives-native/src/Divider.tsx
|
|
246
|
-
import { View as View4 } from "react-native";
|
|
247
|
-
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
248
|
-
|
|
249
|
-
// ../primitives-native/src/Input.tsx
|
|
250
|
-
import { forwardRef } from "react";
|
|
251
|
-
import { TextInput as RNTextInput } from "react-native";
|
|
252
|
-
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
253
|
-
var keyboardTypeMap = {
|
|
254
|
-
text: "default",
|
|
255
|
-
number: "numeric",
|
|
256
|
-
email: "email-address",
|
|
257
|
-
tel: "phone-pad",
|
|
258
|
-
url: "url",
|
|
259
|
-
decimal: "decimal-pad"
|
|
260
|
-
};
|
|
261
|
-
var inputModeToKeyboardType = {
|
|
262
|
-
none: "default",
|
|
263
|
-
text: "default",
|
|
264
|
-
decimal: "decimal-pad",
|
|
265
|
-
numeric: "number-pad",
|
|
266
|
-
tel: "phone-pad",
|
|
267
|
-
search: "default",
|
|
268
|
-
email: "email-address",
|
|
269
|
-
url: "url"
|
|
270
|
-
};
|
|
271
|
-
var autoCompleteToTextContentType = {
|
|
272
|
-
"one-time-code": "oneTimeCode",
|
|
273
|
-
email: "emailAddress",
|
|
274
|
-
username: "username",
|
|
275
|
-
password: "password",
|
|
276
|
-
"new-password": "newPassword",
|
|
277
|
-
tel: "telephoneNumber",
|
|
278
|
-
"postal-code": "postalCode",
|
|
279
|
-
name: "name"
|
|
280
|
-
};
|
|
281
|
-
var InputPrimitive = forwardRef(
|
|
282
|
-
({
|
|
283
|
-
value,
|
|
284
|
-
placeholder,
|
|
285
|
-
onChange,
|
|
286
|
-
onChangeText,
|
|
287
|
-
onFocus,
|
|
288
|
-
onBlur,
|
|
289
|
-
onKeyDown,
|
|
290
|
-
disabled,
|
|
291
|
-
secureTextEntry,
|
|
292
|
-
style,
|
|
293
|
-
color,
|
|
294
|
-
fontSize,
|
|
295
|
-
placeholderTextColor,
|
|
296
|
-
maxLength,
|
|
297
|
-
type,
|
|
298
|
-
inputMode,
|
|
299
|
-
autoComplete,
|
|
300
|
-
id,
|
|
301
|
-
"aria-describedby": ariaDescribedBy,
|
|
302
|
-
"aria-label": ariaLabel,
|
|
303
|
-
"aria-disabled": ariaDisabled,
|
|
304
|
-
"data-testid": dataTestId
|
|
305
|
-
}, ref) => {
|
|
306
|
-
const handleChangeText = (text) => {
|
|
307
|
-
onChangeText?.(text);
|
|
308
|
-
if (onChange) {
|
|
309
|
-
const syntheticEvent = {
|
|
310
|
-
target: { value: text },
|
|
311
|
-
currentTarget: { value: text },
|
|
312
|
-
type: "change",
|
|
313
|
-
nativeEvent: { text },
|
|
314
|
-
preventDefault: () => {
|
|
315
|
-
},
|
|
316
|
-
stopPropagation: () => {
|
|
317
|
-
},
|
|
318
|
-
isTrusted: false
|
|
319
|
-
};
|
|
320
|
-
onChange(syntheticEvent);
|
|
321
|
-
}
|
|
322
|
-
};
|
|
323
|
-
const keyboardType = inputMode ? inputModeToKeyboardType[inputMode] || "default" : type ? keyboardTypeMap[type] || "default" : "default";
|
|
324
|
-
const textContentType = autoComplete ? autoCompleteToTextContentType[autoComplete] : void 0;
|
|
325
|
-
return /* @__PURE__ */ jsx6(
|
|
326
|
-
RNTextInput,
|
|
327
|
-
{
|
|
328
|
-
ref,
|
|
329
|
-
value,
|
|
330
|
-
placeholder,
|
|
331
|
-
onChangeText: handleChangeText,
|
|
332
|
-
onFocus,
|
|
333
|
-
onBlur,
|
|
334
|
-
onKeyPress: (e) => {
|
|
335
|
-
if (onKeyDown) {
|
|
336
|
-
onKeyDown({
|
|
337
|
-
key: e.nativeEvent.key,
|
|
338
|
-
preventDefault: () => {
|
|
339
|
-
}
|
|
340
|
-
});
|
|
341
|
-
}
|
|
342
|
-
},
|
|
343
|
-
editable: !disabled,
|
|
344
|
-
secureTextEntry: secureTextEntry || type === "password",
|
|
345
|
-
keyboardType,
|
|
346
|
-
textContentType,
|
|
347
|
-
style: [
|
|
348
|
-
{
|
|
349
|
-
color,
|
|
350
|
-
fontSize: typeof fontSize === "number" ? fontSize : void 0,
|
|
351
|
-
flex: 1,
|
|
352
|
-
padding: 0,
|
|
353
|
-
textAlign: style?.textAlign || "left"
|
|
354
|
-
},
|
|
355
|
-
style
|
|
356
|
-
],
|
|
357
|
-
placeholderTextColor,
|
|
358
|
-
maxLength,
|
|
359
|
-
testID: dataTestId || id,
|
|
360
|
-
accessibilityLabel: ariaLabel,
|
|
361
|
-
accessibilityHint: ariaDescribedBy,
|
|
362
|
-
accessibilityState: {
|
|
363
|
-
disabled: disabled || ariaDisabled
|
|
364
|
-
},
|
|
365
|
-
accessible: true
|
|
366
|
-
}
|
|
367
|
-
);
|
|
368
|
-
}
|
|
369
|
-
);
|
|
370
|
-
InputPrimitive.displayName = "InputPrimitive";
|
|
371
|
-
|
|
372
|
-
// ../primitives-native/src/TextArea.tsx
|
|
373
|
-
import { forwardRef as forwardRef2 } from "react";
|
|
374
|
-
import { TextInput as RNTextInput2 } from "react-native";
|
|
375
|
-
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
376
|
-
var TextAreaPrimitive = forwardRef2(
|
|
377
|
-
({
|
|
378
|
-
value,
|
|
379
|
-
placeholder,
|
|
380
|
-
onChange,
|
|
381
|
-
onChangeText,
|
|
382
|
-
onFocus,
|
|
383
|
-
onBlur,
|
|
384
|
-
onKeyDown,
|
|
385
|
-
disabled,
|
|
386
|
-
style,
|
|
387
|
-
color,
|
|
388
|
-
fontSize,
|
|
389
|
-
placeholderTextColor,
|
|
390
|
-
maxLength,
|
|
391
|
-
rows,
|
|
392
|
-
id,
|
|
393
|
-
"aria-describedby": ariaDescribedBy,
|
|
394
|
-
"aria-label": ariaLabel,
|
|
395
|
-
"aria-disabled": ariaDisabled,
|
|
396
|
-
"data-testid": dataTestId
|
|
397
|
-
}, ref) => {
|
|
398
|
-
const handleChangeText = (text) => {
|
|
399
|
-
onChangeText?.(text);
|
|
400
|
-
if (onChange) {
|
|
401
|
-
const syntheticEvent = {
|
|
402
|
-
target: { value: text },
|
|
403
|
-
currentTarget: { value: text },
|
|
404
|
-
type: "change",
|
|
405
|
-
nativeEvent: { text },
|
|
406
|
-
preventDefault: () => {
|
|
407
|
-
},
|
|
408
|
-
stopPropagation: () => {
|
|
409
|
-
},
|
|
410
|
-
isTrusted: false
|
|
411
|
-
};
|
|
412
|
-
onChange(syntheticEvent);
|
|
413
|
-
}
|
|
414
|
-
};
|
|
415
|
-
return /* @__PURE__ */ jsx7(
|
|
416
|
-
RNTextInput2,
|
|
417
|
-
{
|
|
418
|
-
ref,
|
|
419
|
-
value,
|
|
420
|
-
placeholder,
|
|
421
|
-
onChangeText: handleChangeText,
|
|
422
|
-
onFocus,
|
|
423
|
-
onBlur,
|
|
424
|
-
onKeyPress: (e) => {
|
|
425
|
-
if (onKeyDown) {
|
|
426
|
-
onKeyDown({
|
|
427
|
-
key: e.nativeEvent.key,
|
|
428
|
-
preventDefault: () => {
|
|
429
|
-
}
|
|
430
|
-
});
|
|
431
|
-
}
|
|
432
|
-
},
|
|
433
|
-
editable: !disabled,
|
|
434
|
-
multiline: true,
|
|
435
|
-
numberOfLines: rows || 4,
|
|
436
|
-
style: [
|
|
437
|
-
{
|
|
438
|
-
color,
|
|
439
|
-
fontSize: typeof fontSize === "number" ? fontSize : void 0,
|
|
440
|
-
flex: 1,
|
|
441
|
-
padding: 0,
|
|
442
|
-
textAlignVertical: "top",
|
|
443
|
-
textAlign: style?.textAlign || "left"
|
|
444
|
-
},
|
|
445
|
-
style
|
|
446
|
-
],
|
|
447
|
-
placeholderTextColor,
|
|
448
|
-
maxLength,
|
|
449
|
-
testID: dataTestId || id,
|
|
450
|
-
accessibilityLabel: ariaLabel,
|
|
451
|
-
accessibilityHint: ariaDescribedBy,
|
|
452
|
-
accessibilityState: {
|
|
453
|
-
disabled: disabled || ariaDisabled
|
|
454
|
-
},
|
|
455
|
-
accessible: true
|
|
456
|
-
}
|
|
457
|
-
);
|
|
458
|
-
}
|
|
459
|
-
);
|
|
460
|
-
TextAreaPrimitive.displayName = "TextAreaPrimitive";
|
|
461
|
-
|
|
462
209
|
// src/Slider.tsx
|
|
463
210
|
import { useDesignSystem, useId } from "@xsolla/xui-core";
|
|
464
211
|
import { Input } from "@xsolla/xui-input";
|
|
465
|
-
import { Fragment, jsx as
|
|
212
|
+
import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
|
|
466
213
|
var sizeConfig = {
|
|
467
214
|
xl: {
|
|
468
215
|
height: 56,
|
|
@@ -902,7 +649,7 @@ var Slider = ({
|
|
|
902
649
|
const inputIconLeft = iconInside && effectiveIconPosition === "left" ? iconInside : void 0;
|
|
903
650
|
const inputIconRight = iconInside && effectiveIconPosition === "right" ? iconInside : void 0;
|
|
904
651
|
const inputWidth = iconInside ? sizing.inputWidth + sizing.inputIconSize + sizing.inputIconGap : sizing.inputWidth;
|
|
905
|
-
return /* @__PURE__ */
|
|
652
|
+
return /* @__PURE__ */ jsx3(Box, { width: inputWidth, flexShrink: 0, children: /* @__PURE__ */ jsx3(
|
|
906
653
|
Input,
|
|
907
654
|
{
|
|
908
655
|
value: String(inputValue),
|
|
@@ -928,7 +675,7 @@ var Slider = ({
|
|
|
928
675
|
const thumbAriaLabel = range ? thumbType === "min" ? minThumbAriaLabel : maxThumbAriaLabel : ariaLabel || label || "Slider value";
|
|
929
676
|
const currentThumbBg = thumbHovered && !disabled ? thumbBgHoverColor : thumbBgColor;
|
|
930
677
|
const thumbBaseBg = disabled ? theme.colors.background.primary : currentThumbBg;
|
|
931
|
-
return /* @__PURE__ */
|
|
678
|
+
return /* @__PURE__ */ jsx3(
|
|
932
679
|
Box,
|
|
933
680
|
{
|
|
934
681
|
role: "slider",
|
|
@@ -970,7 +717,7 @@ var Slider = ({
|
|
|
970
717
|
"aria-valuemin": range && thumbType === "max" ? rangeMin + step : min,
|
|
971
718
|
"aria-valuemax": range && thumbType === "min" ? rangeMax - step : max,
|
|
972
719
|
"aria-orientation": "horizontal",
|
|
973
|
-
children: disabled && /* @__PURE__ */
|
|
720
|
+
children: disabled && /* @__PURE__ */ jsx3(
|
|
974
721
|
Box,
|
|
975
722
|
{
|
|
976
723
|
position: "absolute",
|
|
@@ -997,7 +744,7 @@ var Slider = ({
|
|
|
997
744
|
onMouseEnter: () => setIsHovered(true),
|
|
998
745
|
onMouseLeave: () => setIsHovered(false),
|
|
999
746
|
children: [
|
|
1000
|
-
label && /* @__PURE__ */
|
|
747
|
+
label && /* @__PURE__ */ jsx3(
|
|
1001
748
|
Text,
|
|
1002
749
|
{
|
|
1003
750
|
id: labelId,
|
|
@@ -1015,7 +762,7 @@ var Slider = ({
|
|
|
1015
762
|
height: sizing.height,
|
|
1016
763
|
children: [
|
|
1017
764
|
(inputPosition === "left" || inputPosition === "both") && (range ? renderInput(rangeMin, "min", "left") : renderInput(value, "single", "left")),
|
|
1018
|
-
iconLeft && /* @__PURE__ */
|
|
765
|
+
iconLeft && /* @__PURE__ */ jsx3(
|
|
1019
766
|
Box,
|
|
1020
767
|
{
|
|
1021
768
|
flexShrink: 0,
|
|
@@ -1027,7 +774,7 @@ var Slider = ({
|
|
|
1027
774
|
children: iconLeft
|
|
1028
775
|
}
|
|
1029
776
|
),
|
|
1030
|
-
showLabels && /* @__PURE__ */
|
|
777
|
+
showLabels && /* @__PURE__ */ jsx3(
|
|
1031
778
|
Text,
|
|
1032
779
|
{
|
|
1033
780
|
color: disabled ? inputColors.textDisable : inputColors.text,
|
|
@@ -1036,7 +783,7 @@ var Slider = ({
|
|
|
1036
783
|
children: min
|
|
1037
784
|
}
|
|
1038
785
|
),
|
|
1039
|
-
/* @__PURE__ */
|
|
786
|
+
/* @__PURE__ */ jsx3(
|
|
1040
787
|
Box,
|
|
1041
788
|
{
|
|
1042
789
|
flex: 1,
|
|
@@ -1044,7 +791,7 @@ var Slider = ({
|
|
|
1044
791
|
height: sizing.height,
|
|
1045
792
|
alignItems: "center",
|
|
1046
793
|
justifyContent: "center",
|
|
1047
|
-
children: /* @__PURE__ */
|
|
794
|
+
children: /* @__PURE__ */ jsx3(
|
|
1048
795
|
Box,
|
|
1049
796
|
{
|
|
1050
797
|
ref: trackRef,
|
|
@@ -1063,7 +810,7 @@ var Slider = ({
|
|
|
1063
810
|
onResponderRelease: handleResponderRelease,
|
|
1064
811
|
onResponderTerminate: handleResponderRelease,
|
|
1065
812
|
children: range ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1066
|
-
/* @__PURE__ */
|
|
813
|
+
/* @__PURE__ */ jsx3(
|
|
1067
814
|
Box,
|
|
1068
815
|
{
|
|
1069
816
|
position: "absolute",
|
|
@@ -1078,7 +825,7 @@ var Slider = ({
|
|
|
1078
825
|
renderThumb(rangeMinPercentage, "min"),
|
|
1079
826
|
renderThumb(rangeMaxPercentage, "max")
|
|
1080
827
|
] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1081
|
-
/* @__PURE__ */
|
|
828
|
+
/* @__PURE__ */ jsx3(
|
|
1082
829
|
Box,
|
|
1083
830
|
{
|
|
1084
831
|
position: "absolute",
|
|
@@ -1096,7 +843,7 @@ var Slider = ({
|
|
|
1096
843
|
)
|
|
1097
844
|
}
|
|
1098
845
|
),
|
|
1099
|
-
showLabels && /* @__PURE__ */
|
|
846
|
+
showLabels && /* @__PURE__ */ jsx3(
|
|
1100
847
|
Text,
|
|
1101
848
|
{
|
|
1102
849
|
color: disabled ? inputColors.textDisable : inputColors.text,
|
|
@@ -1105,7 +852,7 @@ var Slider = ({
|
|
|
1105
852
|
children: max
|
|
1106
853
|
}
|
|
1107
854
|
),
|
|
1108
|
-
iconRight && /* @__PURE__ */
|
|
855
|
+
iconRight && /* @__PURE__ */ jsx3(
|
|
1109
856
|
Box,
|
|
1110
857
|
{
|
|
1111
858
|
flexShrink: 0,
|