@xsolla/xui-b2c-progress-icon 0.156.0-pr297.1779158853

package/README.md

@@ -0,0 +1,3 @@
+# @xsolla/xui-b2c-progress-icon
+
+B2C progress icon wrapper for rendering an icon with a percentage-based progress outline.

package/native/index.d.mts

@@ -0,0 +1,21 @@
+import React, { ReactNode } from 'react';
+import { ThemeOverrideProps } from '@xsolla/xui-core';
+
+interface ProgressIconProps extends ThemeOverrideProps {
+    icon?: ReactNode;
+    percent?: number;
+    size?: number;
+    iconSize?: number;
+    radius?: number;
+    strokeWidth?: number;
+    trackColor?: string;
+    progressColor?: string;
+    backgroundColor?: string;
+    iconColor?: string;
+    "aria-label"?: string;
+    testID?: string;
+}
+
+declare const ProgressIcon: React.FC<ProgressIconProps>;
+
+export { ProgressIcon, type ProgressIconProps };

package/native/index.d.ts

@@ -0,0 +1,21 @@
+import React, { ReactNode } from 'react';
+import { ThemeOverrideProps } from '@xsolla/xui-core';
+
+interface ProgressIconProps extends ThemeOverrideProps {
+    icon?: ReactNode;
+    percent?: number;
+    size?: number;
+    iconSize?: number;
+    radius?: number;
+    strokeWidth?: number;
+    trackColor?: string;
+    progressColor?: string;
+    backgroundColor?: string;
+    iconColor?: string;
+    "aria-label"?: string;
+    testID?: string;
+}
+
+declare const ProgressIcon: React.FC<ProgressIconProps>;
+
+export { ProgressIcon, type ProgressIconProps };

package/native/index.js

