@xsolla/xui-toggle-button-group 0.101.0-pr166.1772004027

package/native/index.js.flow

@@ -0,0 +1,117 @@
+/**
+ * Flowtype definitions for index
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import React from "react";
+declare type ToggleButtonGroupSize = "xl" | "lg" | "md" | "sm";
+declare type ToggleButtonGroupAppearance = "separated" | "united";
+declare interface ToggleButtonGroupItem {
+  /**
+   * Unique identifier for the item
+   */
+  id: string;
+
+  /**
+   * Display label for the item
+   */
+  label: string;
+
+  /**
+   * Optional icon to display on the left
+   */
+  iconLeft?: React.ReactNode;
+
+  /**
+   * Optional icon to display on the right
+   */
+  iconRight?: React.ReactNode;
+
+  /**
+   * Whether the item is disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Accessible label for screen readers
+   */
+  "aria-label"?: string;
+}
+declare interface ToggleButtonGroupProps {
+  /**
+   * Array of items
+   */
+  items: ToggleButtonGroupItem[];
+
+  /**
+   * ID(s) of the currently active item(s). For single selection, pass a string. For multiple selection, pass an array.
+   */
+  value?: string | string[];
+
+  /**
+   * Default value(s) for uncontrolled mode
+   */
+  defaultValue?: string | string[];
+
+  /**
+   * Callback when selection changes. Returns string for single selection, string[] for multiple.
+   */
+  onChange?: (value: string | string[]) => void;
+
+  /**
+   * Size variant
+   */
+  size?: ToggleButtonGroupSize;
+
+  /**
+   * Visual appearance - separated has gaps, united has connected items
+   */
+  appearance?: ToggleButtonGroupAppearance;
+
+  /**
+   * Whether multiple items can be selected
+   */
+  multiple?: boolean;
+
+  /**
+   * HTML id attribute
+   */
+  id?: string;
+
+  /**
+   * Test ID for testing frameworks
+   */
+  testID?: string;
+
+  /**
+   * Accessible label for the group
+   */
+  "aria-label"?: string;
+
+  /**
+   * ID of element that labels this group
+   */
+  "aria-labelledby"?: string;
+}
+/**
+ * ToggleButtonGroup - A control for picking one or several options from a set
+ *
+ * Used to pick one or several options from a linear set of closely related options.
+ * Can be used to filter or to sort elements.
+ *
+ * ## Accessibility Features
+ *
+ * - **Role**: Uses `role="radiogroup"` for single selection, `role="group"` for multiple
+ * - **Keyboard Navigation**: Arrow keys to navigate, Enter/Space to select
+ * - **ARIA**: Proper aria-checked and aria-disabled states
+ */
+declare var ToggleButtonGroup: React.FC<ToggleButtonGroupProps>;
+export type {
+  ToggleButtonGroupAppearance,
+  ToggleButtonGroupItem,
+  ToggleButtonGroupProps,
+  ToggleButtonGroupSize,
+};
+declare export { ToggleButtonGroup };

