@xsolla/xui-multi-select 0.103.0 → 0.105.0

package/native/index.js

@@ -224,7 +224,7 @@ var Text = ({
   ...props
 }) => {
   let resolvedFontFamily = fontFamily ? fontFamily.split(",")[0].replace(/['"]/g, "").trim() : void 0;
-  if (resolvedFontFamily === "Pilat Wide Bold") {
+  if (resolvedFontFamily === "Pilat Wide" || resolvedFontFamily === "Pilat Wide Bold" || resolvedFontFamily === "Aktiv Grotesk") {
     resolvedFontFamily = void 0;
   }
   const style = {
@@ -998,7 +998,7 @@ var StyledText = import_styled_components4.default.span`
   color: ${(props) => props.color || "inherit"};
   font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
   font-weight: ${(props) => props.fontWeight || "normal"};
-  font-family: ${(props) => props.fontFamily || '"Pilat Wide Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important'};
+  font-family: ${(props) => props.fontFamily || '"Aktiv Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'};
   line-height: ${(props) => typeof props.lineHeight === "number" ? `${props.lineHeight}px` : props.lineHeight || "inherit"};
   white-space: ${(props) => props.whiteSpace || "normal"};
   text-align: ${(props) => props.textAlign || "inherit"};
@@ -1040,9 +1040,13 @@ var StyledIcon3 = import_styled_components5.default.div`
 var Icon4 = ({ children, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime394.jsx)(StyledIcon3, { ...props, children });
 };
+var SELECTABLE_BORDER_RADIUS = 8;
 var Tag = ({
   size = "md",
   tone = "primary",
+  variant = "default",
+  selected = false,
+  onPress,
   children,
   icon,
   onRemove
@@ -1050,66 +1054,98 @@ 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
+      };
+    }
     switch (tone) {
       case "primary":
         return {
           bg: theme.colors.background.primary,
-          text: theme.colors.content.primary
+          text: theme.colors.content.primary,
+          border: void 0
         };
       case "secondary":
         return {
           bg: theme.colors.background.secondary,
-          text: theme.colors.content.primary
+          text: theme.colors.content.primary,
+          border: void 0
         };
       case "brand":
         return {
           bg: theme.colors.background.brand.primary,
-          text: theme.colors.content.on.brand
+          text: theme.colors.content.on.brand,
+          border: void 0
         };
       case "brandExtra":
         return {
           bg: theme.colors.background.brandExtra.primary,
-          text: theme.colors.content.on.brandExtra
+          text: theme.colors.content.on.brandExtra,
+          border: void 0
         };
       case "success":
         return {
           bg: theme.colors.background.success.primary,
-          text: theme.colors.content.on.success
+          text: theme.colors.content.on.success,
+          border: void 0
         };
       case "warning":
         return {
           bg: theme.colors.background.warning.primary,
-          text: theme.colors.content.on.warning
+          text: theme.colors.content.on.warning,
+          border: void 0
         };
       case "alert":
         return {
           bg: theme.colors.background.alert.primary,
-          text: theme.colors.content.on.alert
+          text: theme.colors.content.on.alert,
+          border: void 0
         };
       case "neutral":
         return {
           bg: theme.colors.background.neutral.primary,
-          text: theme.colors.content.on.neutral
+          text: theme.colors.content.on.neutral,
+          border: void 0
         };
       default:
         return {
           bg: theme.colors.background.primary,
-          text: theme.colors.content.primary
+          text: theme.colors.content.primary,
+          border: void 0
         };
     }
   };
-  const { bg, text } = resolveColors();
+  const { bg, text, border } = resolveColors();
+  const isSelectable = variant === "selectable";
+  const borderRadius = isSelectable ? SELECTABLE_BORDER_RADIUS : sizeStyles.radius;
   return /* @__PURE__ */ (0, import_jsx_runtime395.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: isSelectable ? 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,
       style: {
         overflow: "hidden",
         textOverflow: "ellipsis",