@xsolla/xui-progress-bar 0.141.0 → 0.147.1

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.
Files changed (14) hide show
  1. package/native/index.d.mts +15 -3
  2. package/native/index.d.ts +15 -3
  3. package/native/index.js +110 -69
  4. package/native/index.js.map +1 -1
  5. package/native/index.mjs +114 -70
  6. package/native/index.mjs.map +1 -1
  7. package/package.json +4 -3
  8. package/web/index.d.mts +15 -3
  9. package/web/index.d.ts +15 -3
  10. package/web/index.js +115 -74
  11. package/web/index.js.map +1 -1
  12. package/web/index.mjs +119 -75
  13. package/web/index.mjs.map +1 -1
  14. package/README.md +0 -79
package/native/index.d.mts CHANGED
@@ -5,7 +5,7 @@ interface ProgressBarProps extends ThemeOverrideProps {
5
5
  /**
6
6
  * Size of the progress bar
7
7
  */
8
- size?: "xl" | "lg" | "md" | "sm" | "xs";
8
+ size?: "l" | "m" | "s" | "xl" | "lg" | "md" | "sm" | "xs";
9
9
  /**
10
10
  * Current state of the progress bar
11
11
  */
@@ -18,6 +18,18 @@ interface ProgressBarProps extends ThemeOverrideProps {
18
18
  * Optional label text
19
19
  */
20
20
  label?: string;
21
+ /**
22
+ * Whether to show the label
23
+ */
24
+ showLabel?: boolean;
25
+ /**
26
+ * Whether to show the info icon on the right of the label
27
+ */
28
+ showInfoIcon?: boolean;
29
+ /**
30
+ * Whether to show the status icon
31
+ */
32
+ showStatusIcon?: boolean;
21
33
  /**
22
34
  * Optional helper text
23
35
  */
@@ -27,11 +39,11 @@ interface ProgressBarProps extends ThemeOverrideProps {
27
39
  */
28
40
  errorMessage?: string;
29
41
  /**
30
- * Optional icon to show with label
42
+ * Optional icon to show on the left of the label
31
43
  */
32
44
  labelIcon?: React.ReactNode;
33
45
  /**
34
- * Optional status icon
46
+ * Optional status icon (overrides default status icon)
35
47
  */
36
48
  statusIcon?: React.ReactNode;
37
49
  }
package/native/index.d.ts CHANGED
@@ -5,7 +5,7 @@ interface ProgressBarProps extends ThemeOverrideProps {
5
5
  /**
6
6
  * Size of the progress bar
7
7
  */
8
- size?: "xl" | "lg" | "md" | "sm" | "xs";
8
+ size?: "l" | "m" | "s" | "xl" | "lg" | "md" | "sm" | "xs";
9
9
  /**
10
10
  * Current state of the progress bar
11
11
  */
@@ -18,6 +18,18 @@ interface ProgressBarProps extends ThemeOverrideProps {
18
18
  * Optional label text
19
19
  */
20
20
  label?: string;
21
+ /**
22
+ * Whether to show the label
23
+ */
24
+ showLabel?: boolean;
25
+ /**
26
+ * Whether to show the info icon on the right of the label
27
+ */
28
+ showInfoIcon?: boolean;
29
+ /**
30
+ * Whether to show the status icon
31
+ */
32
+ showStatusIcon?: boolean;
21
33
  /**
22
34
  * Optional helper text
23
35
  */
@@ -27,11 +39,11 @@ interface ProgressBarProps extends ThemeOverrideProps {
27
39
  */
28
40
  errorMessage?: string;
29
41
  /**
30
- * Optional icon to show with label
42
+ * Optional icon to show on the left of the label
31
43
  */
32
44
  labelIcon?: React.ReactNode;
33
45
  /**
34
- * Optional status icon
46
+ * Optional status icon (overrides default status icon)
35
47
  */
36
48
  statusIcon?: React.ReactNode;
37
49
  }
package/native/index.js CHANGED
@@ -34,7 +34,7 @@ __export(index_exports, {
34
34
  });
35
35
  module.exports = __toCommonJS(index_exports);
36
36
 
37
- // ../primitives-native/src/Box.tsx
37
+ // ../../foundation/primitives-native/src/Box.tsx
38
38
  var import_react_native = require("react-native");
39
39
  var import_jsx_runtime = require("react/jsx-runtime");
40
40
  var Box = ({
@@ -208,7 +208,7 @@ var Box = ({
208
208
  );
209
209
  };
210
210
 
211
- // ../primitives-native/src/Text.tsx
211
+ // ../../foundation/primitives-native/src/Text.tsx
212
212
  var import_react_native2 = require("react-native");
213
213
  var import_jsx_runtime2 = require("react/jsx-runtime");
214
214
  var roleMap = {
@@ -271,7 +271,7 @@ var Text = ({
271
271
  );
272
272
  };
273
273
 
274
- // ../primitives-native/src/Icon.tsx
274
+ // ../../foundation/primitives-native/src/Icon.tsx
275
275
  var import_react = __toESM(require("react"));
276
276
  var import_react_native3 = require("react-native");
277
277
  var import_jsx_runtime3 = require("react/jsx-runtime");
@@ -296,13 +296,17 @@ var Icon = ({ children, color, size }) => {
296
296
  };
297
297
 
298
298
  // src/ProgressBar.tsx
299
+ var import_xui_icons = require("@xsolla/xui-icons");
299
300
  var import_xui_core = require("@xsolla/xui-core");
300
301
  var import_jsx_runtime4 = require("react/jsx-runtime");
301
302
  var ProgressBar = ({
302
- size = "md",
303
+ size = "m",
303
304
  state = "default",
304
305
  percent = 0,
305
306
  label,
307
+ showLabel = true,
308
+ showInfoIcon = false,
309
+ showStatusIcon = true,
306
310
  helperText,
307
311
  errorMessage,
308
312
  labelIcon,
@@ -315,79 +319,116 @@ var ProgressBar = ({
315
319
  const validPercent = Math.min(Math.max(0, percent), 100);
316
320
  const isError = state === "error";
317
321
  const isSuccess = state === "success";
318
- const showErrorMessage = isError && errorMessage;
319
- let progressColor = theme.colors.content.brand.primary;
322
+ const helperId = (0, import_xui_core.useId)();
323
+ let progressColor = theme.colors.background.brand.primary;
324
+ let statusIconColor = progressColor;
320
325
  if (isError) {
321
- progressColor = theme.colors.content.alert.primary;
326
+ progressColor = theme.colors.background.alert.primary;
327
+ statusIconColor = theme.colors.content.alert.primary;
322
328
  } else if (isSuccess) {
323
- progressColor = theme.colors.content.success.primary;
329
+ progressColor = theme.colors.background.success.primary;
330
+ statusIconColor = progressColor;
324
331
  }
325
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Box, { flexDirection: "column", width: "100%", gap: sizeStyles.gap, children: [
326
- (label || labelIcon || statusIcon && !label) && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
327
- Box,
328
- {
329
- flexDirection: "row",
330
- alignItems: "center",
331
- justifyContent: "space-between",
332
- children: [
333
- /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Box, { flexDirection: "row", alignItems: "center", gap: 8, children: [
334
- labelIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
335
- Icon,
336
- {
337
- size: sizeStyles.labelSize,
338
- color: theme.colors.content.secondary,
339
- children: labelIcon
340
- }
341
- ),
342
- label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
343
- Text,
332
+ const renderStatusIcon = () => {
333
+ if (statusIcon) return statusIcon;
334
+ if (!showStatusIcon) return null;
335
+ if (isError) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_xui_icons.AlertCircle, { size: "100%" });
336
+ if (isSuccess) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_xui_icons.Check, { size: "100%" });
337
+ return null;
338
+ };
339
+ const currentStatusIcon = renderStatusIcon();
340
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
341
+ Box,
342
+ {
343
+ flexDirection: "column",
344
+ width: "100%",
345
+ gap: sizeStyles.gap,
346
+ role: "progressbar",
347
+ "aria-valuenow": validPercent,
348
+ "aria-valuemin": 0,
349
+ "aria-valuemax": 100,
350
+ "aria-describedby": helperText || errorMessage ? helperId : void 0,
351
+ children: [
352
+ showLabel && (label || labelIcon || showInfoIcon || currentStatusIcon) && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
353
+ Box,
354
+ {
355
+ flexDirection: "row",
356
+ alignItems: "center",
357
+ justifyContent: "space-between",
358
+ children: [
359
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Box, { flexDirection: "row", alignItems: "center", gap: 6, children: [
360
+ labelIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
361
+ Icon,
362
+ {
363
+ size: sizeStyles.labelSize,
364
+ color: theme.colors.content.tertiary,
365
+ children: labelIcon
366
+ }
367
+ ),
368
+ label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
369
+ Text,
370
+ {
371
+ color: theme.colors.content.tertiary,
372
+ fontSize: sizeStyles.labelSize,
373
+ fontWeight: "400",
374
+ children: label
375
+ }
376
+ ),
377
+ showInfoIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
378
+ Icon,
379
+ {
380
+ size: sizeStyles.labelSize,
381
+ color: theme.colors.content.tertiary,
382
+ children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_xui_icons.Info, { size: "100%" })
383
+ }
384
+ )
385
+ ] }),
386
+ currentStatusIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { size: sizeStyles.labelSize, color: statusIconColor, children: currentStatusIcon })
387
+ ]
388
+ }
389
+ ),
390
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
391
+ Box,
392
+ {
393
+ height: sizeStyles.height,
394
+ backgroundColor: theme.colors.overlay.mono,
395
+ borderRadius: 100,
396
+ overflow: "hidden",
397
+ width: "100%",
398
+ children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
399
+ Box,
344
400
  {
345
- color: theme.colors.content.secondary,
346
- fontSize: sizeStyles.labelSize,
347
- fontWeight: "500",
348
- children: label
401
+ height: "100%",
402
+ backgroundColor: progressColor,
403
+ borderRadius: 100,
404
+ style: {
405
+ width: `${validPercent}%`,
406
+ transition: "width 300ms ease-in-out"
407
+ }
349
408
  }
350
409
  )
351
- ] }),
352
- statusIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { size: sizeStyles.labelSize, color: progressColor, children: statusIcon })
353
- ]
354
- }
355
- ),
356
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
357
- Box,
358
- {
359
- height: sizeStyles.height,
360
- backgroundColor: theme.colors.control.input.bg,
361
- borderRadius: 100,
362
- overflow: "hidden",
363
- width: "100%",
364
- children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
365
- Box,
410
+ }
411
+ ),
412
+ isError && errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
413
+ Text,
366
414
  {
367
- height: "100%",
368
- width: `${validPercent}%`,
369
- backgroundColor: progressColor,
370
- borderRadius: 100
415
+ id: helperId,
416
+ color: theme.colors.content.alert.primary,
417
+ fontSize: sizeStyles.helperSize,
418
+ children: errorMessage
371
419
  }
372
- )
373
- }
374
- ),
375
- showErrorMessage ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
376
- Text,
377
- {
378
- color: theme.colors.content.alert.primary,
379
- fontSize: sizeStyles.helperSize,
380
- children: errorMessage
381
- }
382
- ) : helperText ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
383
- Text,
384
- {
385
- color: theme.colors.content.secondary,
386
- fontSize: sizeStyles.helperSize,
387
- children: helperText
388
- }
389
- ) : null
390
- ] });
420
+ ) : helperText ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
421
+ Text,
422
+ {
423
+ id: helperId,
424
+ color: theme.colors.content.tertiary,
425
+ fontSize: sizeStyles.helperSize,
426
+ children: helperText
427
+ }
428
+ ) : null
429
+ ]
430
+ }
431
+ );
391
432
  };