package/native/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/index.tsx","../../src/ToggleButtonGroup.tsx","../../../primitives-native/src/Box.tsx","../../../primitives-native/src/Text.tsx","../../../primitives-native/src/Icon.tsx"],"sourcesContent":["export { ToggleButtonGroup } from \"./ToggleButtonGroup\";\nexport type {\n  ToggleButtonGroupProps,\n  ToggleButtonGroupItem,\n  ToggleButtonGroupSize,\n  ToggleButtonGroupAppearance,\n} from \"./types\";\n","import React, { useCallback, useRef, useState } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text, Icon } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem } from \"@xsolla/xui-core\";\nimport type { ToggleButtonGroupProps } from \"./types\";\n\n/**\n * ToggleButtonGroup - A control for picking one or several options from a set\n *\n * Used to pick one or several options from a linear set of closely related options.\n * Can be used to filter or to sort elements.\n *\n * ## Accessibility Features\n *\n * - **Role**: Uses `role=\"radiogroup\"` for single selection, `role=\"group\"` for multiple\n * - **Keyboard Navigation**: Arrow keys to navigate, Enter/Space to select\n * - **ARIA**: Proper aria-checked and aria-disabled states\n */\nexport const ToggleButtonGroup: React.FC<ToggleButtonGroupProps> = ({\n  items,\n  value,\n  defaultValue,\n  onChange,\n  size = \"md\",\n  appearance = \"separated\",\n  multiple = false,\n  id,\n  testID,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n}) => {\n  const { theme } = useDesignSystem();\n  const sizeStyles = theme.sizing.toggleButtonGroup(size);\n  const itemRefs = useRef<(HTMLElement | null)[]>([]);\n\n  // Internal state for uncontrolled mode\n  const [internalValue, setInternalValue] = useState<string[]>(() => {\n    if (defaultValue !== undefined) {\n      return Array.isArray(defaultValue) ? defaultValue : [defaultValue];\n    }\n    return [];\n  });\n\n  // Determine current value (controlled vs uncontrolled)\n  const currentValue =\n    value !== undefined\n      ? Array.isArray(value)\n        ? value\n        : [value]\n      : internalValue;\n\n  const isItemActive = (itemId: string) => currentValue.includes(itemId);\n\n  const enabledIndices = items\n    .map((item, index) => (!item.disabled ? index : -1))\n    .filter((i) => i !== -1);\n\n  const focusItem = useCallback((index: number) => {\n    const element = itemRefs.current[index];\n    if (element) {\n      element.focus();\n    }\n  }, []);\n\n  const handleSelect = useCallback(\n    (itemId: string) => {\n      let newValue: string[];\n\n      if (multiple) {\n        // Multiple selection mode\n        if (currentValue.includes(itemId)) {\n          newValue = currentValue.filter((v) => v !== itemId);\n        } else {\n          newValue = [...currentValue, itemId];\n        }\n      } else {\n        // Single selection mode\n        newValue = [itemId];\n      }\n\n      // Update internal state for uncontrolled mode\n      if (value === undefined) {\n        setInternalValue(newValue);\n      }\n\n      // Call onChange with appropriate type\n      if (onChange) {\n        if (multiple) {\n          onChange(newValue);\n        } else {\n          onChange(newValue[0] || \"\");\n        }\n      }\n    },\n    [currentValue, multiple, value, onChange]\n  );\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent, currentIndex: number) => {\n      const currentEnabledIndex = enabledIndices.indexOf(currentIndex);\n\n      switch (e.key) {\n        case \"ArrowRight\":\n        case \"ArrowDown\":\n          e.preventDefault();\n          {\n            const nextEnabledIndex =\n              currentEnabledIndex < enabledIndices.length - 1\n                ? enabledIndices[currentEnabledIndex + 1]\n                : enabledIndices[0];\n            focusItem(nextEnabledIndex);\n          }\n          break;\n\n        case \"ArrowLeft\":\n        case \"ArrowUp\":\n          e.preventDefault();\n          {\n            const prevEnabledIndex =\n              currentEnabledIndex > 0\n                ? enabledIndices[currentEnabledIndex - 1]\n                : enabledIndices[enabledIndices.length - 1];\n            focusItem(prevEnabledIndex);\n          }\n          break;\n\n        case \"Enter\":\n        case \" \":\n          e.preventDefault();\n          if (!items[currentIndex].disabled) {\n            handleSelect(items[currentIndex].id);\n          }\n          break;\n\n        default:\n          break;\n      }\n    },\n    [enabledIndices, focusItem, handleSelect, items]\n  );\n\n  const isSeparated = appearance === \"separated\";\n  const containerGap = isSeparated ? sizeStyles.itemGap : 0;\n\n  // Determine first active item for tabindex in single selection mode\n  const firstActiveIndex = items.findIndex((item) =>\n    currentValue.includes(item.id)\n  );\n  const firstEnabledIndex = enabledIndices[0] ?? 0;\n\n  return (\n    <Box\n      id={id}\n      role={multiple ? \"group\" : \"radiogroup\"}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      testID={testID}\n      flexDirection=\"row\"\n      alignItems=\"center\"\n      flexWrap=\"wrap\"\n      gap={containerGap}\n      {...(!isSeparated && {\n        borderWidth: 1,\n        borderColor: theme.colors.control.toggleButton.border,\n        borderStyle: \"solid\",\n        borderRadius: sizeStyles.borderRadius,\n        width: \"fit-content\",\n      })}\n    >\n      {items.map((item, index) => {\n        const isActive = isItemActive(item.id);\n        const isDisabled = item.disabled;\n        const itemId = id ? `${id}-item-${item.id}` : undefined;\n\n        // Determine tab index\n        let tabIndex: number;\n        if (isDisabled) {\n          tabIndex = -1;\n        } else if (multiple) {\n          // In multiple mode, all enabled items are tabbable\n          tabIndex = 0;\n        } else {\n          // In single mode, only the active item (or first enabled if none active) is tabbable\n          tabIndex =\n            isActive || (firstActiveIndex === -1 && index === firstEnabledIndex)\n              ? 0\n              : -1;\n        }\n\n        const handlePress = () => {\n          if (!isDisabled) {\n            handleSelect(item.id);\n          }\n        };\n\n        // Colors based on state - using toggle button specific colors\n        const toggleColors = theme.colors.control.toggleButton;\n\n        const bgColor = isDisabled\n          ? toggleColors.bgDisable\n          : isActive\n            ? toggleColors.bgPress\n            : toggleColors.bg;\n\n        const textColor = isDisabled\n          ? toggleColors.textDisable\n          : toggleColors.text;\n\n        const borderColor = isDisabled\n          ? toggleColors.borderDisable\n          : isActive\n            ? toggleColors.borderPress\n            : toggleColors.border;\n\n        return (\n          <Box\n            key={item.id}\n            as=\"button\"\n            role={multiple ? \"checkbox\" : \"radio\"}\n            id={itemId}\n            aria-checked={isActive}\n            aria-disabled={isDisabled}\n            aria-label={item[\"aria-label\"] || item.label}\n            tabIndex={tabIndex}\n            disabled={isDisabled}\n            ref={(el: HTMLElement | null) => {\n              itemRefs.current[index] = el;\n            }}\n            onPress={handlePress}\n            onKeyDown={(e: React.KeyboardEvent) => handleKeyDown(e, index)}\n            height={sizeStyles.height}\n            paddingHorizontal={sizeStyles.paddingHorizontal}\n            flexDirection=\"row\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            gap={sizeStyles.gap}\n            backgroundColor={bgColor}\n            {...(isSeparated && {\n              borderWidth: 1,\n              borderColor: borderColor,\n              borderStyle: \"solid\",\n              borderRadius: sizeStyles.borderRadius,\n            })}\n            cursor={isDisabled ? \"not-allowed\" : \"pointer\"}\n            hoverStyle={\n              !isDisabled && !isActive\n                ? {\n                    backgroundColor: toggleColors.bgHover,\n                    borderColor: toggleColors.borderHover,\n                  }\n                : undefined\n            }\n            {...(!isSeparated && {\n              borderLeftWidth: index > 0 ? 1 : 0,\n              borderLeftColor: theme.colors.control.toggleButton.border,\n              borderLeftStyle: \"solid\",\n            })}\n            style={{\n              flexShrink: 0,\n              ...(!isSeparated &&\n                index === 0 && {\n                  borderTopLeftRadius: sizeStyles.borderRadius - 1,\n                  borderBottomLeftRadius: sizeStyles.borderRadius - 1,\n                }),\n              ...(!isSeparated &&\n                index === items.length - 1 && {\n                  borderTopRightRadius: sizeStyles.borderRadius - 1,\n                  borderBottomRightRadius: sizeStyles.borderRadius - 1,\n                }),\n            }}\n          >\n            {item.iconLeft && (\n              <Icon size={sizeStyles.iconSize} color={textColor} aria-hidden>\n                {item.iconLeft}\n              </Icon>\n            )}\n            <Text\n              color={textColor}\n              fontSize={sizeStyles.fontSize}\n              fontWeight=\"400\"\n              textAlign=\"center\"\n              style={{\n                lineHeight: `${sizeStyles.lineHeight}px`,\n              }}\n            >\n              {item.label}\n            </Text>\n            {item.iconRight && (\n              <Icon size={sizeStyles.iconSize} color={textColor} aria-hidden>\n                {item.iconRight}\n              </Icon>\n            )}\n          </Box>\n        );\n      })}\n    </Box>\n  );\n};\n\nToggleButtonGroup.displayName = \"ToggleButtonGroup\";\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  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    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 { Text as RNText, TextStyle, AccessibilityRole } from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\n// Map web roles to React Native accessibility roles\nconst roleMap: Record<string, AccessibilityRole> = {\n  alert: \"alert\",\n  heading: \"header\",\n  button: \"button\",\n  link: \"link\",\n  text: \"text\",\n};\n\nexport const Text: React.FC<TextProps> = ({\n  children,\n  color,\n  fontSize,\n  fontWeight,\n  fontFamily,\n  id,\n  role,\n  ...props\n}) => {\n  // Extract the first font name from a comma-separated list (e.g. for web-style font stacks)\n  let resolvedFontFamily = fontFamily\n    ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n    : undefined;\n\n  // On native, if we don't have the custom font loaded, it's better to use the system font\n  // to avoid rendering issues or missing text.\n  if (resolvedFontFamily === \"Pilat Wide Bold\") {\n    resolvedFontFamily = undefined;\n  }\n\n  const style: TextStyle = {\n    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  };\n\n  // Map role to React Native accessibilityRole\n  const accessibilityRole = role ? roleMap[role] : undefined;\n\n  return (\n    <RNText style={style} testID={id} accessibilityRole={accessibilityRole}>\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"],"mappings":"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","names":["import_react","import_react_native","import_jsx_runtime","RNText","import_react_native","import_jsx_runtime","React","import_jsx_runtime"]}

