@xsolla/xui-multi-select 0.125.0 → 0.127.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-multi-select",
-  "version": "0.125.0",
+  "version": "0.127.0",
   "main": "./web/index.js",
   "module": "./web/index.mjs",
   "types": "./web/index.d.ts",
@@ -10,10 +10,10 @@
     "build:native": "PLATFORM=native tsup"
   },
   "dependencies": {
-    "@xsolla/xui-checkbox": "0.125.0",
-    "@xsolla/xui-core": "0.125.0",
-    "@xsolla/xui-dropdown": "0.125.0",
-    "@xsolla/xui-primitives-core": "0.125.0"
+    "@xsolla/xui-checkbox": "0.127.0",
+    "@xsolla/xui-core": "0.127.0",
+    "@xsolla/xui-dropdown": "0.127.0",
+    "@xsolla/xui-primitives-core": "0.127.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

package/web/index.js

@@ -1041,11 +1041,16 @@ var StyledIcon4 = import_styled_components8.default.div`
 var Icon4 = ({ children, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime395.jsx)(StyledIcon4, { ...props, children });
 };
+var SELECTABLE_BORDER_RADIUS = 8;
 var Tag = ({
   size = "md",
   tone = "primary",
   type = "solid",
+  variant = "default",
+  selected = false,
+  onPress,
   children,
+  icon,
   iconLeft,
   iconRight,
   onRemove
@@ -1053,6 +1058,20 @@ var Tag = ({
   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
+        };
+      }
+      return {
+        bg: theme.colors.overlay.mono,
+        text: theme.colors.content.primary,
+        border: theme.colors.border.secondary
+      };
+    }
     if (type === "outlined") {
       switch (tone) {
         case "primary":
@@ -1157,28 +1176,36 @@ var Tag = ({
     }
   };
   const { bg, text, border } = resolveColors();
+  const isSelectable = variant === "selectable";
   const isOutlined = type === "outlined";
+  const hasBorder = isSelectable || isOutlined;
+  const borderRadius = isSelectable ? SELECTABLE_BORDER_RADIUS : sizeStyles.radius;
+  const resolvedIconLeft = icon || iconLeft;
   return /* @__PURE__ */ (0, import_jsx_runtime396.jsxs)(
     Box2,
     {
+      as: isSelectable ? "button" : void 0,
+      onPress: isSelectable ? onPress : void 0,
       backgroundColor: bg,
-      borderRadius: sizeStyles.radius,
+      borderRadius,
       height: sizeStyles.height,
       paddingHorizontal: sizeStyles.padding,
       flexDirection: "row",
       alignItems: "center",
       justifyContent: "center",
       gap: sizeStyles.gap,
-      borderWidth: isOutlined ? 1 : 0,
+      borderWidth: hasBorder ? 1 : 0,
       borderColor: border,
-      borderStyle: isOutlined ? "solid" : void 0,
+      borderStyle: hasBorder ? "solid" : void 0,
+      cursor: isSelectable ? "pointer" : void 0,
+      hoverStyle: isSelectable && !selected ? { backgroundColor: theme.colors.control.brand.tertiary.bgHover } : void 0,
       style: {
         overflow: "hidden",
         textOverflow: "ellipsis",
         whiteSpace: "nowrap"
       },
       children: [
-        iconLeft && /* @__PURE__ */ (0, import_jsx_runtime396.jsx)(Icon4, { size: sizeStyles.iconSize, color: text, children: iconLeft }),
+        resolvedIconLeft && /* @__PURE__ */ (0, import_jsx_runtime396.jsx)(Icon4, { size: sizeStyles.iconSize, color: text, children: resolvedIconLeft }),
         children && /* @__PURE__ */ (0, import_jsx_runtime396.jsx)(
           Text2,
           {