@shoplflow/base 0.18.0 → 0.19.0

package/dist/index.cjs

@@ -1938,6 +1938,17 @@ var StyledInput = styled5__default.default.input`
   &::placeholder {
     color: ${exports.colorTokens.neutral350};
   }
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  /* Firefox */
+  &[type='number'] {
+    padding: 4px 8px;
+    text-align: center;
+    -moz-appearance: textfield;
+  }
 `;
 var RightElementWrapper = styled5__default.default.div`
   display: flex;
@@ -1986,6 +1997,8 @@ var Input = React3.forwardRef(
       disabled,
       type: initialType,
       maxLength,
+      min,
+      max,
       className,
       width
     } = _b, rest = __objRest(_b, [
@@ -1999,6 +2012,8 @@ var Input = React3.forwardRef(
       "disabled",
       "type",
       "maxLength",
+      "min",
+      "max",
       "className",
       "width"
     ]);
@@ -2024,6 +2039,18 @@ var Input = React3.forwardRef(
       },
       [maxLength]
     );
+    const limitRange = React3.useCallback(
+      (value2) => {
+        if (min && Number(value2) < min) {
+          return String(min);
+        }
+        if (max && Number(value2) > max) {
+          return String(max);
+        }
+        return value2;
+      },
+      [max, min]
+    );
     const handleOnMouseEnter = () => {
       setIsHovered(true);
     };
@@ -2041,8 +2068,20 @@ var Input = React3.forwardRef(
     const handleOnChange = (event) => {
       onChange && onChange(event);
       const slicedText = sliceText(event.target.value);
+      if (type === "number") {
+        const limitedText = limitRange(slicedText);
+        setText(limitedText);
+        return;
+      }
       setText(slicedText);
     };
+    const getWidth = () => {
+      if (type === "number") {
+        return "64px";
+      } else {
+        return width;
+      }
+    };
     const handleOnClear = () => {
       onClear && onClear();
       if (inputRef.current) {
@@ -2058,16 +2097,18 @@ var Input = React3.forwardRef(
       }
     };
     React3.useEffect(() => {
-      if (defaultValue) {
+      if (defaultValue !== void 0) {
         const convertString = convertToString(defaultValue);
         const slicedText = sliceText(convertString);
         setText(slicedText);
       }
     }, [convertToString, defaultValue, maxLength, sliceText]);
     React3.useEffect(() => {
-      if (value) {
+      var _a2;
+      if (value !== void 0) {
         const convertString = convertToString(value);
         const slicedText = sliceText(convertString);
+        ((_a2 = inputRef.current) == null ? void 0 : _a2.value) && (inputRef.current.value = slicedText);
         setText(slicedText);
       }
     }, [convertToString, maxLength, sliceText, value]);
@@ -2084,7 +2125,7 @@ var Input = React3.forwardRef(
         isHovered,
         onMouseEnter: handleOnMouseEnter,
         onMouseLeave: handleOnMouseLeave,
-        width,
+        width: getWidth(),
         "data-shoplflow": "input",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -2102,7 +2143,7 @@ var Input = React3.forwardRef(
               className: "body1_400" + (className ? ` ${className}` : "")
             }, rest)
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs(RightElementWrapper, { children: [
+          !(type === "number") && /* @__PURE__ */ jsxRuntime.jsxs(RightElementWrapper, { children: [
             maxLength && isFocused && /* @__PURE__ */ jsxRuntime.jsx(TextCounter_default, { currentLength: String(text).length, maxLength }),
             isFocused && Boolean(String(text).length > 0) && /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar: "S", onClick: handleOnClear, styleVar: "GHOST", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: assetFunction("DeleteIcon"), color: "neutral600" }) }),
             initialType === "password" && /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar: "S", onClick: handleTogglePasswordType, styleVar: "GHOST", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -2403,6 +2444,7 @@ var getStylesByStyleVariant = (styleVariant, isSelected, isHovered) => {
             fill: ${exports.colorTokens.neutral0};
           }
           ${isHovered && react$1.css`
+            border: 1.5px solid ${exports.colorTokens.primary400};
             background: ${exports.colorTokens.primary400};
           `}
         `;
@@ -2412,6 +2454,7 @@ var getStylesByStyleVariant = (styleVariant, isSelected, isHovered) => {
         border: 1.5px solid ${exports.colorTokens.neutral200};
         border-radius: 4px;
         ${isHovered && react$1.css`
+          border: 1.5px solid ${exports.colorTokens.neutral300};
           background: ${exports.colorTokens.neutral300};
         `}
 
@@ -2578,6 +2621,7 @@ var Container4 = styled5__default.default.button`
   display: flex;
   align-items: center;
   justify-content: center;
+  background: transparent;
   padding: 4px;
   width: fit-content;
   height: fit-content;