package/native/index.mjs

@@ -0,0 +1,449 @@
+// src/ToggleButtonGroup.tsx
+import { useCallback, useRef, useState } from "react";
+
+// ../primitives-native/src/Box.tsx
+import {
+  View,
+  Pressable,
+  Image
+} from "react-native";
+import { jsx } from "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,
+  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,
+    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__ */ jsx(
+      Image,
+      {
+        source: { uri: src },
+        style: imageStyle,
+        testID: finalTestID,
+        resizeMode: "cover",
+        ...nativeRest
+      }
+    );
+  }
+  if (onPress) {
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        onPress,
+        onLayout,
+        onMoveShouldSetResponder,
+        onResponderGrant,
+        onResponderMove,
+        onResponderRelease,
+        onResponderTerminate,
+        style: ({ pressed }) => getContainerStyle(pressed),
+        testID: finalTestID,
+        ...nativeRest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: getContainerStyle(),
+      testID: finalTestID,
+      onLayout,
+      onMoveShouldSetResponder,
+      onResponderGrant,
+      onResponderMove,
+      onResponderRelease,
+      onResponderTerminate,
+      ...nativeRest,
+      children
+    }
+  );
+};
+
+// ../primitives-native/src/Text.tsx
+import { Text as RNText } from "react-native";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var roleMap = {
+  alert: "alert",
+  heading: "header",
+  button: "button",
+  link: "link",
+  text: "text"
+};
+var Text = ({
+  children,
+  color,
+  fontSize,
+  fontWeight,
+  fontFamily,
+  id,
+  role,
+  ...props
+}) => {
+  let resolvedFontFamily = fontFamily ? fontFamily.split(",")[0].replace(/['"]/g, "").trim() : void 0;
+  if (resolvedFontFamily === "Pilat Wide Bold") {
+    resolvedFontFamily = void 0;
+  }
+  const style = {
+    color,
+    fontSize: typeof fontSize === "number" ? fontSize : void 0,
+    fontWeight,
+    fontFamily: resolvedFontFamily,
+    textDecorationLine: props.textDecoration
+  };
+  const accessibilityRole = role ? roleMap[role] : void 0;
+  return /* @__PURE__ */ jsx2(RNText, { style, testID: id, accessibilityRole, children });
+};
+
+// ../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 }) => {
+  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, children: childrenWithProps });
+};
+
+// src/ToggleButtonGroup.tsx
+import { useDesignSystem } from "@xsolla/xui-core";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+var ToggleButtonGroup = ({
+  items,
+  value,
+  defaultValue,
+  onChange,
+  size = "md",
+  appearance = "separated",
+  multiple = false,
+  id,
+  testID,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy
+}) => {
+  const { theme } = useDesignSystem();
+  const sizeStyles = theme.sizing.toggleButtonGroup(size);
+  const itemRefs = useRef([]);
+  const [internalValue, setInternalValue] = useState(() => {
+    if (defaultValue !== void 0) {
+      return Array.isArray(defaultValue) ? defaultValue : [defaultValue];
+    }
+    return [];
+  });
+  const currentValue = value !== void 0 ? Array.isArray(value) ? value : [value] : internalValue;
+  const isItemActive = (itemId) => currentValue.includes(itemId);
+  const enabledIndices = items.map((item, index) => !item.disabled ? index : -1).filter((i) => i !== -1);
+  const focusItem = useCallback((index) => {
+    const element = itemRefs.current[index];
+    if (element) {
+      element.focus();
+    }
+  }, []);
+  const handleSelect = useCallback(
+    (itemId) => {
+      let newValue;
+      if (multiple) {
+        if (currentValue.includes(itemId)) {
+          newValue = currentValue.filter((v) => v !== itemId);
+        } else {
+          newValue = [...currentValue, itemId];
+        }
+      } else {
+        newValue = [itemId];
+      }
+      if (value === void 0) {
+        setInternalValue(newValue);
+      }
+      if (onChange) {
+        if (multiple) {
+          onChange(newValue);
+        } else {
+          onChange(newValue[0] || "");
+        }
+      }
+    },
+    [currentValue, multiple, value, onChange]
+  );
+  const handleKeyDown = useCallback(
+    (e, currentIndex) => {
+      const currentEnabledIndex = enabledIndices.indexOf(currentIndex);
+      switch (e.key) {
+        case "ArrowRight":
+        case "ArrowDown":
+          e.preventDefault();
+          {
+            const nextEnabledIndex = currentEnabledIndex < enabledIndices.length - 1 ? enabledIndices[currentEnabledIndex + 1] : enabledIndices[0];
+            focusItem(nextEnabledIndex);
+          }
+          break;
+        case "ArrowLeft":
+        case "ArrowUp":
+          e.preventDefault();
+          {
+            const prevEnabledIndex = currentEnabledIndex > 0 ? enabledIndices[currentEnabledIndex - 1] : enabledIndices[enabledIndices.length - 1];
+            focusItem(prevEnabledIndex);
+          }
+          break;
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          if (!items[currentIndex].disabled) {
+            handleSelect(items[currentIndex].id);
+          }
+          break;
+        default:
+          break;
+      }
+    },
+    [enabledIndices, focusItem, handleSelect, items]
+  );
+  const isSeparated = appearance === "separated";
+  const containerGap = isSeparated ? sizeStyles.itemGap : 0;
+  const firstActiveIndex = items.findIndex(
+    (item) => currentValue.includes(item.id)
+  );
+  const firstEnabledIndex = enabledIndices[0] ?? 0;
+  return /* @__PURE__ */ jsx4(
+    Box,
+    {
+      id,
+      role: multiple ? "group" : "radiogroup",
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      testID,
+      flexDirection: "row",
+      alignItems: "center",
+      flexWrap: "wrap",
+      gap: containerGap,
+      ...!isSeparated && {
+        borderWidth: 1,
+        borderColor: theme.colors.control.toggleButton.border,
+        borderStyle: "solid",
+        borderRadius: sizeStyles.borderRadius,
+        width: "fit-content"
+      },
+      children: items.map((item, index) => {
+        const isActive = isItemActive(item.id);
+        const isDisabled = item.disabled;
+        const itemId = id ? `${id}-item-${item.id}` : void 0;
+        let tabIndex;
+        if (isDisabled) {
+          tabIndex = -1;
+        } else if (multiple) {
+          tabIndex = 0;
+        } else {
+          tabIndex = isActive || firstActiveIndex === -1 && index === firstEnabledIndex ? 0 : -1;
+        }
+        const handlePress = () => {
+          if (!isDisabled) {
+            handleSelect(item.id);
+          }
+        };
+        const toggleColors = theme.colors.control.toggleButton;
+        const bgColor = isDisabled ? toggleColors.bgDisable : isActive ? toggleColors.bgPress : toggleColors.bg;
+        const textColor = isDisabled ? toggleColors.textDisable : toggleColors.text;
+        const borderColor = isDisabled ? toggleColors.borderDisable : isActive ? toggleColors.borderPress : toggleColors.border;
+        return /* @__PURE__ */ jsxs(
+          Box,
+          {
+            as: "button",
+            role: multiple ? "checkbox" : "radio",
+            id: itemId,
+            "aria-checked": isActive,
+            "aria-disabled": isDisabled,
+            "aria-label": item["aria-label"] || item.label,
+            tabIndex,
+            disabled: isDisabled,
+            ref: (el) => {
+              itemRefs.current[index] = el;
+            },
+            onPress: handlePress,
+            onKeyDown: (e) => handleKeyDown(e, index),
+            height: sizeStyles.height,
+            paddingHorizontal: sizeStyles.paddingHorizontal,
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: sizeStyles.gap,
+            backgroundColor: bgColor,
+            ...isSeparated && {
+              borderWidth: 1,
+              borderColor,
+              borderStyle: "solid",
+              borderRadius: sizeStyles.borderRadius
+            },
+            cursor: isDisabled ? "not-allowed" : "pointer",
+            hoverStyle: !isDisabled && !isActive ? {
+              backgroundColor: toggleColors.bgHover,
+              borderColor: toggleColors.borderHover
+            } : void 0,
+            ...!isSeparated && {
+              borderLeftWidth: index > 0 ? 1 : 0,
+              borderLeftColor: theme.colors.control.toggleButton.border,
+              borderLeftStyle: "solid"
+            },
+            style: {
+              flexShrink: 0,
+              ...!isSeparated && index === 0 && {
+                borderTopLeftRadius: sizeStyles.borderRadius - 1,
+                borderBottomLeftRadius: sizeStyles.borderRadius - 1
+              },
+              ...!isSeparated && index === items.length - 1 && {
+                borderTopRightRadius: sizeStyles.borderRadius - 1,
+                borderBottomRightRadius: sizeStyles.borderRadius - 1
+              }
+            },
+            children: [
+              item.iconLeft && /* @__PURE__ */ jsx4(Icon, { size: sizeStyles.iconSize, color: textColor, "aria-hidden": true, children: item.iconLeft }),
+              /* @__PURE__ */ jsx4(
+                Text,
+                {
+                  color: textColor,
+                  fontSize: sizeStyles.fontSize,
+                  fontWeight: "400",
+                  textAlign: "center",
+                  style: {
+                    lineHeight: `${sizeStyles.lineHeight}px`
+                  },
+                  children: item.label
+                }
+              ),
+              item.iconRight && /* @__PURE__ */ jsx4(Icon, { size: sizeStyles.iconSize, color: textColor, "aria-hidden": true, children: item.iconRight })
+            ]
+          },
+          item.id
+        );
+      })
+    }
+  );
+};
+ToggleButtonGroup.displayName = "ToggleButtonGroup";
+export {
+  ToggleButtonGroup
+};
+//# sourceMappingURL=index.mjs.map

