@xsolla/xui-multi-select 0.118.0 → 0.119.0

package/native/index.js

@@ -1070,33 +1070,69 @@ var StyledIcon3 = import_styled_components5.default.div`
 var Icon4 = ({ children, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime395.jsx)(StyledIcon3, { ...props, children });
 };
-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":
@@ -1105,12 +1141,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,
@@ -1156,34 +1186,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_runtime396.jsxs)(
     Box2,
     {
-      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_runtime396.jsx)(Icon4, { size: sizeStyles.iconSize, color: text, children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime396.jsx)(
+        iconLeft && /* @__PURE__ */ (0, import_jsx_runtime396.jsx)(Icon4, { size: sizeStyles.iconSize, color: text, children: iconLeft }),
+        children && /* @__PURE__ */ (0, import_jsx_runtime396.jsx)(
           Text2,
           {
             color: text,
@@ -1197,7 +1222,7 @@ var Tag = ({
             children
           }
         ),
-        onRemove && /* @__PURE__ */ (0, import_jsx_runtime396.jsx)(Box2, { onPress: onRemove, children: /* @__PURE__ */ (0, import_jsx_runtime396.jsx)(X2, { size: sizeStyles.iconSize, color: text }) })
+        onRemove ? /* @__PURE__ */ (0, import_jsx_runtime396.jsx)(Box2, { onPress: onRemove, children: /* @__PURE__ */ (0, import_jsx_runtime396.jsx)(X2, { size: sizeStyles.iconSize, color: text }) }) : iconRight && /* @__PURE__ */ (0, import_jsx_runtime396.jsx)(Icon4, { size: sizeStyles.iconSize, color: text, children: iconRight })
       ]
     }
   );
@@ -1332,7 +1357,7 @@ var useMultiSelectControl = ({
               Tag,
               {
                 size,
-                tone: "secondary",
+                tone: "primary",
                 onRemove: removeTagsButtons && !isCount ? (e) => {
                   e?.stopPropagation();
                   if (!disabled) removeValue(item.value, e);