@xsolla/xui-tag 0.118.0 → 0.119.0

package/README.md

@@ -1,6 +1,6 @@
 # Tag
 
-A cross-platform React tag component for displaying labels, categories, and removable chips. Supports multiple tones and optional icons.
+A cross-platform React tag component for displaying labels, categories, and removable chips. Supports multiple tones, solid/outlined types, and optional left/right icons.
 
 ## Installation
 
@@ -39,7 +39,6 @@ export default function TagTones() {
   return (
     <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
       <Tag tone="primary">Primary</Tag>
-      <Tag tone="secondary">Secondary</Tag>
       <Tag tone="brand">Brand</Tag>
       <Tag tone="brandExtra">Brand Extra</Tag>
       <Tag tone="success">Success</Tag>
@@ -70,7 +69,23 @@ export default function TagSizes() {
 }
 ```
 
-### Tag with Icon
+### Solid vs Outlined
+
+```tsx
+import * as React from 'react';
+import { Tag } from '@xsolla/xui-tag';
+
+export default function TagTypes() {
+  return (
+    <div style={{ display: 'flex', gap: 8 }}>
+      <Tag tone="brand" type="solid">Solid</Tag>
+      <Tag tone="brand" type="outlined">Outlined</Tag>
+    </div>
+  );
+}
+```
+
+### Tag with Icons
 
 ```tsx
 import * as React from 'react';
@@ -81,14 +96,26 @@ import { Star, Clock } from '@xsolla/xui-icons-base';
 export default function TagWithIcon() {
   return (
     <div style={{ display: 'flex', gap: 8 }}>
-      <Tag icon={<Star size={12} />} tone="warning">Featured</Tag>
-      <Tag icon={<Check size={12} />} tone="success">Verified</Tag>
-      <Tag icon={<Clock size={12} />} tone="neutral">Pending</Tag>
+      <Tag iconLeft={<Star size={12} />} tone="warning">Featured</Tag>
+      <Tag iconLeft={<Check size={12} />} tone="success">Verified</Tag>
+      <Tag iconLeft={<Clock size={12} />} iconRight={<Star size={12} />} tone="neutral">Pending</Tag>
     </div>
   );
 }
 ```
 
+### Icon-Only Tag
+
+```tsx
+import * as React from 'react';
+import { Tag } from '@xsolla/xui-tag';
+import { Check } from '@xsolla/xui-icons';
+
+export default function IconOnlyTag() {
+  return <Tag iconLeft={<Check size={12} />} tone="success" />;
+}
+```
+
 ### Removable Tag
 
 ```tsx
@@ -123,9 +150,11 @@ import { Tag } from '@xsolla/xui-tag';
 
 <Tag
   size="md"                    // Size variant
-  tone="brand"                // Color tone
-  icon={<Icon />}             // Optional leading icon
-  onRemove={handleRemove}     // Makes tag removable
+  tone="brand"                 // Color tone
+  type="solid"                 // Solid or outlined
+  iconLeft={<Icon />}          // Optional leading icon
+  iconRight={<Icon />}         // Optional trailing icon
+  onRemove={handleRemove}      // Makes tag removable (renders X icon)
 >
   Tag Label
 </Tag>
@@ -169,22 +198,13 @@ import { CheckCircle, Clock, XCircle } from '@xsolla/xui-icons-base';
 export default function StatusTags() {
   return (
     <div style={{ display: 'flex', gap: 8 }}>
-      <Tag
-        icon={<CheckCircle size={12} />}
-        tone="success"
-      >
+      <Tag iconLeft={<CheckCircle size={12} />} tone="success">
         Completed
       </Tag>
-      <Tag
-        icon={<Clock size={12} />}
-        tone="warning"
-      >
+      <Tag iconLeft={<Clock size={12} />} tone="warning">
         In Progress
       </Tag>
-      <Tag
-        icon={<XCircle size={12} />}
-        tone="alert"
-      >
+      <Tag iconLeft={<XCircle size={12} />} tone="alert">
         Failed
       </Tag>
     </div>
@@ -216,7 +236,7 @@ export default function TagInput() {
         {tags.map(tag => (
           <Tag
             key={tag}
-            tone="secondary"
+            tone="primary"
             onRemove={() => setTags(tags.filter(t => t !== tag))}
           >
             {tag}
@@ -244,18 +264,19 @@ A tag/chip component.
 
 | Prop | Type | Default | Description |
 | :--- | :--- | :------ | :---------- |
-| children | `ReactNode` | - | **Required.** Tag content. |
+| children | `ReactNode` | - | Tag content. Optional for icon-only tags. |
 | size | `"xl" \| "lg" \| "md" \| "sm" \| "xs"` | `"md"` | Size of the tag. |
-| tone | `"primary" \| "secondary" \| "brand" \| "brandExtra" \| "success" \| "warning" \| "alert" \| "neutral"` | `"primary"` | Color tone. |
-| icon | `ReactNode` | - | Leading icon. |
-| onRemove | `() => void` | - | Callback for remove button. Makes tag removable. |
+| tone | `"primary" \| "brand" \| "brandExtra" \| "success" \| "warning" \| "alert" \| "neutral"` | `"primary"` | Color tone. |
+| type | `"solid" \| "outlined"` | `"solid"` | Visual type. Solid fills background; outlined uses a border with lighter background. |
+| iconLeft | `ReactNode` | - | Leading icon. |
+| iconRight | `ReactNode` | - | Trailing icon. |
+| onRemove | `() => void` | - | Callback for remove button. Renders an X icon in the trailing position. |
 
-**Tone Color Mapping:**
+**Solid Tone Color Mapping:**
 
 | Tone | Background | Text |
 | :--- | :--------- | :--- |
 | primary | Background primary | Content primary |
-| secondary | Background secondary | Content primary |
 | brand | Brand primary | On brand |
 | brandExtra | BrandExtra primary | On brandExtra |
 | success | Success primary | On success |
@@ -263,14 +284,31 @@ A tag/chip component.
 | alert | Alert primary | On alert |
 | neutral | Neutral primary | On neutral |
 
+**Outlined Tone Color Mapping:**
+
+| Tone | Background | Border | Text |
+| :--- | :--------- | :----- | :--- |
+| primary | Background primary | Border secondary | Content primary |
+| brand | Brand secondary | Border brand | Content brand primary |
+| brandExtra | BrandExtra secondary | Border brandExtra | Content brandExtra primary |
+| success | Success secondary | Border success | Content success primary |
+| warning | Warning secondary | Border warning | Content warning primary |
+| alert | Alert secondary | Border alert | Content alert primary |
+| neutral | Neutral secondary | Border neutral | Content neutral primary |
+
 ## Theming
 
 Tag uses the design system theme for colors:
 
 ```typescript
-// Colors accessed via theme (example for "brand" tone)
+// Solid colors (example for "brand" tone)
 theme.colors.background.brand.primary  // Background
-theme.colors.content.onBrand           // Text color
+theme.colors.content.on.brand         // Text color
+
+// Outlined colors (example for "brand" tone)
+theme.colors.background.brand.secondary  // Background
+theme.colors.border.brand               // Border color
+theme.colors.content.brand.primary      // Text color
 ```
 
 ## Accessibility

package/native/index.d.mts

@@ -2,12 +2,11 @@ import React from 'react';
 
 interface TagProps {
     size?: "xl" | "lg" | "md" | "sm" | "xs";
-    tone?: "primary" | "secondary" | "brand" | "brandExtra" | "success" | "warning" | "alert" | "neutral";
-    variant?: "default" | "selectable";
-    selected?: boolean;
-    onPress?: () => void;
-    children: React.ReactNode;
-    icon?: React.ReactNode;
+    tone?: "primary" | "brand" | "brandExtra" | "success" | "warning" | "alert" | "neutral";
+    type?: "solid" | "outlined";
+    children?: React.ReactNode;
+    iconLeft?: React.ReactNode;
+    iconRight?: React.ReactNode;
     onRemove?: () => void;
 }
 declare const Tag: React.FC<TagProps>;

package/native/index.d.ts

@@ -2,12 +2,11 @@ import React from 'react';
 
 interface TagProps {
     size?: "xl" | "lg" | "md" | "sm" | "xs";
-    tone?: "primary" | "secondary" | "brand" | "brandExtra" | "success" | "warning" | "alert" | "neutral";
-    variant?: "default" | "selectable";
-    selected?: boolean;
-    onPress?: () => void;
-    children: React.ReactNode;
-    icon?: React.ReactNode;
+    tone?: "primary" | "brand" | "brandExtra" | "success" | "warning" | "alert" | "neutral";
+    type?: "solid" | "outlined";
+    children?: React.ReactNode;
+    iconLeft?: React.ReactNode;
+    iconRight?: React.ReactNode;
     onRemove?: () => void;
 }
 declare const Tag: React.FC<TagProps>;

package/native/index.js

@@ -291,33 +291,69 @@ var Icon = ({ children, color, size }) => {
 var import_xui_core = require("@xsolla/xui-core");
 var import_xui_icons = require("@xsolla/xui-icons");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var SELECTABLE_BORDER_RADIUS = 8;
 var Tag = ({
   size = "md",
   tone = "primary",
-  variant = "default",
-  selected = false,
-  onPress,
+  type = "solid",
   children,
-  icon,
+  iconLeft,
+  iconRight,
   onRemove
 }) => {
   const { theme } = (0, import_xui_core.useDesignSystem)();
   const sizeStyles = theme.sizing.tag(size);
   const resolveColors = () => {
-    if (variant === "selectable") {
-      if (selected) {
-        return {
-          bg: theme.colors.control.brand.secondary.bg,
-          text: theme.colors.content.brand.primary,
-          border: theme.colors.border.secondary
-        };
+    if (type === "outlined") {
+      switch (tone) {
+        case "primary":
+          return {
+            bg: theme.colors.background.primary,
+            text: theme.colors.content.primary,
+            border: theme.colors.border.secondary
+          };
+        case "brand":
+          return {
+            bg: theme.colors.background.brand.secondary,
+            text: theme.colors.content.brand.primary,
+            border: theme.colors.border.brand
+          };
+        case "brandExtra":
+          return {
+            bg: theme.colors.background.brandExtra.secondary,
+            text: theme.colors.content.brandExtra.primary,
+            border: theme.colors.border.brandExtra
+          };
+        case "success":
+          return {
+            bg: theme.colors.background.success.secondary,
+            text: theme.colors.content.success.primary,
+            border: theme.colors.border.success
+          };
+        case "warning":
+          return {
+            bg: theme.colors.background.warning.secondary,
+            text: theme.colors.content.warning.primary,
+            border: theme.colors.border.warning
+          };
+        case "alert":
+          return {
+            bg: theme.colors.background.alert.secondary,
+            text: theme.colors.content.alert.primary,
+            border: theme.colors.border.alert
+          };
+        case "neutral":
+          return {
+            bg: theme.colors.background.neutral.secondary,
+            text: theme.colors.content.neutral.primary,
+            border: theme.colors.border.neutral
+          };
+        default:
+          return {
+            bg: theme.colors.background.primary,
+            text: theme.colors.content.primary,
+            border: theme.colors.border.secondary
+          };
       }
-      return {
-        bg: theme.colors.overlay.mono,
-        text: theme.colors.content.primary,
-        border: theme.colors.border.secondary
-      };
     }
     switch (tone) {
       case "primary":
@@ -326,12 +362,6 @@ var Tag = ({
           text: theme.colors.content.primary,
           border: void 0
         };
-      case "secondary":
-        return {
-          bg: theme.colors.background.secondary,
-          text: theme.colors.content.primary,
-          border: void 0
-        };
       case "brand":
         return {
           bg: theme.colors.background.brand.primary,
@@ -377,34 +407,29 @@ var Tag = ({
     }
   };
   const { bg, text, border } = resolveColors();
-  const isSelectable = variant === "selectable";
-  const borderRadius = isSelectable ? SELECTABLE_BORDER_RADIUS : sizeStyles.radius;
+  const isOutlined = type === "outlined";
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     Box,
     {
-      as: isSelectable ? "button" : void 0,
-      onPress: isSelectable ? onPress : void 0,
       backgroundColor: bg,
-      borderRadius,
+      borderRadius: sizeStyles.radius,
       height: sizeStyles.height,
       paddingHorizontal: sizeStyles.padding,
       flexDirection: "row",
       alignItems: "center",
       justifyContent: "center",
       gap: sizeStyles.gap,
-      borderWidth: isSelectable ? 1 : 0,
+      borderWidth: isOutlined ? 1 : 0,
       borderColor: border,
-      borderStyle: isSelectable ? "solid" : void 0,
-      cursor: isSelectable ? "pointer" : void 0,
-      hoverStyle: isSelectable && !selected ? { backgroundColor: theme.colors.control.brand.tertiary.bgHover } : void 0,
+      borderStyle: isOutlined ? "solid" : void 0,
       style: {
         overflow: "hidden",
         textOverflow: "ellipsis",
         whiteSpace: "nowrap"
       },
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { size: sizeStyles.iconSize, color: text, children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        iconLeft && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { size: sizeStyles.iconSize, color: text, children: iconLeft }),
+        children && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           Text,
           {
             color: text,
@@ -418,7 +443,7 @@ var Tag = ({
             children
           }
         ),
-        onRemove && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Box, { onPress: onRemove, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_xui_icons.X, { size: sizeStyles.iconSize, color: text }) })
+        onRemove ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Box, { onPress: onRemove, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_xui_icons.X, { size: sizeStyles.iconSize, color: text }) }) : iconRight && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { size: sizeStyles.iconSize, color: text, children: iconRight })
       ]
     }
   );

package/native/index.js.flow

@@ -10,18 +10,16 @@ declare interface TagProps {
   size?: "xl" | "lg" | "md" | "sm" | "xs";
   tone?:
     | "primary"
-    | "secondary"
     | "brand"
     | "brandExtra"
     | "success"
     | "warning"
     | "alert"
     | "neutral";
-  variant?: "default" | "selectable";
-  selected?: boolean;
-  onPress?: () => void;
-  children: React.ReactNode;
-  icon?: React.ReactNode;
+  type?: "solid" | "outlined";
+  children?: React.ReactNode;
+  iconLeft?: React.ReactNode;
+  iconRight?: React.ReactNode;
   onRemove?: () => void;
 }
 declare var Tag: React.FC<TagProps>;

package/native/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.tsx","../../../primitives-native/src/Box.tsx","../../../primitives-native/src/Text.tsx","../../../primitives-native/src/Icon.tsx","../../src/Tag.tsx"],"sourcesContent":["export * from \"./Tag\";\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 {\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,\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 { useDesignSystem } from \"@xsolla/xui-core\";\nimport { X } from \"@xsolla/xui-icons\";\n\nexport interface TagProps {\n  size?: \"xl\" | \"lg\" | \"md\" | \"sm\" | \"xs\";\n  tone?:\n    | \"primary\"\n    | \"secondary\"\n    | \"brand\"\n    | \"brandExtra\"\n    | \"success\"\n    | \"warning\"\n    | \"alert\"\n    | \"neutral\";\n  variant?: \"default\" | \"selectable\";\n  selected?: boolean;\n  onPress?: () => void;\n  children: React.ReactNode;\n  icon?: React.ReactNode;\n  onRemove?: () => void;\n}\n\nconst SELECTABLE_BORDER_RADIUS = 8;\n\nexport const Tag: React.FC<TagProps> = ({\n  size = \"md\",\n  tone = \"primary\",\n  variant = \"default\",\n  selected = false,\n  onPress,\n  children,\n  icon,\n  onRemove,\n}) => {\n  const { theme } = useDesignSystem();\n  const sizeStyles = theme.sizing.tag(size);\n\n  const resolveColors = () => {\n    if (variant === \"selectable\") {\n      if (selected) {\n        return {\n          bg: theme.colors.control.brand.secondary.bg,\n          text: theme.colors.content.brand.primary,\n          border: theme.colors.border.secondary,\n        };\n      }\n      return {\n        bg: theme.colors.overlay.mono,\n        text: theme.colors.content.primary,\n        border: theme.colors.border.secondary,\n      };\n    }\n\n    switch (tone) {\n      case \"primary\":\n        return {\n          bg: theme.colors.background.primary,\n          text: theme.colors.content.primary,\n          border: undefined,\n        };\n      case \"secondary\":\n        return {\n          bg: theme.colors.background.secondary,\n          text: theme.colors.content.primary,\n          border: undefined,\n        };\n      case \"brand\":\n        return {\n          bg: theme.colors.background.brand.primary,\n          text: theme.colors.content.on.brand,\n          border: undefined,\n        };\n      case \"brandExtra\":\n        return {\n          bg: theme.colors.background.brandExtra.primary,\n          text: theme.colors.content.on.brandExtra,\n          border: undefined,\n        };\n      case \"success\":\n        return {\n          bg: theme.colors.background.success.primary,\n          text: theme.colors.content.on.success,\n          border: undefined,\n        };\n      case \"warning\":\n        return {\n          bg: theme.colors.background.warning.primary,\n          text: theme.colors.content.on.warning,\n          border: undefined,\n        };\n      case \"alert\":\n        return {\n          bg: theme.colors.background.alert.primary,\n          text: theme.colors.content.on.alert,\n          border: undefined,\n        };\n      case \"neutral\":\n        return {\n          bg: theme.colors.background.neutral.primary,\n          text: theme.colors.content.on.neutral,\n          border: undefined,\n        };\n      default:\n        return {\n          bg: theme.colors.background.primary,\n          text: theme.colors.content.primary,\n          border: undefined,\n        };\n    }\n  };\n\n  const { bg, text, border } = resolveColors();\n  const isSelectable = variant === \"selectable\";\n  const borderRadius = isSelectable\n    ? SELECTABLE_BORDER_RADIUS\n    : sizeStyles.radius;\n\n  return (\n    <Box\n      as={isSelectable ? \"button\" : undefined}\n      onPress={isSelectable ? onPress : undefined}\n      backgroundColor={bg}\n      borderRadius={borderRadius}\n      height={sizeStyles.height}\n      paddingHorizontal={sizeStyles.padding}\n      flexDirection=\"row\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      gap={sizeStyles.gap}\n      borderWidth={isSelectable ? 1 : 0}\n      borderColor={border}\n      borderStyle={isSelectable ? \"solid\" : undefined}\n      cursor={isSelectable ? \"pointer\" : undefined}\n      hoverStyle={\n        isSelectable && !selected\n          ? { backgroundColor: theme.colors.control.brand.tertiary.bgHover }\n          : undefined\n      }\n      style={{\n        overflow: \"hidden\",\n        textOverflow: \"ellipsis\",\n        whiteSpace: \"nowrap\",\n      }}\n    >\n      {icon && (\n        <Icon size={sizeStyles.iconSize} color={text}>\n          {icon}\n        </Icon>\n      )}\n\n      <Text\n        color={text}\n        fontSize={sizeStyles.fontSize}\n        fontWeight=\"500\"\n        whiteSpace=\"nowrap\"\n        style={{\n          overflow: \"hidden\",\n          textOverflow: \"ellipsis\",\n        }}\n      >\n        {children}\n      </Text>\n\n      {onRemove && (\n        <Box onPress={onRemove}>\n          <X size={sizeStyles.iconSize} color={text} />\n        </Box>\n      )}\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"]}
+{"version":3,"sources":["../../src/index.tsx","../../../primitives-native/src/Box.tsx","../../../primitives-native/src/Text.tsx","../../../primitives-native/src/Icon.tsx","../../src/Tag.tsx"],"sourcesContent":["export * from \"./Tag\";\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 {\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,\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 { useDesignSystem } from \"@xsolla/xui-core\";\nimport { X } from \"@xsolla/xui-icons\";\n\nexport interface TagProps {\n  size?: \"xl\" | \"lg\" | \"md\" | \"sm\" | \"xs\";\n  tone?:\n    | \"primary\"\n    | \"brand\"\n    | \"brandExtra\"\n    | \"success\"\n    | \"warning\"\n    | \"alert\"\n    | \"neutral\";\n  type?: \"solid\" | \"outlined\";\n  children?: React.ReactNode;\n  iconLeft?: React.ReactNode;\n  iconRight?: React.ReactNode;\n  onRemove?: () => void;\n}\n\nexport const Tag: React.FC<TagProps> = ({\n  size = \"md\",\n  tone = \"primary\",\n  type = \"solid\",\n  children,\n  iconLeft,\n  iconRight,\n  onRemove,\n}) => {\n  const { theme } = useDesignSystem();\n  const sizeStyles = theme.sizing.tag(size);\n\n  const resolveColors = () => {\n    if (type === \"outlined\") {\n      switch (tone) {\n        case \"primary\":\n          return {\n            bg: theme.colors.background.primary,\n            text: theme.colors.content.primary,\n            border: theme.colors.border.secondary,\n          };\n        case \"brand\":\n          return {\n            bg: theme.colors.background.brand.secondary,\n            text: theme.colors.content.brand.primary,\n            border: theme.colors.border.brand,\n          };\n        case \"brandExtra\":\n          return {\n            bg: theme.colors.background.brandExtra.secondary,\n            text: theme.colors.content.brandExtra.primary,\n            border: theme.colors.border.brandExtra,\n          };\n        case \"success\":\n          return {\n            bg: theme.colors.background.success.secondary,\n            text: theme.colors.content.success.primary,\n            border: theme.colors.border.success,\n          };\n        case \"warning\":\n          return {\n            bg: theme.colors.background.warning.secondary,\n            text: theme.colors.content.warning.primary,\n            border: theme.colors.border.warning,\n          };\n        case \"alert\":\n          return {\n            bg: theme.colors.background.alert.secondary,\n            text: theme.colors.content.alert.primary,\n            border: theme.colors.border.alert,\n          };\n        case \"neutral\":\n          return {\n            bg: theme.colors.background.neutral.secondary,\n            text: theme.colors.content.neutral.primary,\n            border: theme.colors.border.neutral,\n          };\n        default:\n          return {\n            bg: theme.colors.background.primary,\n            text: theme.colors.content.primary,\n            border: theme.colors.border.secondary,\n          };\n      }\n    }\n\n    switch (tone) {\n      case \"primary\":\n        return {\n          bg: theme.colors.background.primary,\n          text: theme.colors.content.primary,\n          border: undefined,\n        };\n      case \"brand\":\n        return {\n          bg: theme.colors.background.brand.primary,\n          text: theme.colors.content.on.brand,\n          border: undefined,\n        };\n      case \"brandExtra\":\n        return {\n          bg: theme.colors.background.brandExtra.primary,\n          text: theme.colors.content.on.brandExtra,\n          border: undefined,\n        };\n      case \"success\":\n        return {\n          bg: theme.colors.background.success.primary,\n          text: theme.colors.content.on.success,\n          border: undefined,\n        };\n      case \"warning\":\n        return {\n          bg: theme.colors.background.warning.primary,\n          text: theme.colors.content.on.warning,\n          border: undefined,\n        };\n      case \"alert\":\n        return {\n          bg: theme.colors.background.alert.primary,\n          text: theme.colors.content.on.alert,\n          border: undefined,\n        };\n      case \"neutral\":\n        return {\n          bg: theme.colors.background.neutral.primary,\n          text: theme.colors.content.on.neutral,\n          border: undefined,\n        };\n      default:\n        return {\n          bg: theme.colors.background.primary,\n          text: theme.colors.content.primary,\n          border: undefined,\n        };\n    }\n  };\n\n  const { bg, text, border } = resolveColors();\n  const isOutlined = type === \"outlined\";\n\n  return (\n    <Box\n      backgroundColor={bg}\n      borderRadius={sizeStyles.radius}\n      height={sizeStyles.height}\n      paddingHorizontal={sizeStyles.padding}\n      flexDirection=\"row\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      gap={sizeStyles.gap}\n      borderWidth={isOutlined ? 1 : 0}\n      borderColor={border}\n      borderStyle={isOutlined ? \"solid\" : undefined}\n      style={{\n        overflow: \"hidden\",\n        textOverflow: \"ellipsis\",\n        whiteSpace: \"nowrap\",\n      }}\n    >\n      {iconLeft && (\n        <Icon size={sizeStyles.iconSize} color={text}>\n          {iconLeft}\n        </Icon>\n      )}\n\n      {children && (\n        <Text\n          color={text}\n          fontSize={sizeStyles.fontSize}\n          fontWeight=\"500\"\n          whiteSpace=\"nowrap\"\n          style={{\n            overflow: \"hidden\",\n            textOverflow: \"ellipsis\",\n          }}\n        >\n          {children}\n        </Text>\n      )}\n\n      {onRemove ? (\n        <Box onPress={onRemove}>\n          <X size={sizeStyles.iconSize} color={text} />\n        </Box>\n      ) : (\n        iconRight && (\n          <Icon size={sizeStyles.iconSize} color={text}>\n            {iconRight}\n          </Icon>\n        )\n      )}\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

@@ -262,33 +262,69 @@ var Icon = ({ children, color, size }) => {
 import { useDesignSystem } from "@xsolla/xui-core";
 import { X } from "@xsolla/xui-icons";
 import { jsx as jsx4, jsxs } from "react/jsx-runtime";
-var SELECTABLE_BORDER_RADIUS = 8;
 var Tag = ({
   size = "md",
   tone = "primary",
-  variant = "default",
-  selected = false,
-  onPress,
+  type = "solid",
   children,
-  icon,
+  iconLeft,
+  iconRight,
   onRemove
 }) => {
   const { theme } = useDesignSystem();
   const sizeStyles = theme.sizing.tag(size);
   const resolveColors = () => {
-    if (variant === "selectable") {
-      if (selected) {
-        return {
-          bg: theme.colors.control.brand.secondary.bg,
-          text: theme.colors.content.brand.primary,
-          border: theme.colors.border.secondary
-        };
+    if (type === "outlined") {
+      switch (tone) {
+        case "primary":
+          return {
+            bg: theme.colors.background.primary,
+            text: theme.colors.content.primary,
+            border: theme.colors.border.secondary
+          };
+        case "brand":
+          return {
+            bg: theme.colors.background.brand.secondary,
+            text: theme.colors.content.brand.primary,
+            border: theme.colors.border.brand
+          };
+        case "brandExtra":
+          return {
+            bg: theme.colors.background.brandExtra.secondary,
+            text: theme.colors.content.brandExtra.primary,
+            border: theme.colors.border.brandExtra
+          };
+        case "success":
+          return {
+            bg: theme.colors.background.success.secondary,
+            text: theme.colors.content.success.primary,
+            border: theme.colors.border.success
+          };
+        case "warning":
+          return {
+            bg: theme.colors.background.warning.secondary,
+            text: theme.colors.content.warning.primary,
+            border: theme.colors.border.warning
+          };
+        case "alert":
+          return {
+            bg: theme.colors.background.alert.secondary,
+            text: theme.colors.content.alert.primary,
+            border: theme.colors.border.alert
+          };
+        case "neutral":
+          return {
+            bg: theme.colors.background.neutral.secondary,
+            text: theme.colors.content.neutral.primary,
+            border: theme.colors.border.neutral
+          };
+        default:
+          return {
+            bg: theme.colors.background.primary,
+            text: theme.colors.content.primary,
+            border: theme.colors.border.secondary
+          };
       }
-      return {
-        bg: theme.colors.overlay.mono,
-        text: theme.colors.content.primary,
-        border: theme.colors.border.secondary
-      };
     }
     switch (tone) {
       case "primary":
@@ -297,12 +333,6 @@ var Tag = ({
           text: theme.colors.content.primary,
           border: void 0
         };
-      case "secondary":
-        return {
-          bg: theme.colors.background.secondary,
-          text: theme.colors.content.primary,
-          border: void 0
-        };
       case "brand":
         return {
           bg: theme.colors.background.brand.primary,
@@ -348,34 +378,29 @@ var Tag = ({
     }
   };
   const { bg, text, border } = resolveColors();
-  const isSelectable = variant === "selectable";
-  const borderRadius = isSelectable ? SELECTABLE_BORDER_RADIUS : sizeStyles.radius;
+  const isOutlined = type === "outlined";
   return /* @__PURE__ */ jsxs(
     Box,
     {
-      as: isSelectable ? "button" : void 0,
-      onPress: isSelectable ? onPress : void 0,
       backgroundColor: bg,
-      borderRadius,
+      borderRadius: sizeStyles.radius,
       height: sizeStyles.height,
       paddingHorizontal: sizeStyles.padding,
       flexDirection: "row",
       alignItems: "center",
       justifyContent: "center",
       gap: sizeStyles.gap,
-      borderWidth: isSelectable ? 1 : 0,
+      borderWidth: isOutlined ? 1 : 0,
       borderColor: border,
-      borderStyle: isSelectable ? "solid" : void 0,
-      cursor: isSelectable ? "pointer" : void 0,
-      hoverStyle: isSelectable && !selected ? { backgroundColor: theme.colors.control.brand.tertiary.bgHover } : void 0,
+      borderStyle: isOutlined ? "solid" : void 0,
       style: {
         overflow: "hidden",
         textOverflow: "ellipsis",
         whiteSpace: "nowrap"
       },
       children: [
-        icon && /* @__PURE__ */ jsx4(Icon, { size: sizeStyles.iconSize, color: text, children: icon }),
-        /* @__PURE__ */ jsx4(
+        iconLeft && /* @__PURE__ */ jsx4(Icon, { size: sizeStyles.iconSize, color: text, children: iconLeft }),
+        children && /* @__PURE__ */ jsx4(
           Text,
           {
             color: text,
@@ -389,7 +414,7 @@ var Tag = ({
             children
           }
         ),
-        onRemove && /* @__PURE__ */ jsx4(Box, { onPress: onRemove, children: /* @__PURE__ */ jsx4(X, { size: sizeStyles.iconSize, color: text }) })
+        onRemove ? /* @__PURE__ */ jsx4(Box, { onPress: onRemove, children: /* @__PURE__ */ jsx4(X, { size: sizeStyles.iconSize, color: text }) }) : iconRight && /* @__PURE__ */ jsx4(Icon, { size: sizeStyles.iconSize, color: text, children: iconRight })
       ]
     }
   );