@xsolla/xui-slider 0.89.0 → 0.91.0

package/web/index.mjs

@@ -202,257 +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`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
-  height: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
-  color: ${(props) => props.color || "currentColor"};
-
-  svg {
-    width: 100%;
-    height: 100%;
-    fill: none;
-    stroke: currentColor;
-  }
-`;
-
-// ../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/Slider.tsx
 import { useDesignSystem, useId } from "@xsolla/xui-core";
 import { Input } from "@xsolla/xui-input";
-import { Fragment, jsx as jsx8, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
 var sizeConfig = {
   xl: {
     height: 56,
@@ -892,7 +645,7 @@ var Slider = ({
     const inputIconLeft = iconInside && effectiveIconPosition === "left" ? iconInside : void 0;
     const inputIconRight = iconInside && effectiveIconPosition === "right" ? iconInside : void 0;
     const inputWidth = iconInside ? sizing.inputWidth + sizing.inputIconSize + sizing.inputIconGap : sizing.inputWidth;
-    return /* @__PURE__ */ jsx8(Box, { width: inputWidth, flexShrink: 0, children: /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx3(Box, { width: inputWidth, flexShrink: 0, children: /* @__PURE__ */ jsx3(
       Input,
       {
         value: String(inputValue),
@@ -918,7 +671,7 @@ var Slider = ({
     const thumbAriaLabel = range ? thumbType === "min" ? minThumbAriaLabel : maxThumbAriaLabel : ariaLabel || label || "Slider value";
     const currentThumbBg = thumbHovered && !disabled ? thumbBgHoverColor : thumbBgColor;
     const thumbBaseBg = disabled ? theme.colors.background.primary : currentThumbBg;
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx3(
       Box,
       {
         role: "slider",
@@ -960,7 +713,7 @@ var Slider = ({
         "aria-valuemin": range && thumbType === "max" ? rangeMin + step : min,
         "aria-valuemax": range && thumbType === "min" ? rangeMax - step : max,
         "aria-orientation": "horizontal",
-        children: disabled && /* @__PURE__ */ jsx8(
+        children: disabled && /* @__PURE__ */ jsx3(
           Box,
           {
             position: "absolute",
@@ -987,7 +740,7 @@ var Slider = ({
       onMouseEnter: () => setIsHovered(true),
       onMouseLeave: () => setIsHovered(false),
       children: [
-        label && /* @__PURE__ */ jsx8(
+        label && /* @__PURE__ */ jsx3(
           Text,
           {
             id: labelId,
@@ -1005,7 +758,7 @@ var Slider = ({
             height: sizing.height,
             children: [
               (inputPosition === "left" || inputPosition === "both") && (range ? renderInput(rangeMin, "min", "left") : renderInput(value, "single", "left")),
-              iconLeft && /* @__PURE__ */ jsx8(
+              iconLeft && /* @__PURE__ */ jsx3(
                 Box,
                 {
                   flexShrink: 0,
@@ -1017,7 +770,7 @@ var Slider = ({
                   children: iconLeft
                 }
               ),
-              showLabels && /* @__PURE__ */ jsx8(
+              showLabels && /* @__PURE__ */ jsx3(
                 Text,
                 {
                   color: disabled ? inputColors.textDisable : inputColors.text,
@@ -1026,7 +779,7 @@ var Slider = ({
                   children: min
                 }
               ),
-              /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsx3(
                 Box,
                 {
                   flex: 1,
@@ -1034,7 +787,7 @@ var Slider = ({
                   height: sizing.height,
                   alignItems: "center",
                   justifyContent: "center",
-                  children: /* @__PURE__ */ jsx8(
+                  children: /* @__PURE__ */ jsx3(
                     Box,
                     {
                       ref: trackRef,
@@ -1053,7 +806,7 @@ var Slider = ({
                       onResponderRelease: handleResponderRelease,
                       onResponderTerminate: handleResponderRelease,
                       children: range ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                        /* @__PURE__ */ jsx8(
+                        /* @__PURE__ */ jsx3(
                           Box,
                           {
                             position: "absolute",
@@ -1068,7 +821,7 @@ var Slider = ({
                         renderThumb(rangeMinPercentage, "min"),
                         renderThumb(rangeMaxPercentage, "max")
                       ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                        /* @__PURE__ */ jsx8(
+                        /* @__PURE__ */ jsx3(
                           Box,
                           {
                             position: "absolute",
@@ -1086,7 +839,7 @@ var Slider = ({
                   )
                 }
               ),
-              showLabels && /* @__PURE__ */ jsx8(
+              showLabels && /* @__PURE__ */ jsx3(
                 Text,
                 {
                   color: disabled ? inputColors.textDisable : inputColors.text,
@@ -1095,7 +848,7 @@ var Slider = ({
                   children: max
                 }
               ),
-              iconRight && /* @__PURE__ */ jsx8(
+              iconRight && /* @__PURE__ */ jsx3(
                 Box,
                 {
                   flexShrink: 0,