@xsolla/xui-counter 0.200.0

package/native/index.mjs

@@ -0,0 +1,646 @@
+// src/Counter.tsx
+import React2, { forwardRef, useRef, useState } from "react";
+
+// ../../foundation/primitives-native/src/Box.tsx
+import {
+  View,
+  Pressable,
+  Image
+} from "react-native";
+import { jsx } from "react/jsx-runtime";
+var roleToAccessibilityRole = {
+  button: "button",
+  link: "link",
+  img: "image",
+  image: "image",
+  summary: "summary",
+  switch: "switch",
+  checkbox: "checkbox",
+  radio: "radio",
+  heading: "header",
+  text: "text",
+  search: "search",
+  alert: "alert",
+  none: "none",
+  presentation: "none",
+  progressbar: "progressbar",
+  scrollbar: "scrollbar",
+  adjustable: "adjustable",
+  tab: "tab",
+  menu: "menu",
+  menuitem: "menuitem",
+  list: "list",
+  timer: "timer"
+};
+var toGapValue = (gap) => {
+  if (gap === void 0) return void 0;
+  if (typeof gap === "number") return gap;
+  const pxMatch = /^(\d+(?:\.\d+)?)px$/.exec(gap);
+  if (pxMatch) return Number(pxMatch[1]);
+  const asNumber = Number(gap);
+  return Number.isFinite(asNumber) ? asNumber : void 0;
+};
+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,
+  flexWrap,
+  alignItems,
+  justifyContent,
+  alignSelf,
+  position,
+  top,
+  bottom,
+  left,
+  right,
+  width,
+  minWidth,
+  minHeight,
+  maxWidth,
+  maxHeight,
+  flex,
+  flexShrink,
+  gap,
+  overflow,
+  zIndex,
+  hoverStyle,
+  pressStyle,
+  style,
+  disabled,
+  "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,
+    flexWrap,
+    alignItems,
+    justifyContent,
+    alignSelf,
+    position,
+    top,
+    bottom,
+    left,
+    right,
+    flex,
+    flexShrink,
+    gap: toGapValue(gap),
+    ...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,
+    "aria-busy": ariaBusy,
+    className,
+    "data-testid": _dataTestId,
+    cursor: _cursor,
+    type: _type,
+    ...nativeRest
+  } = rest;
+  const accessibilityRole = typeof role === "string" && roleToAccessibilityRole[role] || (as === "button" ? "button" : void 0);
+  const isDisabled = Boolean(disabled || ariaDisabled);
+  const accessibilityState = {
+    disabled: isDisabled || void 0,
+    busy: Boolean(ariaBusy) || void 0
+  };
+  const accessibilityLiveRegion = ariaLive === "polite" || ariaLive === "assertive" ? ariaLive : void 0;
+  if (as === "img" && src) {
+    const imageStyle = {
+      width,
+      height,
+      borderRadius,
+      position,
+      top,
+      bottom,
+      left,
+      right,
+      ...style
+    };
+    return /* @__PURE__ */ jsx(
+      Image,
+      {
+        source: { uri: src },
+        style: imageStyle,
+        testID: finalTestID,
+        accessibilityLabel: typeof ariaLabel === "string" ? ariaLabel : alt,
+        resizeMode: "cover",
+        ...nativeRest
+      }
+    );
+  }
+  if (onPress || as === "button") {
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        onPress: !isDisabled && onPress ? onPress : void 0,
+        disabled: isDisabled,
+        onLayout,
+        onMoveShouldSetResponder,
+        onResponderGrant,
+        onResponderMove,
+        onResponderRelease,
+        onResponderTerminate,
+        style: ({ pressed }) => getContainerStyle(pressed),
+        testID: finalTestID,
+        accessibilityRole,
+        accessibilityLabel: typeof ariaLabel === "string" ? ariaLabel : void 0,
+        accessibilityState,
+        accessibilityLiveRegion,
+        ...nativeRest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: getContainerStyle(),
+      testID: finalTestID,
+      onLayout,
+      onMoveShouldSetResponder,
+      onResponderGrant,
+      onResponderMove,
+      onResponderRelease,
+      onResponderTerminate,
+      accessibilityRole,
+      accessibilityLabel: typeof ariaLabel === "string" ? ariaLabel : void 0,
+      accessibilityState,
+      accessibilityLiveRegion,
+      ...nativeRest,
+      children
+    }
+  );
+};
+
+// ../../foundation/primitives-native/src/Text.tsx
+import {
+  Text as RNText,
+  StyleSheet
+} from "react-native";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var roleMap = {
+  alert: "alert",
+  heading: "header",
+  button: "button",
+  link: "link",
+  text: "text"
+};
+var parseNumericValue = (value) => {
+  if (value === void 0) return void 0;
+  if (typeof value === "number") return value;
+  const parsed = parseFloat(value);
+  return isNaN(parsed) ? void 0 : parsed;
+};
+var Text = ({
+  children,
+  color,
+  fontSize,
+  fontWeight,
+  fontFamily,
+  textAlign,
+  lineHeight,
+  numberOfLines,
+  id,
+  role,
+  testID,
+  "data-testid": dataTestId,
+  style: styleProp,
+  ...props
+}) => {
+  let resolvedFontFamily = fontFamily ? fontFamily.split(",")[0].replace(/['"]/g, "").trim() : void 0;
+  if (resolvedFontFamily === "Pilat Wide" || resolvedFontFamily === "Pilat Wide Bold" || resolvedFontFamily === "Aktiv Grotesk") {
+    resolvedFontFamily = void 0;
+  }
+  const incomingStyle = StyleSheet.flatten(styleProp);
+  const baseStyle = {
+    color: color ?? incomingStyle?.color,
+    fontSize: typeof fontSize === "number" ? fontSize : void 0,
+    fontWeight,
+    fontFamily: resolvedFontFamily,
+    textDecorationLine: props.textDecoration,
+    textAlign: textAlign ?? incomingStyle?.textAlign,
+    lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),
+    marginTop: parseNumericValue(
+      incomingStyle?.marginTop
+    ),
+    marginBottom: parseNumericValue(
+      incomingStyle?.marginBottom
+    )
+  };
+  const accessibilityRole = role ? roleMap[role] : void 0;
+  return /* @__PURE__ */ jsx2(
+    RNText,
+    {
+      style: baseStyle,
+      numberOfLines,
+      testID: dataTestId || testID || id,
+      accessibilityRole,
+      children
+    }
+  );
+};
+
+// ../../foundation/primitives-native/src/Icon.tsx
+import React from "react";
+import { View as View2 } from "react-native";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Icon = ({
+  children,
+  color,
+  size,
+  testID,
+  "data-testid": dataTestId
+}) => {
+  const style = {
+    width: typeof size === "number" ? size : void 0,
+    height: typeof size === "number" ? size : void 0,
+    alignItems: "center",
+    justifyContent: "center"
+  };
+  const childrenWithProps = React.Children.map(children, (child) => {
+    if (React.isValidElement(child)) {
+      return React.cloneElement(child, {
+        color: child.props.color || color,
+        // Also pass size if child seems to be an icon that needs it
+        size: child.props.size || size
+      });
+    }
+    return child;
+  });
+  return /* @__PURE__ */ jsx3(View2, { style, testID: dataTestId || testID, children: childrenWithProps });
+};
+
+// ../../foundation/primitives-native/src/index.tsx
+var isWeb = false;
+
+// src/Counter.tsx
+import { useResolvedTheme, useId } from "@xsolla/xui-core";
+import { Input } from "@xsolla/xui-input";
+import { MinusSq, PlusSq } from "@xsolla/xui-icons-base";
+
+// src/utils.ts
+var COUNTER_SIZE_CONFIG = {
+  xl: { control: 28, gap: 10, inputWidth: 149, readOnlyWidth: 100 },
+  lg: { control: 24, gap: 10, inputWidth: 142, readOnlyWidth: 90 },
+  md: { control: 24, gap: 8, inputWidth: 132, readOnlyWidth: 83 },
+  sm: { control: 18, gap: 8, inputWidth: 92, readOnlyWidth: 69 },
+  xs: { control: 16, gap: 6, inputWidth: 82, readOnlyWidth: 59 }
+};
+var clampToRange = (value, min, max) => {
+  let next = value;
+  if (typeof min === "number" && next < min) next = min;
+  if (typeof max === "number" && next > max) next = max;
+  return next;
+};
+var sanitizeCounterInput = (raw, allowNegative) => {
+  const digitsAndSigns = raw.replace(/[^\d-]/g, "");
+  const digits = digitsAndSigns.replace(/-/g, "");
+  if (allowNegative && digitsAndSigns.startsWith("-")) {
+    return `-${digits}`;
+  }
+  return digits;
+};
+var parseCounterValue = (raw) => {
+  const trimmed = raw.trim();
+  if (trimmed === "" || trimmed === "-") return null;
+  const parsed = Number.parseInt(trimmed, 10);
+  return Number.isNaN(parsed) ? null : parsed;
+};
+var allowsNegative = (min) => typeof min !== "number" || min < 0;
+
+// src/Counter.tsx
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+var CounterButton = ({
+  icon,
+  label,
+  onPress,
+  available,
+  boxSize,
+  borderRadius,
+  color,
+  hoverColor,
+  testID
+}) => /* @__PURE__ */ jsx4(
+  Box,
+  {
+    as: "button",
+    type: "button",
+    width: boxSize,
+    height: boxSize,
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 0,
+    borderWidth: 0,
+    borderRadius,
+    backgroundColor: "transparent",
+    cursor: available ? "pointer" : "not-allowed",
+    disabled: !available,
+    "aria-disabled": !available || void 0,
+    "aria-label": label,
+    onPress,
+    hoverStyle: available ? { backgroundColor: hoverColor } : void 0,
+    ...isWeb && {
+      onMouseDown: (e) => e.preventDefault()
+    },
+    "data-testid": testID,
+    testID,
+    children: /* @__PURE__ */ jsx4(Icon, { size: boxSize, color, children: icon })
+  }
+);
+var Counter = forwardRef(
+  ({
+    value,
+    defaultValue = null,
+    onChange,
+    min,
+    max,
+    step = 1,
+    size = "md",
+    type = "input",
+    disabled = false,
+    label,
+    "aria-label": ariaLabel,
+    decrementLabel = "Decrease quantity",
+    incrementLabel = "Increase quantity",
+    name,
+    id: providedId,
+    testID,
+    themeMode,
+    themeProductContext
+  }, ref) => {
+    const { theme } = useResolvedTheme({ themeMode, themeProductContext });
+    const rawId = useId();
+    const safeId = rawId.replace(/:/g, "");
+    const counterId = providedId || `counter-${safeId}`;
+    const isControlled = value !== void 0;
+    const [uncontrolledValue, setUncontrolledValue] = useState(
+      defaultValue
+    );
+    const committedValue = isControlled ? value ?? null : uncontrolledValue;
+    const [draft, setDraft] = useState(null);
+    const inputRef = useRef(null);
+    React2.useImperativeHandle(
+      ref,
+      () => inputRef.current,
+      []
+    );
+    const sizeConfig = COUNTER_SIZE_CONFIG[size];
+    const inputSizing = theme.sizing.input(size);
+    const isReadOnly = type === "readOnly";
+    const pendingValue = draft !== null ? parseCounterValue(draft) : committedValue;
+    const stepBase = pendingValue ?? min ?? 0;
+    const canDecrement = !disabled && (typeof min !== "number" || stepBase > min);
+    const canIncrement = !disabled && (typeof max !== "number" || stepBase < max);
+    const commit = (next) => {
+      setDraft(null);
+      const resolved = next ?? committedValue;
+      if (resolved === null) return;
+      const clamped = clampToRange(resolved, min, max);
+      if (!isControlled) setUncontrolledValue(clamped);
+      if (clamped !== committedValue) onChange?.(clamped);
+    };
+    const stepBy = (direction) => {
+      commit(clampToRange(stepBase + direction * step, min, max));
+    };
+    const handleInputChange = (e) => {
+      setDraft(sanitizeCounterInput(e.target.value, allowsNegative(min)));
+    };
+    const handleBlur = () => {
+      commit(draft !== null ? parseCounterValue(draft) : committedValue);
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        if (canIncrement) stepBy(1);
+        return;
+      }
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        if (canDecrement) stepBy(-1);
+        return;
+      }
+      if (e.key === "Home" && typeof min === "number") {
+        e.preventDefault();
+        commit(min);
+        return;
+      }
+      if (e.key === "End" && typeof max === "number") {
+        e.preventDefault();
+        commit(max);
+        return;
+      }
+      if (e.key === "Enter" || e.key === "\n") {
+        e.preventDefault();
+        commit(draft !== null ? parseCounterValue(draft) : committedValue);
+      }
+    };
+    const enabledIconColor = theme.colors.content.secondary;
+    const disabledIconColor = theme.colors.control.text.disable;
+    const hoverColor = theme.colors.overlay.mono;
+    const buttonRadius = theme.shape.input[size].borderRadius;
+    const decrementButton = /* @__PURE__ */ jsx4(
+      CounterButton,
+      {
+        icon: /* @__PURE__ */ jsx4(MinusSq, {}),
+        label: decrementLabel,
+        onPress: () => {
+          if (canDecrement) stepBy(-1);
+        },
+        available: canDecrement,
+        boxSize: sizeConfig.control,
+        borderRadius: buttonRadius,
+        color: canDecrement ? enabledIconColor : disabledIconColor,
+        hoverColor,
+        testID: testID ? `${testID}__decrement` : void 0
+      }
+    );
+    const incrementButton = /* @__PURE__ */ jsx4(
+      CounterButton,
+      {
+        icon: /* @__PURE__ */ jsx4(PlusSq, {}),
+        label: incrementLabel,
+        onPress: () => {
+          if (canIncrement) stepBy(1);
+        },
+        available: canIncrement,
+        boxSize: sizeConfig.control,
+        borderRadius: buttonRadius,
+        color: canIncrement ? enabledIconColor : disabledIconColor,
+        hoverColor,
+        testID: testID ? `${testID}__increment` : void 0
+      }
+    );
+    const labelId = `${counterId}-label`;
+    const showLabel = Boolean(label) && !isReadOnly;
+    const labelNode = showLabel ? /* @__PURE__ */ jsx4(Box, { as: "label", id: labelId, children: /* @__PURE__ */ jsx4(
+      Text,
+      {
+        color: theme.colors.content.secondary,
+        fontSize: inputSizing.fontSize - 2,
+        fontWeight: "500",
+        children: label
+      }
+    ) }) : null;
+    if (isReadOnly) {
+      const readOnlyValue = String(committedValue ?? min ?? 0);
+      return /* @__PURE__ */ jsxs(
+        Box,
+        {
+          flexDirection: "row",
+          alignItems: "center",
+          gap: sizeConfig.gap,
+          width: sizeConfig.readOnlyWidth,
+          role: "group",
+          "aria-label": ariaLabel || label,
+          "aria-disabled": disabled || void 0,
+          "data-testid": testID,
+          children: [
+            decrementButton,
+            /* @__PURE__ */ jsx4(Box, { flex: 1, minWidth: 0, "aria-live": "polite", alignItems: "center", children: /* @__PURE__ */ jsx4(
+              Text,
+              {
+                color: disabled ? theme.colors.control.input.textDisable : theme.colors.control.input.text,
+                fontSize: inputSizing.fontSize,
+                lineHeight: inputSizing.fontSize + 2,
+                textAlign: "center",
+                "data-testid": testID ? `${testID}__value` : void 0,
+                children: readOnlyValue
+              }
+            ) }),
+            incrementButton
+          ]
+        }
+      );
+    }
+    const displayValue = draft !== null ? draft : committedValue === null ? "" : String(committedValue);
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        flexDirection: "column",
+        gap: inputSizing.fieldGap,
+        alignItems: "flex-start",
+        role: "group",
+        "aria-label": showLabel ? void 0 : ariaLabel,
+        "aria-labelledby": showLabel ? labelId : void 0,
+        "aria-disabled": disabled || void 0,
+        "data-testid": testID,
+        children: [
+          labelNode,
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              flexDirection: "row",
+              alignItems: "center",
+              gap: sizeConfig.gap,
+              width: sizeConfig.inputWidth,
+              children: [
+                decrementButton,
+                /* @__PURE__ */ jsx4(Box, { flex: 1, minWidth: 0, children: /* @__PURE__ */ jsx4(
+                  Input,
+                  {
+                    ref: inputRef,
+                    id: counterId,
+                    name,
+                    size,
+                    value: displayValue,
+                    disabled,
+                    onChange: handleInputChange,
+                    onBlur: handleBlur,
+                    onKeyDown: handleKeyDown,
+                    type: "text",
+                    inputMode: "numeric",
+                    role: "spinbutton",
+                    "aria-valuenow": committedValue ?? void 0,
+                    "aria-valuemin": min,
+                    "aria-valuemax": max,
+                    "aria-label": showLabel ? void 0 : ariaLabel,
+                    ...showLabel ? { "aria-labelledby": labelId } : {},
+                    style: { textAlign: "center" },
+                    themeMode,
+                    themeProductContext,
+                    testID: testID ? `${testID}__input` : void 0
+                  }
+                ) }),
+                incrementButton
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Counter.displayName = "Counter";
+export {
+  Counter
+};
+//# sourceMappingURL=index.mjs.map