@xsolla/xui-select 0.89.0 → 0.90.0

package/web/index.mjs

@@ -1,5 +1,5 @@
 // src/Select.tsx
-import React3, { useState, useRef, useEffect } from "react";
+import React2, { useState, useRef, useEffect } from "react";
 
 // ../primitives-web/src/Box.tsx
 import React from "react";
@@ -202,54 +202,10 @@ var Text = ({
   );
 };
 
-// ../primitives-web/src/Spinner.tsx
-import styled3, { keyframes } from "styled-components";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var rotate = keyframes`
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-`;
-var StyledSpinner = styled3.div`
-  width: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
-  height: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
-  border: ${(props) => props.strokeWidth || 2}px solid
-    ${(props) => props.color || "currentColor"};
-  border-bottom-color: transparent;
-  border-radius: 50%;
-  display: inline-block;
-  box-sizing: border-box;
-  animation: ${rotate} 1s linear infinite;
-`;
-var Spinner = ({
-  role = "status",
-  "aria-label": ariaLabel,
-  "aria-live": ariaLive = "polite",
-  "aria-describedby": ariaDescribedBy,
-  testID,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx3(
-    StyledSpinner,
-    {
-      role,
-      "aria-label": ariaLabel,
-      "aria-live": ariaLive,
-      "aria-describedby": ariaDescribedBy,
-      "data-testid": testID,
-      ...props
-    }
-  );
-};
-Spinner.displayName = "Spinner";
-
 // ../primitives-web/src/Icon.tsx
-import styled4 from "styled-components";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var StyledIcon = styled4.div`
+import styled3 from "styled-components";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var StyledIcon = styled3.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -265,197 +221,13 @@ var StyledIcon = styled4.div`
   }
 `;
 var Icon = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx4(StyledIcon, { ...props, children });
+  return /* @__PURE__ */ jsx3(StyledIcon, { ...props, children });
 };
 
-// ../primitives-web/src/Divider.tsx
-import styled5 from "styled-components";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var StyledDivider = styled5.div`
-  background-color: ${(props) => props.dashStroke ? "transparent" : props.color || "rgba(255, 255, 255, 0.15)"};
-  width: ${(props) => props.vertical ? typeof props.width === "number" ? `${props.width}px` : props.width || "1px" : "100%"};
-  height: ${(props) => props.vertical ? "100%" : typeof props.height === "number" ? `${props.height}px` : props.height || "1px"};
-
-  ${(props) => props.dashStroke && `
-    border-style: dashed;
-    border-color: ${props.color || "rgba(255, 255, 255, 0.15)"};
-    border-width: 0;
-    ${props.vertical ? `
-      border-left-width: ${typeof props.width === "number" ? `${props.width}px` : props.width || "1px"};
-      height: 100%;
-    ` : `
-      border-top-width: ${typeof props.height === "number" ? `${props.height}px` : props.height || "1px"};
-      width: 100%;
-    `}
-  `}
-`;
-
-// ../primitives-web/src/Input.tsx
-import { forwardRef } from "react";
-import styled6 from "styled-components";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var StyledInput = styled6.input`
-  background: transparent;
-  border: none;
-  outline: none;
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  margin: 0;
-  color: ${(props) => props.color || "inherit"};
-  font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
-  font-family: inherit;
-  text-align: inherit;
-
-  &::placeholder {
-    color: ${(props) => props.placeholderTextColor || "rgba(255, 255, 255, 0.5)"};
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-  }
-`;
-var InputPrimitive = forwardRef(
-  ({
-    value,
-    placeholder,
-    onChange,
-    onChangeText,
-    onFocus,
-    onBlur,
-    onKeyDown,
-    disabled,
-    secureTextEntry,
-    style,
-    color,
-    fontSize,
-    placeholderTextColor,
-    maxLength,
-    name,
-    type,
-    inputMode,
-    autoComplete,
-    id,
-    "aria-invalid": ariaInvalid,
-    "aria-describedby": ariaDescribedBy,
-    "aria-labelledby": ariaLabelledBy,
-    "aria-label": ariaLabel,
-    "aria-disabled": ariaDisabled,
-    "data-testid": dataTestId,
-    ...rest
-  }, ref) => {
-    const handleChange = (e) => {
-      if (onChange) {
-        onChange(e);
-      }
-      if (onChangeText) {
-        onChangeText(e.target.value);
-      }
-    };
-    const inputValue = value !== void 0 ? value : "";
-    return /* @__PURE__ */ jsx6(
-      StyledInput,
-      {
-        ref,
-        id,
-        value: inputValue,
-        name,
-        placeholder,
-        onChange: handleChange,
-        onFocus,
-        onBlur,
-        onKeyDown,
-        disabled,
-        type: secureTextEntry ? "password" : type || "text",
-        inputMode,
-        autoComplete,
-        style,
-        color,
-        fontSize,
-        placeholderTextColor,
-        maxLength,
-        "aria-invalid": ariaInvalid,
-        "aria-describedby": ariaDescribedBy,
-        "aria-labelledby": ariaLabelledBy,
-        "aria-label": ariaLabel,
-        "aria-disabled": ariaDisabled,
-        "data-testid": dataTestId,
-        ...rest
-      }
-    );
-  }
-);
-InputPrimitive.displayName = "InputPrimitive";
-
-// ../primitives-web/src/TextArea.tsx
-import { forwardRef as forwardRef2 } from "react";
-import styled7 from "styled-components";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var StyledTextArea = styled7.textarea`
-  background: transparent;
-  border: none;
-  outline: none;
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  margin: 0;
-  color: ${(props) => props.color || "inherit"};
-  font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
-  font-family: inherit;
-  text-align: inherit;
-  resize: none;
-
-  &::placeholder {
-    color: ${(props) => props.placeholderTextColor || "rgba(255, 255, 255, 0.5)"};
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-  }
-`;
-var TextAreaPrimitive = forwardRef2(
-  ({
-    value,
-    placeholder,
-    onChangeText,
-    onFocus,
-    onBlur,
-    onKeyDown,
-    disabled,
-    style,
-    color,
-    fontSize,
-    placeholderTextColor,
-    maxLength,
-    rows
-  }, ref) => {
-    return /* @__PURE__ */ jsx7(
-      StyledTextArea,
-      {
-        ref,
-        value,
-        placeholder,
-        onChange: (e) => onChangeText?.(e.target.value),
-        onFocus,
-        onBlur,
-        onKeyDown,
-        disabled,
-        style,
-        color,
-        fontSize,
-        placeholderTextColor,
-        maxLength,
-        rows
-      }
-    );
-  }
-);
-TextAreaPrimitive.displayName = "TextAreaPrimitive";
-
 // src/Select.tsx
 import { useDesignSystem, isNative } from "@xsolla/xui-core";
-import { jsx as jsx8, jsxs } from "react/jsx-runtime";
-var ChevronDown = () => /* @__PURE__ */ jsx8(
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+var ChevronDown = () => /* @__PURE__ */ jsx4(
   "svg",
   {
     width: "100%",
@@ -463,7 +235,7 @@ var ChevronDown = () => /* @__PURE__ */ jsx8(
     viewBox: "0 0 18 18",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx8(
+    children: /* @__PURE__ */ jsx4(
       "path",
       {
         d: "M4.5 6.75L9 11.25L13.5 6.75",
@@ -475,7 +247,7 @@ var ChevronDown = () => /* @__PURE__ */ jsx8(
     )
   }
 );
-var ChevronUp = () => /* @__PURE__ */ jsx8(
+var ChevronUp = () => /* @__PURE__ */ jsx4(
   "svg",
   {
     width: "100%",
@@ -483,7 +255,7 @@ var ChevronUp = () => /* @__PURE__ */ jsx8(
     viewBox: "0 0 18 18",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx8(
+    children: /* @__PURE__ */ jsx4(
       "path",
       {
         d: "M13.5 11.25L9 6.75L4.5 11.25",
@@ -505,15 +277,15 @@ var ExclamationMarkCr = () => /* @__PURE__ */ jsxs(
     style: { stroke: "none" },
     xmlns: "http://www.w3.org/2000/svg",
     children: [
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx4(
         "path",
         {
           d: "M9.75 12.75C9.75 13.16 9.41 13.5 9 13.5C8.59 13.5 8.25 13.16 8.25 12.75C8.25 12.34 8.59 12 9 12C9.41 12 9.75 12.34 9.75 12.75Z",
           fill: "currentColor"
         }
       ),
-      /* @__PURE__ */ jsx8("path", { d: "M9.75 10.5H8.25V4.5H9.75V10.5Z", fill: "currentColor" }),
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx4("path", { d: "M9.75 10.5H8.25V4.5H9.75V10.5Z", fill: "currentColor" }),
+      /* @__PURE__ */ jsx4(
         "path",
         {
           fillRule: "evenodd",
@@ -534,7 +306,7 @@ var SearchIcon = () => /* @__PURE__ */ jsxs(
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     children: [
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx4(
         "path",
         {
           d: "M8.25 14.25C11.5637 14.25 14.25 11.5637 14.25 8.25C14.25 4.93629 11.5637 2.25 8.25 2.25C4.93629 2.25 2.25 4.93629 2.25 8.25C2.25 11.5637 4.93629 14.25 8.25 14.25Z",
@@ -544,7 +316,7 @@ var SearchIcon = () => /* @__PURE__ */ jsxs(
           strokeLinejoin: "round"
         }
       ),
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx4(
         "path",
         {
           d: "M15.75 15.75L12.4875 12.4875",
@@ -588,7 +360,7 @@ var Select = ({
   const isDisable = externalState === "disable" || disabled;
   const isError = externalState === "error" || !!errorMessage;
   const isFocus = externalState === "focus" || isOpen;
-  React3.useEffect(() => {
+  React2.useEffect(() => {
     if (value !== void 0) {
       setSelectedValue(value);
     }
@@ -687,7 +459,7 @@ var Select = ({
       width: "100%",
       position: "relative",
       children: [
-        label && /* @__PURE__ */ jsx8(
+        label && /* @__PURE__ */ jsx4(
           Text,
           {
             color: theme.colors.content.secondary,
@@ -717,8 +489,8 @@ var Select = ({
               borderColor: inputColors.borderHover
             } : void 0,
             children: [
-              iconLeft && /* @__PURE__ */ jsx8(Box, { alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx8(Icon, { size: sizeStyles.iconSize, color: iconColor, children: iconLeft }) }),
-              !iconOnly && /* @__PURE__ */ jsx8(Box, { flex: 1, height: "100%", justifyContent: "center", children: /* @__PURE__ */ jsx8(
+              iconLeft && /* @__PURE__ */ jsx4(Box, { alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx4(Icon, { size: sizeStyles.iconSize, color: iconColor, children: iconLeft }) }),
+              !iconOnly && /* @__PURE__ */ jsx4(Box, { flex: 1, height: "100%", justifyContent: "center", children: /* @__PURE__ */ jsx4(
                 Text,
                 {
                   color: textColor,
@@ -728,15 +500,15 @@ var Select = ({
                 }
               ) }),
               /* @__PURE__ */ jsxs(Box, { flexDirection: "row", alignItems: "center", gap: 4, children: [
-                isError && /* @__PURE__ */ jsx8(
+                isError && /* @__PURE__ */ jsx4(
                   Icon,
                   {
                     size: sizeStyles.iconSize,
                     color: theme.colors.content.alert.primary,
-                    children: /* @__PURE__ */ jsx8(ExclamationMarkCr, {})
+                    children: /* @__PURE__ */ jsx4(ExclamationMarkCr, {})
                   }
                 ),
-                /* @__PURE__ */ jsx8(Icon, { size: sizeStyles.iconSize, color: iconColor, children: iconRight !== void 0 ? iconRight : isFocus ? /* @__PURE__ */ jsx8(ChevronUp, {}) : /* @__PURE__ */ jsx8(ChevronDown, {}) })
+                /* @__PURE__ */ jsx4(Icon, { size: sizeStyles.iconSize, color: iconColor, children: iconRight !== void 0 ? iconRight : isFocus ? /* @__PURE__ */ jsx4(ChevronUp, {}) : /* @__PURE__ */ jsx4(ChevronDown, {}) })
               ] })
             ]
           }
@@ -758,7 +530,7 @@ var Select = ({
               minWidth: iconOnly ? sizeStyles.height * 3 : void 0
             },
             children: [
-              searchable && /* @__PURE__ */ jsx8(
+              searchable && /* @__PURE__ */ jsx4(
                 Box,
                 {
                   paddingHorizontal: sizeStyles.paddingHorizontal,
@@ -773,15 +545,15 @@ var Select = ({
                       gap: sizeStyles.paddingHorizontal / 2,
                       paddingHorizontal: 4,
                       children: [
-                        /* @__PURE__ */ jsx8(
+                        /* @__PURE__ */ jsx4(
                           Icon,
                           {
                             size: sizeStyles.iconSize - 2,
                             color: inputColors.placeholder,
-                            children: /* @__PURE__ */ jsx8(SearchIcon, {})
+                            children: /* @__PURE__ */ jsx4(SearchIcon, {})
                           }
                         ),
-                        /* @__PURE__ */ jsx8(
+                        /* @__PURE__ */ jsx4(
                           Box,
                           {
                             as: "input",
@@ -806,7 +578,7 @@ var Select = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsx4(
                 Box,
                 {
                   paddingVertical: 4,
@@ -814,13 +586,13 @@ var Select = ({
                     maxHeight: searchable ? maxHeight - 60 : maxHeight,
                     overflowY: "auto"
                   },
-                  children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx8(
+                  children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx4(
                     Box,
                     {
                       paddingVertical: sizeStyles.paddingVertical * 2,
                       paddingHorizontal: sizeStyles.paddingHorizontal,
                       alignItems: "center",
-                      children: /* @__PURE__ */ jsx8(
+                      children: /* @__PURE__ */ jsx4(
                         Text,
                         {
                           color: theme.colors.content.tertiary,
@@ -836,7 +608,7 @@ var Select = ({
                     const isSelected = optionValue === selectedValue;
                     const brandColors = theme.colors.control.brand.primary;
                     const contentColors = theme.colors.content;
-                    return /* @__PURE__ */ jsx8(
+                    return /* @__PURE__ */ jsx4(
                       Box,
                       {
                         ref: isSelected ? selectedItemRef : void 0,
@@ -854,7 +626,7 @@ var Select = ({
                         hoverStyle: !isSelected && !isOptionDisabled ? {
                           backgroundColor: theme.colors.control.input.bgHover
                         } : void 0,
-                        children: /* @__PURE__ */ jsx8(
+                        children: /* @__PURE__ */ jsx4(
                           Text,
                           {
                             color: isSelected ? contentColors.on.brand : theme.colors.content.secondary,
@@ -872,7 +644,7 @@ var Select = ({
             ]
           }
         ),
-        isError && errorMessage && /* @__PURE__ */ jsx8(
+        isError && errorMessage && /* @__PURE__ */ jsx4(
           Text,
           {
             color: theme.colors.content.alert.primary,