@@ -0,0 +1,392 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  ProgressIcon: () => ProgressIcon
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/ProgressIcon.tsx
+var import_react = __toESM(require("react"));
+
+// ../../foundation/primitives-native/src/Box.tsx
+var import_react_native = require("react-native");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Box = ({
+  children,
+  onPress,
+  onLayout,
+  onMoveShouldSetResponder,
+  onResponderGrant,
+  onResponderMove,
+  onResponderRelease,
+  onResponderTerminate,
+  backgroundColor,
+  borderColor,
+  borderWidth,
+  borderBottomWidth,
+  borderBottomColor,
+  borderTopWidth,
+  borderTopColor,
+  borderLeftWidth,
+  borderLeftColor,
+  borderRightWidth,
+  borderRightColor,
+  borderRadius,
+  borderStyle,
+  height,
+  padding,
+  paddingHorizontal,
+  paddingVertical,
+  margin,
+  marginTop,
+  marginBottom,
+  marginLeft,
+  marginRight,
+  flexDirection,
+  alignItems,
+  justifyContent,
+  position,
+  top,
+  bottom,
+  left,
+  right,
+  width,
+  minWidth,
+  minHeight,
+  maxWidth,
+  maxHeight,
+  flex,
+  overflow,
+  zIndex,
+  hoverStyle,
+  pressStyle,
+  style,
+  "data-testid": dataTestId,
+  testID,
+  as,
+  src,
+  alt,
+  ...rest
+}) => {
+  const getContainerStyle = (pressed) => ({
+    backgroundColor: pressed && pressStyle?.backgroundColor ? pressStyle.backgroundColor : backgroundColor,
+    borderColor,
+    borderWidth,
+    borderBottomWidth,
+    borderBottomColor,
+    borderTopWidth,
+    borderTopColor,
+    borderLeftWidth,
+    borderLeftColor,
+    borderRightWidth,
+    borderRightColor,
+    borderRadius,
+    borderStyle,
+    overflow,
+    zIndex,
+    height,
+    width,
+    minWidth,
+    minHeight,
+    maxWidth,
+    maxHeight,
+    padding,
+    paddingHorizontal,
+    paddingVertical,
+    margin,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    flexDirection,
+    alignItems,
+    justifyContent,
+    position,
+    top,
+    bottom,
+    left,
+    right,
+    flex,
+    ...style
+  });
+  const finalTestID = dataTestId || testID;
+  const {
+    role,
+    tabIndex,
+    onKeyDown,
+    onKeyUp,
+    "aria-label": _ariaLabel,
+    "aria-labelledby": _ariaLabelledBy,
+    "aria-current": _ariaCurrent,
+    "aria-disabled": _ariaDisabled,
+    "aria-live": _ariaLive,
+    className,
+    "data-testid": _dataTestId,
+    ...nativeRest
+  } = rest;
+  if (as === "img" && src) {
+    const imageStyle = {
+      width,
+      height,
+      borderRadius,
+      position,
+      top,
+      bottom,
+      left,
+      right,
+      ...style
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_native.Image,
+      {
+        source: { uri: src },
+        style: imageStyle,
+        testID: finalTestID,
+        resizeMode: "cover",
+        ...nativeRest
+      }
+    );
+  }
+  if (onPress) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_native.Pressable,
+      {
+        onPress,
+        onLayout,
+        onMoveShouldSetResponder,
+        onResponderGrant,
+        onResponderMove,
+        onResponderRelease,
+        onResponderTerminate,
+        style: ({ pressed }) => getContainerStyle(pressed),
+        testID: finalTestID,
+        ...nativeRest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_native.View,
+    {
+      style: getContainerStyle(),
+      testID: finalTestID,
+      onLayout,
+      onMoveShouldSetResponder,
+      onResponderGrant,
+      onResponderMove,
+      onResponderRelease,
+      onResponderTerminate,
+      ...nativeRest,
+      children
+    }
+  );
+};
+
+// src/ProgressIcon.tsx
+var import_xui_core = require("@xsolla/xui-core");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var clampPercent = (percent) => Math.min(Math.max(percent, 0), 100);
+var renderIcon = (icon, size, color) => {
+  if (!import_react.default.isValidElement(icon)) return icon;
+  return import_react.default.cloneElement(
+    icon,
+    {
+      size,
+      color
+    }
+  );
+};
+var getSegmentFills = (percent) => {
+  const value = clampPercent(percent);
+  return {
+    topRight: Math.min(value, 25) / 25,
+    bottomRight: Math.min(Math.max(value - 25, 0), 25) / 25,
+    bottomLeft: Math.min(Math.max(value - 50, 0), 25) / 25,
+    topLeft: Math.min(Math.max(value - 75, 0), 25) / 25
+  };
+};
+var Segment = ({ fill, color, size, radius, strokeWidth, placement }) => {
+  if (fill <= 0) return null;
+  const half = size / 2;
+  const shared = {
+    position: "absolute",
+    width: half,
+    height: half,
+    borderColor: color,
+    borderStyle: "solid",
+    testID: `progress-icon-segment-${placement}`
+  };
+  switch (placement) {
+    case "topRight":
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        Box,
+        {
+          ...shared,
+          top: 0,
+          right: 0,
+          borderTopWidth: strokeWidth,
+          borderRightWidth: strokeWidth,
+          style: { borderTopRightRadius: radius }
+        }
+      );
+    case "bottomRight":
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        Box,
+        {
+          ...shared,
+          right: 0,
+          bottom: 0,
+          borderRightWidth: strokeWidth,
+          borderBottomWidth: strokeWidth,
+          style: { borderBottomRightRadius: radius }
+        }
+      );
+    case "bottomLeft":
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        Box,
+        {
+          ...shared,
+          bottom: 0,
+          left: 0,
+          borderBottomWidth: strokeWidth,
+          borderLeftWidth: strokeWidth,
+          style: { borderBottomLeftRadius: radius }
+        }
+      );
+    case "topLeft":
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        Box,
+        {
+          ...shared,
+          top: 0,
+          left: 0,
+          borderLeftWidth: strokeWidth,
+          borderTopWidth: strokeWidth,
+          style: { borderTopLeftRadius: radius }
+        }
+      );
+  }
+};
+var ProgressIcon = ({
+  icon,
+  percent = 0,
+  size = 48,
+  iconSize = 20,
+  radius = 4,
+  strokeWidth = 2,
+  trackColor,
+  progressColor,
+  backgroundColor,
+  iconColor,
+  "aria-label": ariaLabel = "Progress icon",
+  testID,
+  themeMode,
+  themeProductContext = "b2c"
+}) => {
+  const { theme } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
+  const clampedPercent = clampPercent(percent);
+  const fills = getSegmentFills(clampedPercent);
+  const resolvedProgressColor = progressColor || theme.colors.content.brand.primary;
+  const resolvedIconColor = iconColor || theme.colors.content.primary;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    Box,
+    {
+      width: size,
+      height: size,
+      position: "relative",
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: radius,
+      backgroundColor: backgroundColor || theme.colors.overlay.mono,
+      borderWidth: trackColor ? strokeWidth : 0,
+      borderColor: trackColor || "transparent",
+      role: "progressbar",
+      "aria-label": ariaLabel,
+      "aria-valuenow": clampedPercent,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      testID: testID || "progress-icon",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          Segment,
+          {
+            placement: "topRight",
+            fill: fills.topRight,
+            color: resolvedProgressColor,
+            size,
+            radius,
+            strokeWidth
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          Segment,
+          {
+            placement: "bottomRight",
+            fill: fills.bottomRight,
+            color: resolvedProgressColor,
+            size,
+            radius,
+            strokeWidth
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          Segment,
+          {
+            placement: "bottomLeft",
+            fill: fills.bottomLeft,
+            color: resolvedProgressColor,
+            size,
+            radius,
+            strokeWidth
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          Segment,
+          {
+            placement: "topLeft",
+            fill: fills.topLeft,
+            color: resolvedProgressColor,
+            size,
+            radius,
+            strokeWidth
+          }
+        ),
+        renderIcon(icon, iconSize, resolvedIconColor)
+      ]
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ProgressIcon
+});
+//# sourceMappingURL=index.js.map

package/native/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/index.tsx","../../src/ProgressIcon.tsx","../../../../foundation/primitives-native/src/Box.tsx"],"sourcesContent":["export { ProgressIcon } from \"./ProgressIcon\";\nexport type { ProgressIconProps } from \"./types\";\n","import React from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme } from \"@xsolla/xui-core\";\nimport type { ProgressIconProps } from \"./types\";\n\nconst clampPercent = (percent: number) => Math.min(Math.max(percent, 0), 100);\n\nconst renderIcon = (icon: React.ReactNode, size: number, color: string) => {\n  if (!React.isValidElement(icon)) return icon;\n\n  return React.cloneElement(\n    icon as React.ReactElement<{ size?: number | string; color?: string }>,\n    {\n      size,\n      color,\n    }\n  );\n};\n\nconst getSegmentFills = (percent: number) => {\n  const value = clampPercent(percent);\n\n  return {\n    topRight: Math.min(value, 25) / 25,\n    bottomRight: Math.min(Math.max(value - 25, 0), 25) / 25,\n    bottomLeft: Math.min(Math.max(value - 50, 0), 25) / 25,\n    topLeft: Math.min(Math.max(value - 75, 0), 25) / 25,\n  };\n};\n\nconst Segment: React.FC<{\n  fill: number;\n  color: string;\n  size: number;\n  radius: number;\n  strokeWidth: number;\n  placement: \"topRight\" | \"bottomRight\" | \"bottomLeft\" | \"topLeft\";\n}> = ({ fill, color, size, radius, strokeWidth, placement }) => {\n  if (fill <= 0) return null;\n\n  const half = size / 2;\n  const shared = {\n    position: \"absolute\" as const,\n    width: half,\n    height: half,\n    borderColor: color,\n    borderStyle: \"solid\" as const,\n    testID: `progress-icon-segment-${placement}`,\n  };\n\n  switch (placement) {\n    case \"topRight\":\n      return (\n        <Box\n          {...shared}\n          top={0}\n          right={0}\n          borderTopWidth={strokeWidth}\n          borderRightWidth={strokeWidth}\n          style={{ borderTopRightRadius: radius }}\n        />\n      );\n    case \"bottomRight\":\n      return (\n        <Box\n          {...shared}\n          right={0}\n          bottom={0}\n          borderRightWidth={strokeWidth}\n          borderBottomWidth={strokeWidth}\n          style={{ borderBottomRightRadius: radius }}\n        />\n      );\n    case \"bottomLeft\":\n      return (\n        <Box\n          {...shared}\n          bottom={0}\n          left={0}\n          borderBottomWidth={strokeWidth}\n          borderLeftWidth={strokeWidth}\n          style={{ borderBottomLeftRadius: radius }}\n        />\n      );\n    case \"topLeft\":\n      return (\n        <Box\n          {...shared}\n          top={0}\n          left={0}\n          borderLeftWidth={strokeWidth}\n          borderTopWidth={strokeWidth}\n          style={{ borderTopLeftRadius: radius }}\n        />\n      );\n  }\n};\n\nexport const ProgressIcon: React.FC<ProgressIconProps> = ({\n  icon,\n  percent = 0,\n  size = 48,\n  iconSize = 20,\n  radius = 4,\n  strokeWidth = 2,\n  trackColor,\n  progressColor,\n  backgroundColor,\n  iconColor,\n  \"aria-label\": ariaLabel = \"Progress icon\",\n  testID,\n  themeMode,\n  themeProductContext = \"b2c\",\n}) => {\n  const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n  const clampedPercent = clampPercent(percent);\n  const fills = getSegmentFills(clampedPercent);\n  const resolvedProgressColor =\n    progressColor || theme.colors.content.brand.primary;\n  const resolvedIconColor = iconColor || theme.colors.content.primary;\n\n  return (\n    <Box\n      width={size}\n      height={size}\n      position=\"relative\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      borderRadius={radius}\n      backgroundColor={backgroundColor || theme.colors.overlay.mono}\n      borderWidth={trackColor ? strokeWidth : 0}\n      borderColor={trackColor || \"transparent\"}\n      role=\"progressbar\"\n      aria-label={ariaLabel}\n      aria-valuenow={clampedPercent}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      testID={testID || \"progress-icon\"}\n    >\n      <Segment\n        placement=\"topRight\"\n        fill={fills.topRight}\n        color={resolvedProgressColor}\n        size={size}\n        radius={radius}\n        strokeWidth={strokeWidth}\n      />\n      <Segment\n        placement=\"bottomRight\"\n        fill={fills.bottomRight}\n        color={resolvedProgressColor}\n        size={size}\n        radius={radius}\n        strokeWidth={strokeWidth}\n      />\n      <Segment\n        placement=\"bottomLeft\"\n        fill={fills.bottomLeft}\n        color={resolvedProgressColor}\n        size={size}\n        radius={radius}\n        strokeWidth={strokeWidth}\n      />\n      <Segment\n        placement=\"topLeft\"\n        fill={fills.topLeft}\n        color={resolvedProgressColor}\n        size={size}\n        radius={radius}\n        strokeWidth={strokeWidth}\n      />\n      {renderIcon(icon, iconSize, resolvedIconColor)}\n    </Box>\n  );\n};\n\nexport { clampPercent };\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"],"mappings":"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","names":["import_jsx_runtime","React"]}