392
433
  // Annotate the CommonJS export names for ESM import in node:
393
434
  0 && (module.exports = {
package/native/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/index.tsx","../../../primitives-native/src/Box.tsx","../../../primitives-native/src/Text.tsx","../../../primitives-native/src/Icon.tsx","../../src/ProgressBar.tsx"],"sourcesContent":["export * from \"./ProgressBar\";\n","import React from \"react\";\nimport {\n View,\n Pressable,\n Image,\n ViewStyle,\n ImageStyle,\n DimensionValue,\n AnimatableNumericValue,\n} from \"react-native\";\nimport { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Box: React.FC<BoxProps> = ({\n children,\n onPress,\n onLayout,\n onMoveShouldSetResponder,\n onResponderGrant,\n onResponderMove,\n onResponderRelease,\n onResponderTerminate,\n backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius,\n borderStyle,\n height,\n padding,\n paddingHorizontal,\n paddingVertical,\n margin,\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n flexDirection,\n alignItems,\n justifyContent,\n position,\n top,\n bottom,\n left,\n right,\n width,\n minWidth,\n minHeight,\n maxWidth,\n maxHeight,\n flex,\n overflow,\n zIndex,\n hoverStyle,\n pressStyle,\n style,\n \"data-testid\": dataTestId,\n testID,\n as,\n src,\n alt,\n ...rest\n}) => {\n const getContainerStyle = (pressed?: boolean): ViewStyle => ({\n backgroundColor:\n pressed && pressStyle?.backgroundColor\n ? pressStyle.backgroundColor\n : backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius: borderRadius as AnimatableNumericValue,\n borderStyle: borderStyle as ViewStyle[\"borderStyle\"],\n overflow,\n zIndex,\n height: height as DimensionValue,\n width: width as DimensionValue,\n minWidth: minWidth as DimensionValue,\n minHeight: minHeight as DimensionValue,\n maxWidth: maxWidth as DimensionValue,\n maxHeight: maxHeight as DimensionValue,\n padding: padding as DimensionValue,\n paddingHorizontal: paddingHorizontal as DimensionValue,\n paddingVertical: paddingVertical as DimensionValue,\n margin: margin as DimensionValue,\n marginTop: marginTop as DimensionValue,\n marginBottom: marginBottom as DimensionValue,\n marginLeft: marginLeft as DimensionValue,\n marginRight: marginRight as DimensionValue,\n flexDirection,\n alignItems,\n justifyContent,\n position: position as ViewStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n flex,\n ...(style as ViewStyle),\n });\n\n const finalTestID = dataTestId || testID;\n\n // Destructure and drop web-only props from rest before passing to RN components\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const {\n role,\n tabIndex,\n onKeyDown,\n onKeyUp,\n \"aria-label\": _ariaLabel,\n \"aria-labelledby\": _ariaLabelledBy,\n \"aria-current\": _ariaCurrent,\n \"aria-disabled\": _ariaDisabled,\n \"aria-live\": _ariaLive,\n className,\n \"data-testid\": _dataTestId,\n ...nativeRest\n } = rest as Record<string, unknown>;\n\n // Handle as=\"img\" for React Native\n if (as === \"img\" && src) {\n const imageStyle: ImageStyle = {\n width: width as DimensionValue,\n height: height as DimensionValue,\n borderRadius: borderRadius as number,\n position: position as ImageStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n ...(style as ImageStyle),\n };\n\n return (\n <Image\n source={{ uri: src }}\n style={imageStyle}\n testID={finalTestID}\n resizeMode=\"cover\"\n {...nativeRest}\n />\n );\n }\n\n if (onPress) {\n return (\n <Pressable\n onPress={onPress}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n style={({ pressed }) => getContainerStyle(pressed)}\n testID={finalTestID}\n {...nativeRest}\n >\n {children}\n </Pressable>\n );\n }\n\n return (\n <View\n style={getContainerStyle()}\n testID={finalTestID}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n {...nativeRest}\n >\n {children}\n </View>\n );\n};\n","import React from \"react\";\nimport {\n Text as RNText,\n TextStyle,\n AccessibilityRole,\n StyleSheet,\n} from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst roleMap: Record<string, AccessibilityRole> = {\n alert: \"alert\",\n heading: \"header\",\n button: \"button\",\n link: \"link\",\n text: \"text\",\n};\n\nconst parseNumericValue = (\n value: string | number | undefined\n): number | undefined => {\n if (value === undefined) return undefined;\n if (typeof value === \"number\") return value;\n const parsed = parseFloat(value);\n return isNaN(parsed) ? undefined : parsed;\n};\n\nexport const Text: React.FC<TextProps> = ({\n children,\n color,\n fontSize,\n fontWeight,\n fontFamily,\n textAlign,\n lineHeight,\n numberOfLines,\n id,\n role,\n style: styleProp,\n ...props\n}) => {\n let resolvedFontFamily = fontFamily\n ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n : undefined;\n\n if (\n resolvedFontFamily === \"Pilat Wide\" ||\n resolvedFontFamily === \"Pilat Wide Bold\" ||\n resolvedFontFamily === \"Aktiv Grotesk\"\n ) {\n resolvedFontFamily = undefined;\n }\n\n const incomingStyle = StyleSheet.flatten(styleProp) as TextStyle | undefined;\n\n const baseStyle: TextStyle = {\n color: color ?? incomingStyle?.color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n fontWeight: fontWeight as TextStyle[\"fontWeight\"],\n fontFamily: resolvedFontFamily,\n textDecorationLine: props.textDecoration as TextStyle[\"textDecorationLine\"],\n textAlign: textAlign ?? incomingStyle?.textAlign,\n lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),\n marginTop: parseNumericValue(\n incomingStyle?.marginTop as number | string | undefined\n ),\n marginBottom: parseNumericValue(\n incomingStyle?.marginBottom as number | string | undefined\n ),\n };\n\n const accessibilityRole = role ? roleMap[role] : undefined;\n\n return (\n <RNText\n style={baseStyle}\n numberOfLines={numberOfLines}\n testID={id}\n accessibilityRole={accessibilityRole}\n >\n {children}\n </RNText>\n );\n};\n","import React from \"react\";\nimport { View, ViewStyle } from \"react-native\";\nimport { IconProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Icon: React.FC<IconProps> = ({ children, color, size }) => {\n const style: ViewStyle = {\n width: typeof size === \"number\" ? size : undefined,\n height: typeof size === \"number\" ? size : undefined,\n alignItems: \"center\",\n justifyContent: \"center\",\n };\n\n // On native, we try to pass the color down to children (like Text primitives)\n // to mimic the CSS inheritance behavior of the web version.\n const childrenWithProps = React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n return React.cloneElement(child, {\n color: child.props.color || color,\n // Also pass size if child seems to be an icon that needs it\n size: child.props.size || size,\n });\n }\n return child;\n });\n\n return <View style={style}>{childrenWithProps}</View>;\n};\n","import React from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text, Icon } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme, type ThemeOverrideProps } from \"@xsolla/xui-core\";\n\nexport interface ProgressBarProps extends ThemeOverrideProps {\n /**\n * Size of the progress bar\n */\n size?: \"xl\" | \"lg\" | \"md\" | \"sm\" | \"xs\";\n /**\n * Current state of the progress bar\n */\n state?: \"default\" | \"success\" | \"error\";\n /**\n * Progress percentage (0-100)\n */\n percent?: number;\n /**\n * Optional label text\n */\n label?: string;\n /**\n * Optional helper text\n */\n helperText?: string;\n /**\n * Optional error message (shown when state is 'error')\n */\n errorMessage?: string;\n /**\n * Optional icon to show with label\n */\n labelIcon?: React.ReactNode;\n /**\n * Optional status icon\n */\n statusIcon?: React.ReactNode;\n}\n\nexport const ProgressBar: React.FC<ProgressBarProps> = ({\n size = \"md\",\n state = \"default\",\n percent = 0,\n label,\n helperText,\n errorMessage,\n labelIcon,\n statusIcon,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const sizeStyles = theme.sizing.progress(size);\n const validPercent = Math.min(Math.max(0, percent), 100);\n\n const isError = state === \"error\";\n const isSuccess = state === \"success\";\n const showErrorMessage = isError && errorMessage;\n\n // Resolve colors based on state\n let progressColor = theme.colors.content.brand.primary;\n if (isError) {\n progressColor = theme.colors.content.alert.primary;\n } else if (isSuccess) {\n progressColor = theme.colors.content.success.primary;\n }\n\n return (\n <Box flexDirection=\"column\" width=\"100%\" gap={sizeStyles.gap}>\n {(label || labelIcon || (statusIcon && !label)) && (\n <Box\n flexDirection=\"row\"\n alignItems=\"center\"\n justifyContent=\"space-between\"\n >\n <Box flexDirection=\"row\" alignItems=\"center\" gap={8}>\n {labelIcon && (\n <Icon\n size={sizeStyles.labelSize}\n color={theme.colors.content.secondary}\n >\n {labelIcon}\n </Icon>\n )}\n {label && (\n <Text\n color={theme.colors.content.secondary}\n fontSize={sizeStyles.labelSize}\n fontWeight=\"500\"\n >\n {label}\n </Text>\n )}\n </Box>\n {statusIcon && (\n <Icon size={sizeStyles.labelSize} color={progressColor}>\n {statusIcon}\n </Icon>\n )}\n </Box>\n )}\n\n <Box\n height={sizeStyles.height}\n backgroundColor={theme.colors.control.input.bg}\n borderRadius={100}\n overflow=\"hidden\"\n width=\"100%\"\n >\n <Box\n height=\"100%\"\n width={`${validPercent}%`}\n backgroundColor={progressColor}\n borderRadius={100}\n />\n </Box>\n\n {showErrorMessage ? (\n <Text\n color={theme.colors.content.alert.primary}\n fontSize={sizeStyles.helperSize}\n >\n {errorMessage}\n </Text>\n ) : helperText ? (\n <Text\n color={theme.colors.content.secondary}\n fontSize={sizeStyles.helperSize}\n >\n {helperText}\n </Text>\n ) : null}\n </Box>\n );\n};\n"],"mappings":"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","names":["import_react_native","import_jsx_runtime","RNText","import_react_native","import_jsx_runtime","React","import_jsx_runtime"]}
1
+ {"version":3,"sources":["../../src/index.tsx","../../../../foundation/primitives-native/src/Box.tsx","../../../../foundation/primitives-native/src/Text.tsx","../../../../foundation/primitives-native/src/Icon.tsx","../../src/ProgressBar.tsx"],"sourcesContent":["export * from \"./ProgressBar\";\n","import React from \"react\";\nimport {\n View,\n Pressable,\n Image,\n ViewStyle,\n ImageStyle,\n DimensionValue,\n AnimatableNumericValue,\n} from \"react-native\";\nimport { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Box: React.FC<BoxProps> = ({\n children,\n onPress,\n onLayout,\n onMoveShouldSetResponder,\n onResponderGrant,\n onResponderMove,\n onResponderRelease,\n onResponderTerminate,\n backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius,\n borderStyle,\n height,\n padding,\n paddingHorizontal,\n paddingVertical,\n margin,\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n flexDirection,\n alignItems,\n justifyContent,\n position,\n top,\n bottom,\n left,\n right,\n width,\n minWidth,\n minHeight,\n maxWidth,\n maxHeight,\n flex,\n overflow,\n zIndex,\n hoverStyle,\n pressStyle,\n style,\n \"data-testid\": dataTestId,\n testID,\n as,\n src,\n alt,\n ...rest\n}) => {\n const getContainerStyle = (pressed?: boolean): ViewStyle => ({\n backgroundColor:\n pressed && pressStyle?.backgroundColor\n ? pressStyle.backgroundColor\n : backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius: borderRadius as AnimatableNumericValue,\n borderStyle: borderStyle as ViewStyle[\"borderStyle\"],\n overflow,\n zIndex,\n height: height as DimensionValue,\n width: width as DimensionValue,\n minWidth: minWidth as DimensionValue,\n minHeight: minHeight as DimensionValue,\n maxWidth: maxWidth as DimensionValue,\n maxHeight: maxHeight as DimensionValue,\n padding: padding as DimensionValue,\n paddingHorizontal: paddingHorizontal as DimensionValue,\n paddingVertical: paddingVertical as DimensionValue,\n margin: margin as DimensionValue,\n marginTop: marginTop as DimensionValue,\n marginBottom: marginBottom as DimensionValue,\n marginLeft: marginLeft as DimensionValue,\n marginRight: marginRight as DimensionValue,\n flexDirection,\n alignItems,\n justifyContent,\n position: position as ViewStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n flex,\n ...(style as ViewStyle),\n });\n\n const finalTestID = dataTestId || testID;\n\n // Destructure and drop web-only props from rest before passing to RN components\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const {\n role,\n tabIndex,\n onKeyDown,\n onKeyUp,\n \"aria-label\": _ariaLabel,\n \"aria-labelledby\": _ariaLabelledBy,\n \"aria-current\": _ariaCurrent,\n \"aria-disabled\": _ariaDisabled,\n \"aria-live\": _ariaLive,\n className,\n \"data-testid\": _dataTestId,\n ...nativeRest\n } = rest as Record<string, unknown>;\n\n // Handle as=\"img\" for React Native\n if (as === \"img\" && src) {\n const imageStyle: ImageStyle = {\n width: width as DimensionValue,\n height: height as DimensionValue,\n borderRadius: borderRadius as number,\n position: position as ImageStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n ...(style as ImageStyle),\n };\n\n return (\n <Image\n source={{ uri: src }}\n style={imageStyle}\n testID={finalTestID}\n resizeMode=\"cover\"\n {...nativeRest}\n />\n );\n }\n\n if (onPress) {\n return (\n <Pressable\n onPress={onPress}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n style={({ pressed }) => getContainerStyle(pressed)}\n testID={finalTestID}\n {...nativeRest}\n >\n {children}\n </Pressable>\n );\n }\n\n return (\n <View\n style={getContainerStyle()}\n testID={finalTestID}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n {...nativeRest}\n >\n {children}\n </View>\n );\n};\n","import React from \"react\";\nimport {\n Text as RNText,\n TextStyle,\n AccessibilityRole,\n StyleSheet,\n} from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst roleMap: Record<string, AccessibilityRole> = {\n alert: \"alert\",\n heading: \"header\",\n button: \"button\",\n link: \"link\",\n text: \"text\",\n};\n\nconst parseNumericValue = (\n value: string | number | undefined\n): number | undefined => {\n if (value === undefined) return undefined;\n if (typeof value === \"number\") return value;\n const parsed = parseFloat(value);\n return isNaN(parsed) ? undefined : parsed;\n};\n\nexport const Text: React.FC<TextProps> = ({\n children,\n color,\n fontSize,\n fontWeight,\n fontFamily,\n textAlign,\n lineHeight,\n numberOfLines,\n id,\n role,\n style: styleProp,\n ...props\n}) => {\n let resolvedFontFamily = fontFamily\n ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n : undefined;\n\n if (\n resolvedFontFamily === \"Pilat Wide\" ||\n resolvedFontFamily === \"Pilat Wide Bold\" ||\n resolvedFontFamily === \"Aktiv Grotesk\"\n ) {\n resolvedFontFamily = undefined;\n }\n\n const incomingStyle = StyleSheet.flatten(styleProp) as TextStyle | undefined;\n\n const baseStyle: TextStyle = {\n color: color ?? incomingStyle?.color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n fontWeight: fontWeight as TextStyle[\"fontWeight\"],\n fontFamily: resolvedFontFamily,\n textDecorationLine: props.textDecoration as TextStyle[\"textDecorationLine\"],\n textAlign: textAlign ?? incomingStyle?.textAlign,\n lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),\n marginTop: parseNumericValue(\n incomingStyle?.marginTop as number | string | undefined\n ),\n marginBottom: parseNumericValue(\n incomingStyle?.marginBottom as number | string | undefined\n ),\n };\n\n const accessibilityRole = role ? roleMap[role] : undefined;\n\n return (\n <RNText\n style={baseStyle}\n numberOfLines={numberOfLines}\n testID={id}\n accessibilityRole={accessibilityRole}\n >\n {children}\n </RNText>\n );\n};\n","import React from \"react\";\nimport { View, ViewStyle } from \"react-native\";\nimport { IconProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Icon: React.FC<IconProps> = ({ children, color, size }) => {\n const style: ViewStyle = {\n width: typeof size === \"number\" ? size : undefined,\n height: typeof size === \"number\" ? size : undefined,\n alignItems: \"center\",\n justifyContent: \"center\",\n };\n\n // On native, we try to pass the color down to children (like Text primitives)\n // to mimic the CSS inheritance behavior of the web version.\n const childrenWithProps = React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n return React.cloneElement(child, {\n color: child.props.color || color,\n // Also pass size if child seems to be an icon that needs it\n size: child.props.size || size,\n });\n }\n return child;\n });\n\n return <View style={style}>{childrenWithProps}</View>;\n};\n","import React from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text, Icon } from \"@xsolla/xui-primitives\";\nimport { Info, AlertCircle, Check } from \"@xsolla/xui-icons\";\nimport {\n useResolvedTheme,\n useId,\n type ThemeOverrideProps,\n} from \"@xsolla/xui-core\";\n\nexport interface ProgressBarProps extends ThemeOverrideProps {\n /**\n * Size of the progress bar\n */\n size?: \"l\" | \"m\" | \"s\" | \"xl\" | \"lg\" | \"md\" | \"sm\" | \"xs\";\n /**\n * Current state of the progress bar\n */\n state?: \"default\" | \"success\" | \"error\";\n /**\n * Progress percentage (0-100)\n */\n percent?: number;\n /**\n * Optional label text\n */\n label?: string;\n /**\n * Whether to show the label\n */\n showLabel?: boolean;\n /**\n * Whether to show the info icon on the right of the label\n */\n showInfoIcon?: boolean;\n /**\n * Whether to show the status icon\n */\n showStatusIcon?: boolean;\n /**\n * Optional helper text\n */\n helperText?: string;\n /**\n * Optional error message (shown when state is 'error')\n */\n errorMessage?: string;\n /**\n * Optional icon to show on the left of the label\n */\n labelIcon?: React.ReactNode;\n /**\n * Optional status icon (overrides default status icon)\n */\n statusIcon?: React.ReactNode;\n}\n\nexport const ProgressBar: React.FC<ProgressBarProps> = ({\n size = \"m\",\n state = \"default\",\n percent = 0,\n label,\n showLabel = true,\n showInfoIcon = false,\n showStatusIcon = true,\n helperText,\n errorMessage,\n labelIcon,\n statusIcon,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const sizeStyles = theme.sizing.progress(size);\n const validPercent = Math.min(Math.max(0, percent), 100);\n\n const isError = state === \"error\";\n const isSuccess = state === \"success\";\n\n const helperId = useId();\n\n // Resolve colors based on state\n let progressColor = theme.colors.background.brand.primary;\n let statusIconColor = progressColor;\n\n if (isError) {\n progressColor = theme.colors.background.alert.primary;\n statusIconColor = theme.colors.content.alert.primary;\n } else if (isSuccess) {\n progressColor = theme.colors.background.success.primary;\n statusIconColor = progressColor;\n }\n\n const renderStatusIcon = () => {\n if (statusIcon) return statusIcon;\n if (!showStatusIcon) return null;\n\n if (isError) return <AlertCircle size=\"100%\" />;\n if (isSuccess) return <Check size=\"100%\" />;\n\n return null;\n };\n\n const currentStatusIcon = renderStatusIcon();\n\n return (\n <Box\n flexDirection=\"column\"\n width=\"100%\"\n gap={sizeStyles.gap}\n role=\"progressbar\"\n aria-valuenow={validPercent}\n aria-valuemin={0}\n aria-valuemax={100}\n aria-describedby={helperText || errorMessage ? helperId : undefined}\n >\n {showLabel &&\n (label || labelIcon || showInfoIcon || currentStatusIcon) && (\n <Box\n flexDirection=\"row\"\n alignItems=\"center\"\n justifyContent=\"space-between\"\n >\n <Box flexDirection=\"row\" alignItems=\"center\" gap={6}>\n {labelIcon && (\n <Icon\n size={sizeStyles.labelSize}\n color={theme.colors.content.tertiary}\n >\n {labelIcon}\n </Icon>\n )}\n {label && (\n <Text\n color={theme.colors.content.tertiary}\n fontSize={sizeStyles.labelSize}\n fontWeight=\"400\"\n >\n {label}\n </Text>\n )}\n {showInfoIcon && (\n <Icon\n size={sizeStyles.labelSize}\n color={theme.colors.content.tertiary}\n >\n <Info size=\"100%\" />\n </Icon>\n )}\n </Box>\n {currentStatusIcon && (\n <Icon size={sizeStyles.labelSize} color={statusIconColor}>\n {currentStatusIcon}\n </Icon>\n )}\n </Box>\n )}\n\n <Box\n height={sizeStyles.height}\n backgroundColor={theme.colors.overlay.mono}\n borderRadius={100}\n overflow=\"hidden\"\n width=\"100%\"\n >\n <Box\n height=\"100%\"\n backgroundColor={progressColor}\n borderRadius={100}\n style={{\n width: `${validPercent}%`,\n transition: \"width 300ms ease-in-out\",\n }}\n />\n </Box>\n\n {isError && errorMessage ? (\n <Text\n id={helperId}\n color={theme.colors.content.alert.primary}\n fontSize={sizeStyles.helperSize}\n >\n {errorMessage}\n </Text>\n ) : helperText ? (\n <Text\n id={helperId}\n color={theme.colors.content.tertiary}\n fontSize={sizeStyles.helperSize}\n >\n {helperText}\n </Text>\n ) : null}\n </Box>\n );\n};\n"],"mappings":"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","names":["import_react_native","import_jsx_runtime","RNText","import_react_native","import_jsx_runtime","React","import_jsx_runtime"]}
package/native/index.mjs CHANGED
@@ -1,4 +1,4 @@
1
- // ../primitives-native/src/Box.tsx
1
+ // ../../foundation/primitives-native/src/Box.tsx
2
2
  import {
3
3
  View,
4
4
  Pressable,
@@ -176,7 +176,7 @@ var Box = ({
176
176
  );
177
177
  };
178
178
 
179
- // ../primitives-native/src/Text.tsx
179
+ // ../../foundation/primitives-native/src/Text.tsx
180
180
  import {
181
181
  Text as RNText,
182
182
  StyleSheet
@@ -242,7 +242,7 @@ var Text = ({
242
242
  );
243
243
  };
244
244
 
245
- // ../primitives-native/src/Icon.tsx
245
+ // ../../foundation/primitives-native/src/Icon.tsx
246
246
  import React from "react";
247
247
  import { View as View2 } from "react-native";
248
248
  import { jsx as jsx3 } from "react/jsx-runtime";
@@ -267,13 +267,20 @@ var Icon = ({ children, color, size }) => {
267
267
  };
268
268
 
269
269
  // src/ProgressBar.tsx
270
- import { useResolvedTheme } from "@xsolla/xui-core";
270
+ import { Info, AlertCircle, Check } from "@xsolla/xui-icons";
271
+ import {
272
+ useResolvedTheme,
273
+ useId
274
+ } from "@xsolla/xui-core";
271
275
  import { jsx as jsx4, jsxs } from "react/jsx-runtime";
272
276
  var ProgressBar = ({
273
- size = "md",
277
+ size = "m",
274
278
  state = "default",
275
279
  percent = 0,
276
280
  label,
281
+ showLabel = true,
282
+ showInfoIcon = false,
283
+ showStatusIcon = true,
277
284
  helperText,
278
285
  errorMessage,
279
286
  labelIcon,
@@ -286,79 +293,116 @@ var ProgressBar = ({
286
293
  const validPercent = Math.min(Math.max(0, percent), 100);
287
294
  const isError = state === "error";
288
295
  const isSuccess = state === "success";
289
- const showErrorMessage = isError && errorMessage;
290
- let progressColor = theme.colors.content.brand.primary;
296
+ const helperId = useId();
297
+ let progressColor = theme.colors.background.brand.primary;
298
+ let statusIconColor = progressColor;
291
299
  if (isError) {
292
- progressColor = theme.colors.content.alert.primary;
300
+ progressColor = theme.colors.background.alert.primary;
301
+ statusIconColor = theme.colors.content.alert.primary;
293
302
  } else if (isSuccess) {
294
- progressColor = theme.colors.content.success.primary;
303
+ progressColor = theme.colors.background.success.primary;
304
+ statusIconColor = progressColor;
295
305
  }
296
- return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", width: "100%", gap: sizeStyles.gap, children: [
297
- (label || labelIcon || statusIcon && !label) && /* @__PURE__ */ jsxs(
298
- Box,
299
- {
300
- flexDirection: "row",
301
- alignItems: "center",
302
- justifyContent: "space-between",
303
- children: [
304
- /* @__PURE__ */ jsxs(Box, { flexDirection: "row", alignItems: "center", gap: 8, children: [
305
- labelIcon && /* @__PURE__ */ jsx4(
306
- Icon,
307
- {
308
- size: sizeStyles.labelSize,
309
- color: theme.colors.content.secondary,
310
- children: labelIcon
311
- }
312
- ),
313
- label && /* @__PURE__ */ jsx4(
314
- Text,
306
+ const renderStatusIcon = () => {
307
+ if (statusIcon) return statusIcon;
308
+ if (!showStatusIcon) return null;
309
+ if (isError) return /* @__PURE__ */ jsx4(AlertCircle, { size: "100%" });
310
+ if (isSuccess) return /* @__PURE__ */ jsx4(Check, { size: "100%" });
311
+ return null;
312
+ };
313
+ const currentStatusIcon = renderStatusIcon();
314
+ return /* @__PURE__ */ jsxs(
315
+ Box,
316
+ {
317
+ flexDirection: "column",
318
+ width: "100%",
319
+ gap: sizeStyles.gap,
320
+ role: "progressbar",
321
+ "aria-valuenow": validPercent,
322
+ "aria-valuemin": 0,
323
+ "aria-valuemax": 100,
324
+ "aria-describedby": helperText || errorMessage ? helperId : void 0,
325
+ children: [
326
+ showLabel && (label || labelIcon || showInfoIcon || currentStatusIcon) && /* @__PURE__ */ jsxs(
327
+ Box,
328
+ {
329
+ flexDirection: "row",
330
+ alignItems: "center",
331
+ justifyContent: "space-between",
332
+ children: [
333
+ /* @__PURE__ */ jsxs(Box, { flexDirection: "row", alignItems: "center", gap: 6, children: [
334
+ labelIcon && /* @__PURE__ */ jsx4(
335
+ Icon,
336
+ {
337
+ size: sizeStyles.labelSize,
338
+ color: theme.colors.content.tertiary,
339
+ children: labelIcon
340
+ }
341
+ ),
342
+ label && /* @__PURE__ */ jsx4(
343
+ Text,
344
+ {
345
+ color: theme.colors.content.tertiary,
346
+ fontSize: sizeStyles.labelSize,
347
+ fontWeight: "400",
348
+ children: label
349
+ }
350
+ ),
351
+ showInfoIcon && /* @__PURE__ */ jsx4(
352
+ Icon,
353
+ {
354
+ size: sizeStyles.labelSize,
355
+ color: theme.colors.content.tertiary,
356
+ children: /* @__PURE__ */ jsx4(Info, { size: "100%" })
357
+ }
358
+ )
359
+ ] }),
360
+ currentStatusIcon && /* @__PURE__ */ jsx4(Icon, { size: sizeStyles.labelSize, color: statusIconColor, children: currentStatusIcon })
361
+ ]
362
+ }
363
+ ),
364
+ /* @__PURE__ */ jsx4(
365
+ Box,
366
+ {
367
+ height: sizeStyles.height,
368
+ backgroundColor: theme.colors.overlay.mono,
369
+ borderRadius: 100,
370
+ overflow: "hidden",
371
+ width: "100%",
372
+ children: /* @__PURE__ */ jsx4(
373
+ Box,
315
374
  {
316
- color: theme.colors.content.secondary,
317
- fontSize: sizeStyles.labelSize,
318
- fontWeight: "500",
319
- children: label
375
+ height: "100%",
376
+ backgroundColor: progressColor,
377
+ borderRadius: 100,
378
+ style: {
379
+ width: `${validPercent}%`,
380
+ transition: "width 300ms ease-in-out"
381
+ }
320
382
  }
321
383
  )
322
- ] }),
323
- statusIcon && /* @__PURE__ */ jsx4(Icon, { size: sizeStyles.labelSize, color: progressColor, children: statusIcon })
324
- ]
325
- }
326
- ),
327
- /* @__PURE__ */ jsx4(
328
- Box,
329
- {
330
- height: sizeStyles.height,
331
- backgroundColor: theme.colors.control.input.bg,
332
- borderRadius: 100,
333
- overflow: "hidden",
334
- width: "100%",
335
- children: /* @__PURE__ */ jsx4(
336
- Box,
384
+ }
385
+ ),
386
+ isError && errorMessage ? /* @__PURE__ */ jsx4(
387
+ Text,
337
388
  {
338
- height: "100%",
339
- width: `${validPercent}%`,
340
- backgroundColor: progressColor,
341
- borderRadius: 100
389
+ id: helperId,
390
+ color: theme.colors.content.alert.primary,
391
+ fontSize: sizeStyles.helperSize,
392
+ children: errorMessage
342
393
  }
343
- )
344
- }
345
- ),
346
- showErrorMessage ? /* @__PURE__ */ jsx4(
347
- Text,
348
- {
349
- color: theme.colors.content.alert.primary,
350
- fontSize: sizeStyles.helperSize,
351
- children: errorMessage
352
- }
353
- ) : helperText ? /* @__PURE__ */ jsx4(
354
- Text,
355
- {
356
- color: theme.colors.content.secondary,
357
- fontSize: sizeStyles.helperSize,
358
- children: helperText
359
- }
360
- ) : null
361
- ] });
394
+ ) : helperText ? /* @__PURE__ */ jsx4(
395
+ Text,
396
+ {
397
+ id: helperId,
398
+ color: theme.colors.content.tertiary,
399
+ fontSize: sizeStyles.helperSize,
400
+ children: helperText
401
+ }
402
+ ) : null
403
+ ]
404
+ }
405
+ );
362
406
  };
363
407
  export {
364
408
  ProgressBar