package/native/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ToggleButtonGroup.tsx","../../../primitives-native/src/Box.tsx","../../../primitives-native/src/Text.tsx","../../../primitives-native/src/Icon.tsx"],"sourcesContent":["import React, { useCallback, useRef, useState } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text, Icon } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem } from \"@xsolla/xui-core\";\nimport type { ToggleButtonGroupProps } from \"./types\";\n\n/**\n * ToggleButtonGroup - A control for picking one or several options from a set\n *\n * Used to pick one or several options from a linear set of closely related options.\n * Can be used to filter or to sort elements.\n *\n * ## Accessibility Features\n *\n * - **Role**: Uses `role=\"radiogroup\"` for single selection, `role=\"group\"` for multiple\n * - **Keyboard Navigation**: Arrow keys to navigate, Enter/Space to select\n * - **ARIA**: Proper aria-checked and aria-disabled states\n */\nexport const ToggleButtonGroup: React.FC<ToggleButtonGroupProps> = ({\n  items,\n  value,\n  defaultValue,\n  onChange,\n  size = \"md\",\n  appearance = \"separated\",\n  multiple = false,\n  id,\n  testID,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n}) => {\n  const { theme } = useDesignSystem();\n  const sizeStyles = theme.sizing.toggleButtonGroup(size);\n  const itemRefs = useRef<(HTMLElement | null)[]>([]);\n\n  // Internal state for uncontrolled mode\n  const [internalValue, setInternalValue] = useState<string[]>(() => {\n    if (defaultValue !== undefined) {\n      return Array.isArray(defaultValue) ? defaultValue : [defaultValue];\n    }\n    return [];\n  });\n\n  // Determine current value (controlled vs uncontrolled)\n  const currentValue =\n    value !== undefined\n      ? Array.isArray(value)\n        ? value\n        : [value]\n      : internalValue;\n\n  const isItemActive = (itemId: string) => currentValue.includes(itemId);\n\n  const enabledIndices = items\n    .map((item, index) => (!item.disabled ? index : -1))\n    .filter((i) => i !== -1);\n\n  const focusItem = useCallback((index: number) => {\n    const element = itemRefs.current[index];\n    if (element) {\n      element.focus();\n    }\n  }, []);\n\n  const handleSelect = useCallback(\n    (itemId: string) => {\n      let newValue: string[];\n\n      if (multiple) {\n        // Multiple selection mode\n        if (currentValue.includes(itemId)) {\n          newValue = currentValue.filter((v) => v !== itemId);\n        } else {\n          newValue = [...currentValue, itemId];\n        }\n      } else {\n        // Single selection mode\n        newValue = [itemId];\n      }\n\n      // Update internal state for uncontrolled mode\n      if (value === undefined) {\n        setInternalValue(newValue);\n      }\n\n      // Call onChange with appropriate type\n      if (onChange) {\n        if (multiple) {\n          onChange(newValue);\n        } else {\n          onChange(newValue[0] || \"\");\n        }\n      }\n    },\n    [currentValue, multiple, value, onChange]\n  );\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent, currentIndex: number) => {\n      const currentEnabledIndex = enabledIndices.indexOf(currentIndex);\n\n      switch (e.key) {\n        case \"ArrowRight\":\n        case \"ArrowDown\":\n          e.preventDefault();\n          {\n            const nextEnabledIndex =\n              currentEnabledIndex < enabledIndices.length - 1\n                ? enabledIndices[currentEnabledIndex + 1]\n                : enabledIndices[0];\n            focusItem(nextEnabledIndex);\n          }\n          break;\n\n        case \"ArrowLeft\":\n        case \"ArrowUp\":\n          e.preventDefault();\n          {\n            const prevEnabledIndex =\n              currentEnabledIndex > 0\n                ? enabledIndices[currentEnabledIndex - 1]\n                : enabledIndices[enabledIndices.length - 1];\n            focusItem(prevEnabledIndex);\n          }\n          break;\n\n        case \"Enter\":\n        case \" \":\n          e.preventDefault();\n          if (!items[currentIndex].disabled) {\n            handleSelect(items[currentIndex].id);\n          }\n          break;\n\n        default:\n          break;\n      }\n    },\n    [enabledIndices, focusItem, handleSelect, items]\n  );\n\n  const isSeparated = appearance === \"separated\";\n  const containerGap = isSeparated ? sizeStyles.itemGap : 0;\n\n  // Determine first active item for tabindex in single selection mode\n  const firstActiveIndex = items.findIndex((item) =>\n    currentValue.includes(item.id)\n  );\n  const firstEnabledIndex = enabledIndices[0] ?? 0;\n\n  return (\n    <Box\n      id={id}\n      role={multiple ? \"group\" : \"radiogroup\"}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      testID={testID}\n      flexDirection=\"row\"\n      alignItems=\"center\"\n      flexWrap=\"wrap\"\n      gap={containerGap}\n      {...(!isSeparated && {\n        borderWidth: 1,\n        borderColor: theme.colors.control.toggleButton.border,\n        borderStyle: \"solid\",\n        borderRadius: sizeStyles.borderRadius,\n        width: \"fit-content\",\n      })}\n    >\n      {items.map((item, index) => {\n        const isActive = isItemActive(item.id);\n        const isDisabled = item.disabled;\n        const itemId = id ? `${id}-item-${item.id}` : undefined;\n\n        // Determine tab index\n        let tabIndex: number;\n        if (isDisabled) {\n          tabIndex = -1;\n        } else if (multiple) {\n          // In multiple mode, all enabled items are tabbable\n          tabIndex = 0;\n        } else {\n          // In single mode, only the active item (or first enabled if none active) is tabbable\n          tabIndex =\n            isActive || (firstActiveIndex === -1 && index === firstEnabledIndex)\n              ? 0\n              : -1;\n        }\n\n        const handlePress = () => {\n          if (!isDisabled) {\n            handleSelect(item.id);\n          }\n        };\n\n        // Colors based on state - using toggle button specific colors\n        const toggleColors = theme.colors.control.toggleButton;\n\n        const bgColor = isDisabled\n          ? toggleColors.bgDisable\n          : isActive\n            ? toggleColors.bgPress\n            : toggleColors.bg;\n\n        const textColor = isDisabled\n          ? toggleColors.textDisable\n          : toggleColors.text;\n\n        const borderColor = isDisabled\n          ? toggleColors.borderDisable\n          : isActive\n            ? toggleColors.borderPress\n            : toggleColors.border;\n\n        return (\n          <Box\n            key={item.id}\n            as=\"button\"\n            role={multiple ? \"checkbox\" : \"radio\"}\n            id={itemId}\n            aria-checked={isActive}\n            aria-disabled={isDisabled}\n            aria-label={item[\"aria-label\"] || item.label}\n            tabIndex={tabIndex}\n            disabled={isDisabled}\n            ref={(el: HTMLElement | null) => {\n              itemRefs.current[index] = el;\n            }}\n            onPress={handlePress}\n            onKeyDown={(e: React.KeyboardEvent) => handleKeyDown(e, index)}\n            height={sizeStyles.height}\n            paddingHorizontal={sizeStyles.paddingHorizontal}\n            flexDirection=\"row\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            gap={sizeStyles.gap}\n            backgroundColor={bgColor}\n            {...(isSeparated && {\n              borderWidth: 1,\n              borderColor: borderColor,\n              borderStyle: \"solid\",\n              borderRadius: sizeStyles.borderRadius,\n            })}\n            cursor={isDisabled ? \"not-allowed\" : \"pointer\"}\n            hoverStyle={\n              !isDisabled && !isActive\n                ? {\n                    backgroundColor: toggleColors.bgHover,\n                    borderColor: toggleColors.borderHover,\n                  }\n                : undefined\n            }\n            {...(!isSeparated && {\n              borderLeftWidth: index > 0 ? 1 : 0,\n              borderLeftColor: theme.colors.control.toggleButton.border,\n              borderLeftStyle: \"solid\",\n            })}\n            style={{\n              flexShrink: 0,\n              ...(!isSeparated &&\n                index === 0 && {\n                  borderTopLeftRadius: sizeStyles.borderRadius - 1,\n                  borderBottomLeftRadius: sizeStyles.borderRadius - 1,\n                }),\n              ...(!isSeparated &&\n                index === items.length - 1 && {\n                  borderTopRightRadius: sizeStyles.borderRadius - 1,\n                  borderBottomRightRadius: sizeStyles.borderRadius - 1,\n                }),\n            }}\n          >\n            {item.iconLeft && (\n              <Icon size={sizeStyles.iconSize} color={textColor} aria-hidden>\n                {item.iconLeft}\n              </Icon>\n            )}\n            <Text\n              color={textColor}\n              fontSize={sizeStyles.fontSize}\n              fontWeight=\"400\"\n              textAlign=\"center\"\n              style={{\n                lineHeight: `${sizeStyles.lineHeight}px`,\n              }}\n            >\n              {item.label}\n            </Text>\n            {item.iconRight && (\n              <Icon size={sizeStyles.iconSize} color={textColor} aria-hidden>\n                {item.iconRight}\n              </Icon>\n            )}\n          </Box>\n        );\n      })}\n    </Box>\n  );\n};\n\nToggleButtonGroup.displayName = \"ToggleButtonGroup\";\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  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    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 { Text as RNText, TextStyle, AccessibilityRole } from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\n// Map web roles to React Native accessibility roles\nconst roleMap: Record<string, AccessibilityRole> = {\n  alert: \"alert\",\n  heading: \"header\",\n  button: \"button\",\n  link: \"link\",\n  text: \"text\",\n};\n\nexport const Text: React.FC<TextProps> = ({\n  children,\n  color,\n  fontSize,\n  fontWeight,\n  fontFamily,\n  id,\n  role,\n  ...props\n}) => {\n  // Extract the first font name from a comma-separated list (e.g. for web-style font stacks)\n  let resolvedFontFamily = fontFamily\n    ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n    : undefined;\n\n  // On native, if we don't have the custom font loaded, it's better to use the system font\n  // to avoid rendering issues or missing text.\n  if (resolvedFontFamily === \"Pilat Wide Bold\") {\n    resolvedFontFamily = undefined;\n  }\n\n  const style: TextStyle = {\n    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  };\n\n  // Map role to React Native accessibilityRole\n  const accessibilityRole = role ? roleMap[role] : undefined;\n\n  return (\n    <RNText style={style} testID={id} accessibilityRole={accessibilityRole}>\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"],"mappings":"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","names":["jsx","View","jsx","jsx"]}